This social group chat web UI for Figma shows a group chat with a conversation and a group info panel that lists media and members.

What is included

• A group header with a member line and call icons
• A thread with received and sent bubbles, a photo and a voice note
• A group info panel with avatar, name and member count
• Audio, Video and Search buttons and a media strip
• A member list with admin tags and an Exit group row
• 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 group messaging, community apps, team chat and event planning tools. It is made for desktop web apps and landing page demos.

Design notes

Admins get a small green tag and the Exit group action is red at the bottom, so risky actions stay separate. The media strip uses three square tiles. It uses a dark theme: near-black cards, light text and the same green 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.