Figma empty state components and examples

The empty state is the first screen a new user sees and the last screen most teams draw. It gets designed at the end of the sprint, usually as a centered gray sentence reading "No data", on the screen where a person has the least context and the most doubt about whether the product is working.

A new workspace with no projects, a filtered table with no matches, an integration that has not connected yet, a folder someone just emptied: all of those are moments where the interface has nothing to show and everything to explain. The 2 components and 36 variants above are the raw material.

Three empty states, not one

They look alike and behave differently. The first-run state is onboarding in disguise, so it should name what will eventually live here and offer exactly one action to make that happen. The no-results state is recovery, so it should repeat what was searched or filtered and give a way back out. The error or permission state is status reporting, so it should say what failed and whether the user can fix it.

Nielsen Norman Group's three guidelines for empty states in complex applications line up with that split: communicate system status, teach something, and offer a direct path to the task. "No data" manages none of the three.

One more thing worth saying out loud: skip the jokes. Their research on no-results pages found humor reads as mockery to someone who is already stuck.

Eight icon treatments, three sizes

The Icon property covers a featured icon, an illustration, a file type icon, a folder icon, a transparent folder icon, a users radius, a users row, and an integrations cluster, each in sm, md, and lg. The choice is not cosmetic. The users treatments are for invite-a-teammate states where the point is that the space is meant to hold people, the integrations cluster is for dashboards waiting on a connection, and the file and folder icons belong in browsers where the user expects to see documents.

A featured icon is the honest default for everything else, and there are 1,100+ free icons to put inside it. The component sits in a 512px container, so it drops into a card or a panel without redesigning around it.

The illustration costs vertical space

Illustrations are a separate component set with four styles, cloud, box, documents, and credit card, in three sizes topping out at 220px wide. They buy attention, and they spend height doing it. That is why the small sizes exist: an empty state sitting inside a table's content area cannot afford a full-size illustration above the headline before the message even starts.

Use the large one on a full-page first run, and the sm sizes anywhere the empty state is a guest inside another component. Every frame in the file exists twice, once light and once dark, which matters more here than in most places because a light illustration dropped onto a dark panel is the classic dark mode giveaway.

Where empty states actually live

Rarely on their own. Most of them sit inside something: a card, a panel, a sidebar, or a data table, which is why the table components in this kit ship assembled with a card header, a filters bar, an empty state, and pagination in place at 1,216px wide.

That arrangement catches the problem you only find in context: the empty state has to make sense with the filter chips still visible above it, because those filters are how the user arrived at nothing. Full-page versions are a different component, closer to the 404 pages, and inside a dashboard the empty state is often the entire first session.

When it is time to build, the same empty states exist in code. Untitled UI React empty states are open source, built with Tailwind CSS and React Aria, with the sizes and icon treatments matching these components.