This social server channel chat app UI for Figma gives you a community chat with a server rail, a channel list, a message stream and a member list.

What is included

• A server rail with round and rounded square icons
• A channel list with text channels, voice channels and an unread badge
• A message stream with colored names, time stamps, reactions and an attachment
• A message field with an attach icon and emoji
• A member list split into admins and members
• The app screen is 390 by 844 px with a status bar, a home indicator and a tab bar where the screen has one

Where to use it

Use it for community chat, gaming and study groups, team hubs and any product with channels. It is made for iOS and Android app UI.

Design notes

Each person has a name color, and the colors are chosen to stay readable in both themes. The active channel has a tinted row and a bold name. It uses a light theme: white and near-white cards, dark text and a indigo 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 Light 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.