How to Design Empty States

Empty states are one of the most overlooked parts of product design. Every new user sees them. Most new users will decide in those first few moments whether the product is worth continuing with.

Designing empty states well is not about making them pretty. It's about turning a moment of uncertainty into a moment of clarity.

Why empty states matter

A new user who opens your product for the first time sees an empty state. What they see in that moment answers the question: "Do I understand what to do next?"

If the answer is yes, they'll move forward. If the answer is no, they'll either click around aimlessly until they find something, or they'll leave.

Empty states are also your first opportunity to show users what's possible. A well-designed empty state doesn't just fill space — it teaches users what the populated version of the product looks like and motivates them to create it.

Think of an empty state as a silent onboarding moment. No copy to read, no video to watch — just a clear signal about what to do first.

The three types of empty states

No data yet (first-use): The user hasn't created or imported any content. This is the most important type to design well. It's the first thing most users see.

No results: The user searched or filtered and nothing matched. This is different from first-use — the user is actively trying to find something.

Error state: Something went wrong — a failed load, a broken connection, a permissions issue.

Each type needs different treatment. Design them separately.

What each type needs

First-use empty states:

The three elements: a clear explanation of what goes here, a primary action button to create the first item, and optionally an illustration or visual that shows what this section will look like when populated.

The explanation should answer "what is this for?" in one sentence. Not "No projects yet" — that's obvious. Something like "Projects keep your work organized. Each project has its own files, tasks, and team members."

The action button should do one thing: start the process of creating the first item. "Create your first project" is better than "Get started" (vague) or "Add project" (matches the full empty state but lacks the motivation of the word "first").

Illustrations are optional but effective when they show populated content — a sketch of what a full project list looks like, for example. Avoid purely decorative illustrations that don't communicate meaning.

No results states:

Users are frustrated here. They came looking for something and didn't find it.

Three things this state needs: confirmation that the search was actually run (don't just show a blank page), a clear explanation of why there are no results (so users know whether it's their query or genuinely empty), and suggestions for what to do next.

"No results for 'proect'" — note the typo and suggest "Did you mean 'project'?" if you can. "No results match your current filters — try clearing a filter or searching in a different section." Both of these give users a path forward.

Error states:

Be honest about what happened. "Something went wrong" is barely better than a blank screen — it gives users no information about what to do.

Name the problem specifically when you can: "Couldn't load your data — check your internet connection and try again." Or "You don't have permission to access this section — contact your administrator."

Always include an action: a refresh button, a retry, a link to support. An error with no action is a dead end.

Design empty states in Figma

Common mistakes

Blank space with no guidance. A section with white space and no text or action is not a designed empty state — it's an unfinished design. Even a simple "Nothing here yet" is better, though you can do much better than that.

Unhelpful error messages. "Error 500" or "An error occurred" provides no value. Users don't know what 500 means and they don't know what to do. Write error messages for the user who has no technical knowledge.

Generic copy. "No items found" on every empty list in your product misses the opportunity to give context specific to each section. The empty state for a notification list, an activity feed, and a project list all need different explanations.

Forgetting mobile. An empty state illustration that works on desktop can break at mobile widths. Design empty states at mobile viewport sizes explicitly — don't assume it will scale.

Illustrating without informing. An empty state with a charming illustration but no clear action leaves users appreciating the art while not knowing what to do. The illustration should support the message, not replace it.

Designing the full first-use flow

Don't design empty states in isolation. Think through the complete new-user journey:

1. What is the first screen a new user sees?
2. What empty states do they encounter as they explore?
3. Does each empty state point clearly to the next action?
4. After completing the first action, do they arrive at a populated state that confirms they did the right thing?

In Figma, build out this flow as a connected prototype. Run through it as a new user. You'll often find that your empty states don't chain together — creating the first item leads to a populated state that itself has empty sections with no guidance.

Every section in your product has a first-use moment. Design each one deliberately.

Figma component approach

Build empty states as Figma component variants for each section. A good empty state component has:

• Variant: no data — with illustration, headline, description, primary action button
• Variant: no results — with description and action
• Variant: error — with error description and retry action

Connect the "Create first item" button in your Figma prototype to the populated version of the screen. When stakeholders or user testers see the flow, they should be able to experience the transition from empty to populated without broken links.

The best empty states are the ones users remember most after they've stopped using them — because they led directly to a populated, valuable product.