This social profile grid web UI for Figma gives you a creator profile with a header, story highlights, a tab row and a three column photo grid.

What is included

• A profile header with avatar ring, name, role, post, follower and following counts
• A short bio and Follow and Message buttons
• A row of round story highlights with names
• Posts, Reels and Tagged tabs with an active state
• A grid of square photo tiles with thin gaps
• 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 social apps, portfolio tools, creator pages and any product that shows a person and their photos. It is made for desktop web apps and landing page demos.

Design notes

Counts are bold and labels are light, which makes the numbers easy to scan. The grid uses equal square tiles, so replacing the photos never breaks the layout. It uses a dark theme: near-black cards, light text and the same pink and blue 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.