figma guide
Designing search UI in Figma: bars, filters, and results
Design search bars, autocomplete, filters, and results layouts in Figma with component variants, empty and loading states, and Dev Mode specs for tables and global search.
- Published
- Updated
- Jun 11, 2026
- Read time
- 8 min
- Level
- Beginner
Quick answer
Search UI in Figma spans three layers: the input (search bar with icon and clear button), suggestions (autocomplete dropdown or recent queries), and results (list, table, or card grid with filters and sort). Build a SearchInput component with variants for size=sm | md | lg, state=default | focus | disabled, and optional loading spinner inside the field. Pair it with filter chips, empty states, and pagination. Document debounce timing, minimum query length, keyboard navigation in suggestions, and URL sync (?q=) in Dev Mode. Start from the Figma guides hub if you are new to pattern libraries.
Who this is for
- Product designers shipping global search, admin table filters, and e-commerce catalog browse.
- Design system teams unifying search bars that were copy-pasted per feature.
- Engineers implementing debounce,
aria-autocomplete, and filter query params.
Search patterns compared
| Pattern | User goal | Best for | Avoid when |
|---|---|---|---|
| Simple search bar | Type query → submit | Small lists, site search | 50+ filter dimensions |
| Autocomplete / typeahead | Pick from suggestions while typing | People, products, addresses | Results need heavy faceted browse |
| Faceted search | Narrow by category, price, date | E-commerce, admin tables | Single-field name lookup |
| Command palette | Jump to action or page (⌘K) | Power users, dense apps | Consumer marketing sites |
| Filter-only (no query) | Slice dataset without text | Status toggles on dashboards | Full-text needed |
Verdict: combine a search input with facets when datasets are large; use typeahead when users know roughly what they want; use command palette for app navigation shortcuts—not catalog browsing.
Search input anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Container | Border, radius, background | Match form input height scale |
| Search icon | Left-aligned affordance | 16–20px; decorative (aria-hidden) |
| Text field | Query input | Placeholder: “Search products…” not “Search” |
| Clear button | Reset query (×) | Show when text length > 0 |
| Loading indicator | Fetch in progress | Replace icon or show trailing spinner |
| Shortcut hint | ⌘K badge (desktop) | Optional; hide on mobile |
SearchInput
├── Variant: size=sm | md | lg
├── Variant: state=default | focus | disabled | error
├── Property: isLoading=true | false
├── Property: hasShortcut=true | false
├── Layer: Container (horizontal auto layout, padding 8–12px, gap 8px)
│ ├── Search icon
│ ├── Input text (fill width, hug height)
│ ├── Clear button (optional, icon button)
│ └── Shortcut badge (optional)Bind border and focus ring to semantic tokens—input/border, input/focus-ring. Minimum 44px touch height on mobile.
Autocomplete dropdown anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Panel | Suggestions list below input | Same width as input or min 280px |
| Section label | ”Recent”, “Suggested” | Uppercase or caption style |
| Suggestion row | Icon + primary + secondary text | Highlight matching substring |
| Empty row | ”No results” | Link to empty state |
| Footer action | ”See all results” | Navigates to full results page |
SearchSuggestions / Panel
├── Variant: state=loading | results | empty
├── Layer: List (vertical auto layout)
│ ├── Section header (optional)
│ └── SuggestionItem × N
│ ├── Icon or avatar (optional)
│ ├── Primary label (text/body-md)
│ └── Secondary label (text/body-sm, muted)Reuse dropdown menu elevation and shadow tokens for the panel. Max height 320–400px with internal scroll.
Suggestion item states
| State | Visual | Interaction |
|---|---|---|
| Default | Neutral background | Hoverable |
| Hover / active | surface/hover | Keyboard aria-activedescendant |
| Selected | Checkmark or bold | Recent searches persisted |
| Disabled | Muted | Non-selectable category headers |
Document max suggestion count (e.g., 8) and debounce ms (250–400) in the component description.
Results layout patterns
| Layout | When to use | Pair with |
|---|---|---|
| Table rows | Admin data, audit logs | Tables, pagination |
| Card grid | Products, media | Cards |
| Simple list | People, files | Avatars + metadata column |
| Grouped sections | Mixed entity types | Section headers per type |
Show result count (“248 results for ‘invoice’”) above the list. Update count when filters change.
Filters and search together
| UI placement | Best for |
|---|---|
| Horizontal filter bar | 3–6 quick filters above results |
| Left sidebar | Many facets; desktop catalog |
| Filter sheet (mobile) | Same facets in bottom sheet |
| Inline chips | Active filters visible under search bar |
Use filter chips for active facets with dismiss (×). Add Clear all when more than two filters applied.
For dense facet groups, use accordions in the sidebar—multi-open mode.
Sort and view controls
| Control | Placement | Options example |
|---|---|---|
| Sort dropdown | Results header right | Relevance, Newest, Price |
| View toggle | Next to sort | List vs grid icons |
| Density | Admin tables | Compact vs comfortable row height |
Sort is not search—keep it adjacent but separate from the query field. Changing sort does not clear the query.
States: loading, empty, error, no-query
| State | What to show |
|---|---|
| Initial / no query | Placeholder + optional recent searches |
| Loading | Skeleton rows or spinner in input |
| Results | List/table + count + pagination |
| Zero results | Empty state with alternate query tips |
| Error | Inline alert + retry |
Build each state as a separate frame on the handoff page—Figma will not auto-switch based on query length.
Global search vs local search
| Type | Scope | UX notes |
|---|---|---|
| Global | Entire app (⌘K) | Modal overlay; grouped by entity type |
| Local | One page (table toolbar) | Inline bar; filters scoped to dataset |
| Scoped | Dropdown: “Search in Files” | Prefix or pill showing scope |
Document which entities global search includes (pages, users, settings). Link to navigation patterns for app shell placement.
Mobile behavior
| Desktop | Mobile |
|---|---|
| Persistent sidebar filters | Filter button → full-screen sheet |
| Wide autocomplete | Full-width panel; keyboard pushes content |
⌘K shortcut | Omit; optional search icon in nav bar |
On small screens, prioritize query + 1–2 primary filters; move the rest behind Filters (3) button.
Accessibility
| Element | Requirement |
|---|---|
| Input | <input type="search"> or role="searchbox" |
| Label | Visible or aria-label="Search products" |
| Autocomplete | aria-autocomplete="list", aria-controls panel id |
| Suggestions | role="listbox"; options role="option" |
| Live region | Announce result count updates |
| Clear button | aria-label="Clear search" |
| Focus | Return focus to input after clear |
Test contrast on highlighted match text inside suggestions—not only default row text.
Prototyping limits
Figma cannot filter real data. For stakeholder demos:
- Build frames: typing, suggestions, results, empty.
- Prototype input focus → show suggestions overlay.
- Wire See all results → results frame.
- Note debounce and API behavior in sticky Dev Mode comments.
Use sections to separate Global vs Local search flows.
Handoff to engineering
| Deliverable | Where it lives |
|---|---|
| Debounce interval | SearchInput description |
| Min characters before fetch | Dev Mode note (e.g., 2 chars) |
| Suggestion API vs full search API | Handoff table |
| Filter query param names | ?q=&category=&sort= spec |
| Pagination reset on new query | ”New search → page 1” |
| Recent searches persistence | localStorage vs server |
| Mobile filter sheet breakpoint | md frame annotation |
Include search in your Dev Mode handoff checklist. Publish under Patterns / Search in your team library.
Real-world examples
Admin table toolbar (local search)
Search input left; filter chips for Status and Owner; table below with pagination.
E-commerce catalog (faceted)
Search bar + category sidebar accordions. Results grid uses cards. Zero results shows empty state with popular categories.
Command palette (global)
⌘K opens modal with search input and grouped shortcuts. Escape closes; Enter navigates.
Cross-link wireframing when search IA is still exploratory.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Search icon as only submit affordance | Users do not know Enter works | Placeholder + document Enter behavior |
| No clear button | Friction resetting query | Show × when input has text |
| Autocomplete too tall | Covers entire screen on mobile | Max height + scroll |
| Filters hidden with no indicator | Users think search is broken | Show active filter chips |
| Spinner only, no skeleton | Layout jump on results | Use skeleton rows |
| Same component for global + local | Wrong shortcuts and scope | Split variants or separate components |
| Zero-results dead end | Users abandon | Suggest spelling, popular items, clear filters |
| Sort resets filters silently | Data feels random | Document interaction matrix |
FAQ
Search bar vs select with search?
Use search input for open-ended text. Use searchable select (combobox) when users must pick one known option from a list.
Show recent searches?
Yes for global search and e-commerce—clearable list below empty input. Skip for sensitive admin contexts (HIPAA, finance).
Highlight matching letters in results?
Yes in autocomplete and result titles—use text/brand or bold weight for matched substring; verify contrast.
Instant search vs submit button?
Instant (debounced) for large catalogs. Explicit submit for expensive queries or compliance audit logs where each search is logged intentionally.
Bottom line
Design search as a system: input, suggestions, filters, results, and empty/loading states—not a lone magnifying-glass field. Document debounce, keyboard navigation, filter params, and mobile sheet behavior in Dev Mode. Continue with tables, pagination, accordions for facet sidebars, and the tutorials hub.
§ Keep reading