Figma messaging components

Nobody needs to be taught how to read a chat thread. Your messages sit on one side, theirs on the other, time runs downward, and the newest thing is at the bottom. That fluency is both a gift and a constraint, since any part of a messaging interface you make novel, you make worse. These 3 components and 42 variants stay firmly inside the conventions people already carry in from every other app on their phone.

Sent, received, and the work alignment does

The message component has a sent property, and switching it does more than slide a bubble across a 360px column. Alignment is what carries authorship once reading gets fast, which is why a group thread needs avatars and a one-to-one thread mostly does not.

Color usually travels with alignment, and that is where it gets risky: if the only difference between your two bubble styles is a fill, you have failed WCAG's use of color criterion for anyone reading the thread in greyscale or with low color vision. Let position, tail direction, and contrast each carry part of the load.

Nine message types, one of which goes only one way

A message is rarely just text. The type property covers a plain message, a reply that quotes what it answers, a file, an audio clip, an image, a video, a link with a full preview, a link in a minimal form, and a writing state.

The writing indicator exists only on the received side, which is exactly right, since you never watch yourself type. It is 54px tall, small enough that a thread does not lurch when it appears and vanishes.

The two sides are deliberately not mirror images either: an image bubble is 319px received and 352px sent, and a plain message 120px against 96px, because each side carries different furniture. Media types lean on the same building blocks as the rest of the kit, so a video in a thread borrows from video players rather than inventing its own controls.

Receipts, reactions, and the hover strip

Read receipts are a 16px status icon with three states, unread, read, and failed, each with a hover variant so the icon can explain itself in a tooltip. Failed is the one that deserves your attention, because it is the only state that asks the user to do something, and it should never look like a dimmer version of read.

Reactions come in two widths, 32px by 24px for a bare emoji and 45px by 24px once a count appears, which is the point where a reaction stops being a response and becomes a tally. The actions panel is a 114px by 32px strip of 20px icon buttons that sits over a bubble on hover, and every message type ships with a variant showing it, so you can review a state that normally exists for half a second.

The composer, and what a thread is in code

Three composer layouts come with the set: a minimal 44px single line, a 128px textarea, and a 160px advanced version. Choose by what people actually send. A support widget wants the 44px line; a team tool where messages contain code, links, and second thoughts wants the tall one, because a composer that never grows quietly teaches people to write less.

When it is built, a thread is a log, and MDN's guide to ARIA live regions recommends the log role with a polite announcement, so an incoming message is read out after the current sentence finishes rather than cutting across it. The whole set is drawn twice, light and dark, and the file shows a thread inside a 440px drawer, which is where in-app chat usually ends up.

When the messages start arriving from a socket, Untitled UI React messaging components are open source, built with Tailwind CSS and React Aria, with the bubble alignment, status states, and composer behavior already handled.