This social image board web UI for Figma gives you an image board with a search field, category chips and a masonry grid of pins.

What is included

• A rounded search field and category chips
• Four columns on the web layout, three on tablet and two on the app
• Pins with different heights and rounded corners
• A Save button on a hovered pin
• A small avatar and a title under every pin
• The web layout is 1440 px wide with a side menu and a content area that fits a 1000 px high screen

Where to use it

Use it for inspiration boards, shopping and recipe apps, mood board tools and photo discovery pages. It is made for desktop web apps and landing page demos.

Design notes

Pins have 16 px corners and 12 px gaps, with different heights so the grid feels natural. The Save button uses the brand color. It uses a dark theme: near-black cards, light text and the same red accent, so it reads like a real app screen rather than a wireframe.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Every color is a fill you can change in the fill panel, and the whole screen uses auto layout. Text pairs stay above 4.5 to 1 contrast, except white text that sits on a photo.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. This is the Dark version. Photo spots are rectangles with a real sample picture already placed as a fill, so you can swap in your own picture in one click. Install the free Plus Jakarta Sans font first. All names, handles and numbers are sample content.