How to Create Empty States in Figma
StateBuilder generates empty state variants with placeholder illustrations, helpful copy, and calls-to-action based on your component context.
The Problem
Empty states are overlooked, leaving users confused
- Empty lists show nothing, with no guidance
- First-time users see blank screens instead of onboarding
- Search results show "0 results" without helpful suggestions
- Empty states are designed ad-hoc without patterns
Confusing blank
Empty list showing blank spaceHelpful empty state
Empty list with illustration, message, and "Add First Item" buttonStep-by-Step Solution
How to Create Empty States in Figma
1
Select data component
Select your list, table, grid, or data container in its populated state. StateBuilder uses this to understand the context.
💡
Pro tip: Empty states should match the dimensions of the populated component.
2
Configure empty state
Choose empty state elements: illustration, headline, description, and primary action. StateBuilder provides templates.
💡
Pro tip: Include a clear call-to-action that helps users add their first item.
3
Generate variant
StateBuilder creates the Empty variant with centered messaging. Adjust illustration and copy to match your brand voice.
💡
Pro tip: Create multiple empty states: first-time (onboarding) vs filtered (no results).
Why Use StateBuilder?
Consistent empty state patterns
Helpful onboarding moments
Clear calls-to-action
Illustration placeholders
Multiple empty state types
Frequently Asked Questions
Common Questions About Create Empty States in Figma
What elements should an empty state have?
Typically: illustration (optional), headline, description, and primary action button. Keep messaging encouraging, not negative.
Should I use different empty states for different scenarios?
Yes. First-time/onboarding, no search results, and error-caused empty states should have different messaging.
Where can I get empty state illustrations?
Use your brand illustration library, or source from free libraries like unDraw, Humaaans, or Blush.
Ready to Create Empty States in Figma?
Auto-generate component states and documentation specs. Install StateBuilder for free and start in seconds.