Designing a command palette in Figma

Quick answer

A command palette is a keyboard-first overlay for actions, pages, and recent items. It is not catalog search. Build one component: a trigger hint, an input, grouped results, a selected row, and a no-match state. Prototype a few query results as variants. Figma will not filter live text as the user types. Pair it with search UI when the job is finding records, and with combobox when the job is picking one field value.

Who this is for

• Product designers shipping an app people use every day, where mouse-only navigation is slow.
• Design-system teams who need one overlay instead of a different “quick find” in every product.
• Engineers who need the keyboard map, the result groups, and what happens when a command is unavailable.

This is not a site search box and not a dropdown of ten nav links. If the product is a marketing site, skip the palette.

Palette, search, and menu

Pattern	Job	Opens from
Command palette	Run an action or jump to a place	Keyboard shortcut, sometimes a button
Search	Find records in a dataset	A search field on the page
Menu	Choose among a short, known list	A button or a right-click

Use a palette when people know the action’s name better than they know which menu holds it. “Invite teammate”, “Toggle dark mode”, and “Go to billing” belong there. “Filter orders by status” belongs in search and filters.

Anatomy

Build the overlay as one component, centered near the top of the frame, not stuck to a corner.

1. Input. One line, autofocused when the palette opens. Placeholder text should say what can be found: “Search actions and pages”, not “Type here”.
2. Groups. Label groups in the product’s words: Recent, Pages, Actions. Do not label them “Category A”.
3. Rows. Icon, name, and an optional shortcut on the right. One row is selected. The selected row is not only a color change; it needs a clear bar or background that still works in dark mode.
4. Footer hint. One line for the keys that matter: move, open, close. Hide this on short screens if the list needs the space.
5. Scrim. The page behind dims. Clicking the scrim closes the palette. So does Escape.

Keep the list to what fits without an inner scroll on a laptop, then scroll inside the list. Do not scroll the whole page behind it.

Keyboard

Write the keys in the handoff, not only in a prototype that engineers cannot inspect.

Key	Behavior
Shortcut to open	Your product’s shortcut. Show it on the trigger.
Arrow up / down	Move the selected row, including across groups
Enter	Run the selected command or open the page
Escape	Close and return focus to the trigger
Tab	Stay inside the palette, or close it. Pick one and say so.

Return focus to the control that opened the palette. If a command opens a modal, focus moves there instead.

Disabled commands stay visible when the user might look for them, with the reason on the row: “Needs admin”. Hide commands the user must never see.

What to prototype

Figma prototypes do not filter a list from whatever the user types. Do not spend a day faking that.

Make variants for the states engineering will actually build:

• Empty query. Recent items, or the few commands you want people to learn.
• Matches. Two groups, one row selected.
• No matches. The query shown in the empty copy, plus a way to clear it.
• Loading. Only if results come from a server. A short skeleton is enough. See loading states.

Name the variants query=idle | matches | empty | loading. In Dev Mode, note that the live product filters as the user types and that these frames are samples.

Empty and error

No-match copy names the query and tells the person what to do next: “No commands for ‘invioce’. Check the spelling, or browse settings.” Do not use the same illustration as a first-run empty state. Nothing is wrong with the account. The query missed.

If the action list fails to load, say that. “Couldn’t load commands. Try again.” is a different state from no matches.

What to hand off

• The shortcut, and that it must not steal keys from text fields. A palette that opens while someone is typing in an input is a bug.
• Group order and whether Recent is per person or per product.
• Which commands are hidden, which are disabled, and the disabled reason.
• Focus return, scrim click, and Escape.
• That rows are text, not images, so they can be translated.

Common mistakes

• Using the palette as the only navigation. People who do not know the shortcut still need the sidebar or tabs.
• Mixing record search into the same list with no group label. A customer named “Settings” and a Settings page should not look identical.
• Selecting a row with color alone.
• Prototyping twenty fake queries. Three states are enough to spec the behavior.

FAQ

Should every app have a command palette?

No. Add one when the product has enough pages and actions that menus get slow for daily users. A five-screen tool does not need it.

Where does the shortcut go?

On the button or icon that also opens the palette, and in the footer hint. Do not hide it in a help doc only. The keyboard shortcuts guide is about Figma’s own keys, not your product’s.

Can the palette create things?

Yes, if “Create project” is a command. The palette runs the command. The form that follows is still a form, not more rows in the palette.

Next

The same overlay habits show up in an inbox: a list, a selected row, and a clear empty state. Continue with notification inbox. Browse the rest on Patterns.