figma guide
Designing empty states in Figma: illustrations, copy, and handoff
Design empty state components in Figma with illustration slots, headline and body copy, primary CTAs, and layout variants for tables, search, and dashboards.
- Published
- Updated
- Jun 08, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
Empty states in Figma are centered content blocks shown when a list, table, search, or dashboard has no data yet or no matching results. Build them as published components with an illustration or icon slot, headline, body copy, and optional primary + secondary actions. Use variants for type=first-use | no-results | error | permission-denied and size=compact | full-page. Document when the state appears (zero rows vs filtered to zero) in Dev Mode—not only a pretty illustration. Pair with tables, cards, and forms for create flows. Start from the Figma guides hub if you are new to component libraries.
Who this is for
- Product designers shipping first-run experiences, search-no-results, and empty dashboards.
- Design system teams who need reusable empty state blocks instead of one-off art per feature.
- Engineers implementing conditional renders who need copy, CTA targets, and illustration assets.
Empty state types: choose the right pattern
| Type | When it shows | Tone | Typical CTA |
|---|---|---|---|
| First use | User has never created data | Encouraging | ”Create your first project” |
| No results | Filters or search return zero | Neutral, helpful | ”Clear filters” or broaden search tips |
| Error / failed load | API or network failure | Apologetic | ”Try again” |
| Permission denied | User lacks access | Clear, not blaming | ”Request access” or contact admin |
| Completed / all done | Inbox zero, tasks done | Positive | Optional next step |
Verdict: first use and no results look similar but need different copy and actions. Do not reuse “Nothing here yet” for a failed API call.
Component anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Illustration / icon | Visual anchor | 120–200px; optional for compact |
| Headline | Primary message | 1 short sentence, sentence case |
| Body | Supporting context | 1–2 lines max; explain what to do next |
| Primary action | Main CTA | One button—create, retry, or clear filters |
| Secondary action | Optional | Link style: “Learn more”, “Import CSV” |
EmptyState / Base
├── Variant: type=first-use | no-results | error | permission
├── Variant: size=compact | full-page
├── Property: hasSecondaryAction=true | false
├── Layer: Container (vertical auto layout, center align)
│ ├── Illustration slot (instance swap or fixed component)
│ ├── Headline (text/heading-md)
│ ├── Body (text/body-md, text-secondary token)
│ ├── Primary button (nested component)
│ └── Secondary link button (optional)Bind text colors to semantic tokens. Keep illustration colors on-brand but muted—empty states should not compete with primary UI.
Size variants
| Variant | Max width | Illustration | Best for |
|---|---|---|---|
| Full-page | 400–480px content | Large illustration | New account, empty project |
| Compact | 320px | Small icon 48–64px | Table body, sidebar panel |
| Inline | Hug contents | Icon only | Single card slot, combobox |
Design compact and full-page as separate variants—not scaled-down copies with illegible type.
Copy guidelines
| Element | Good | Weak |
|---|---|---|
| Headline | ”No projects yet" | "Oops!” |
| Body | ”Create a project to start tracking tasks with your team." | "You have no data.” |
| CTA | ”Create project" | "Click here” |
| No results | ”No matches for ‘invoice’" | "Error” |
Write action-oriented body copy that tells users the next step. Link to wireframing patterns when exploring copy in low fidelity first.
Layout with auto layout
- Container: vertical auto layout, center align, gap 16px (compact) or 24px (full-page).
- Text stack: vertical auto layout, gap 8px, center text align for full-page; left align for compact inside tables.
- Actions: horizontal auto layout, gap 12px, primary before secondary.
- Padding: 32–48px vertical inside table cells; 64–96px for full-page centers.
Use layout grids on full-page empty artboards so content stays centered on wide screens. For responsive frames, set max width on the text stack and center the group.
Embedding in tables and lists
| Container | Layout | Notes |
|---|---|---|
| Table (zero rows) | Compact empty state spans table width | Hide column headers or keep them—document choice |
| Card grid | Full-page centered in content area | CTA creates first card |
| Search dropdown | Inline: icon + “No results” | Link to dropdown patterns |
| Dashboard widget | Compact inside widget frame | May omit illustration |
Show table + empty state on a spec artboard so engineers know the empty component replaces <tbody> content, not the entire page chrome.
Illustrations and icons
| Approach | Pros | Cons |
|---|---|---|
| Custom illustration | Brand personality | Maintenance cost |
| Icon in circle | Fast, system-friendly | Less memorable |
| Product screenshot ghost | Shows what “full” looks like | Can feel busy |
| No visual | Minimal | Harder to scan |
Use icon plugins and sets for consistent stroke weight. Export illustrations as SVG with notes in export guide.
Dark mode: provide illustration variants or use tokens on fills—preview with dark mode tricks.
Accessibility checklist
- Headline maps to heading level in code (
h2orh3)—document level per context. - Illustrations use
alt=""when decorative; meaningful images need alt text in Dev Mode. - CTA is a real button component with focus ring—not a text link styled as primary action unless intentional.
- Color contrast on body text meets WCAG—check with accessibility plugins.
- Do not rely on illustration alone to convey error vs empty—headline must state the situation.
Common use cases
Empty project (first use)
Full-page variant. Headline: “Start your first design file.” CTA: “New file.” Optional secondary: “Import from Sketch” linking to Sketch import guide.
Search no results
Compact variant. Headline: “No results for ‘{query}’.” Body: “Try different keywords or clear filters.” Actions: “Clear filters” (primary), “Search all projects” (secondary).
Empty inbox / notifications
Compact or full-page. Positive tone: “You’re all caught up.” No primary CTA—or optional “Notification settings.”
Failed to load
Error type. Headline: “Couldn’t load projects.” CTA: “Try again.” Do not use cheerful illustrations for errors.
Cross-link navigation patterns when empty states appear inside tab panels.
Prototyping limits
Figma prototypes can show one static empty frame—they do not switch between populated and empty based on data. For demos:
- Duplicate the screen: with data and empty state.
- Wire a toggle button between them for stakeholder review.
- Note: “Engineering: render when
items.length === 0.”
Optional: prototype CTA click to form modal for create flows.
Handoff to engineering
| Deliverable | Where it lives |
|---|---|
| Type enum | Variant property names |
| Trigger condition | ”Show when filteredItems.length === 0” |
| CTA destination | Link or route in description |
| Illustration export | SVG/PNG in Dev Mode assets |
| Heading level | Component description |
| Compact vs full | Variant name + min height |
Include empty states in your Dev Mode handoff checklist. When empty states sit in data-heavy views, cross-link Dev Mode specs with table column definitions.
Comparison: empty state vs skeleton loader
| Pattern | When | User expectation |
|---|---|---|
| Empty state | Confirmed zero data | ”Nothing here; here’s what to do” |
| Skeleton | Data is loading | ”Content is on the way” |
| Error state | Load failed | ”Something went wrong” |
Verdict: never show an empty state during loading—use skeleton placeholders first, then swap to empty or populated content.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Same copy for first use and no results | User confusion | Separate variants |
| Cheerful art for errors | Trust loss | Error type variant |
| No CTA on first use | Dead end | Primary action always |
| Giant illustration in table cell | Layout break | Compact variant |
| ”No data” only | Unhelpful | Explain next step in body |
| Empty state hides nav | User feels lost | Keep chrome visible |
| Lorem ipsum in production spec | Ships to prod | Real copy in component |
FAQ
Should every list share one empty state component?
One base component with instance-swap illustration and text overrides per feature. Headlines and CTAs differ; structure stays the same.
How do empty states relate to onboarding modals?
Modals interrupt for guided tours; empty states are persistent in-context prompts. Use modals once; empty state until the user creates data.
Include empty states in the component library?
Yes. Publish under Patterns / EmptyState in your team library so squads do not redraw them.
What about zero-state for charts?
Use compact variant with icon + “No data for this period” + optional “Change date range”—same anatomy, smaller illustration slot.
Bottom line
Treat empty states as structured illustration + headline + body + CTA blocks with clear type variants for first use, no results, and errors. Write copy that explains the next action, not just the absence of data. Publish compact and full-page sizes from your library and document trigger conditions in Dev Mode. Continue with tables for zero-row layouts, cards for grid empties, and the tutorials hub.
§ Keep reading