This social chat list web UI for Figma gives you a messaging app chat list with filters, unread badges and read ticks.

What is included

• A top bar with a brand name and camera, search and menu icons
• Filter chips for All, Unread, Favorites and Groups
• Nine chat rows with avatar, last message, time and unread count
• Sent and read ticks in a brand color
• A floating new chat button or an empty state panel on larger screens
• 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 messaging apps, customer chat tools and any product with a list of conversations. It is made for desktop web apps and landing page demos.

Design notes

Unread chats show a colored time and a round badge. The list rows are 48 px avatars with two lines of text, which keeps a long list easy to scan. 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.