The difference between a designer who works fast and one who feels like they are constantly fighting the tool often comes down to one thing: keyboard shortcuts. In Figma, every second you spend reaching for the toolbar or hunting through a context menu is a second your hands left the canvas. Multiply that across a full workday and the loss is significant.
This cheat sheet covers every shortcut that actually moves the needle — organized by category so you can learn them in logical groups rather than memorizing a random list.
Why keyboard shortcuts matter in Figma
Keyboard shortcuts in Figma are not just conveniences — they are the primary interface for professional-speed design, allowing tool switches, alignment, and component actions without ever leaving the canvas. Once the core set is muscle memory, the cognitive overhead of "how do I do this" disappears, leaving full attention for design decisions.
The shortcuts below apply to macOS. For Windows, substitute Ctrl for ⌘ and Alt for ⌥ throughout.
Tools
The most important shortcuts are the single-key tool activators. These are the ones to memorize first.
| Action | Shortcut |
|---|---|
| Move / Select | V |
| Frame (Artboard) | F |
| Rectangle | R |
| Ellipse | E |
| Line | L |
| Pen | P |
| Text | T |
| Hand (pan) | H or hold Space |
| Scale | K |
| Slice | S |
| Comment | C |
Hold Space while on any tool to temporarily activate the Hand (pan) tool,
then release to snap back. This is far faster than pressing H and back.
Selection
Getting precise control over what is selected — and what is not — is where most beginners waste time.
| Action | Shortcut |
|---|---|
| Select all | ⌘ A |
| Select all in frame | Click frame, then ⌘ A |
| Deep select (click through) | ⌘ click |
| Select parent frame | Esc |
| Add to selection | Shift click |
| Select same layer type | Right-click → Select Layer → … |
| Zoom to selection | Shift 2 |
| Hide / show selection | ⌘ Shift H |
| Lock selection | ⌘ Shift L |
| Rename layer | ⌘ R |
Layout and Arrange
Alignment and distribution shortcuts are among the highest-leverage in the entire app.
| Action | Shortcut |
|---|---|
| Align left | ⌥ A |
| Align right | ⌥ D |
| Align top | ⌥ W |
| Align bottom | ⌥ S |
| Align horizontal center | ⌥ H |
| Align vertical center | ⌥ V |
| Distribute horizontal spacing | ⌃ ⌥ H |
| Distribute vertical spacing | ⌃ ⌥ V |
| Group selection | ⌘ G |
| Ungroup | ⌘ Shift G |
| Frame selection | ⌘ ⌥ G |
| Bring to front | ⌘ ] (repeat for each step) |
| Send to back | ⌘ [ (repeat for each step) |
| Bring forward one level | ⌘ ] |
| Send backward one level | ⌘ [ |
| Flip horizontal | Shift H |
| Flip vertical | Shift V |
Components and Instances
These shortcuts speed up the most repetitive parts of design-system work.
| Action | Shortcut |
|---|---|
| Create component | ⌘ ⌥ K |
| Detach instance | ⌘ ⌥ B |
| Swap component (search) | ⌥ click the component thumbnail in the panel |
| Main component → Go to | ⌘ L (in dev mode) |
| Toggle visibility in panel | ⌘ . |
| Copy as code (Dev Mode) | ⌘ ⌥ C |
View and Zoom
Navigating a large file without a fast zoom workflow slows everything down.
| Action | Shortcut |
|---|---|
| Zoom in | ⌘ + or + |
| Zoom out | ⌘ – or – |
| Zoom to fit all | Shift 1 |
| Zoom to selection | Shift 2 |
| Zoom to 100% | ⌘ 0 or 0 |
| Zoom to 200% | ⌘ Shift 0 |
| Pan | Hold Space, then drag |
| Previous page | Page Up |
| Next page | Page Down |
| Toggle rulers | Shift R |
| Toggle grid | ⌘ ' (apostrophe) |
| Toggle pixel grid | ⌘ Shift ' |
| Toggle layers panel | ⌘ ⌥ 1 |
| Toggle assets panel | ⌘ ⌥ 2 |
| Toggle design panel | ⌘ ⌥ 3 |
| Presentation / prototype view | ⌘ ⌥ P |
Text
Figma's text tool has a full set of shortcuts for typographers.
| Action | Shortcut |
|---|---|
| Bold | ⌘ B |
| Italic | ⌘ I |
| Underline | ⌘ U |
| Strikethrough | ⌘ Shift X |
| Align left | ⌘ ⌥ L |
| Align center | ⌘ ⌥ T |
| Align right | ⌘ ⌥ R |
| Align justified | ⌘ ⌥ J |
| Increase font size | ⌘ Shift > |
| Decrease font size | ⌘ Shift < |
| Increase line height | ⌥ Shift > |
| Decrease line height | ⌥ Shift < |
| Increase letter spacing | ⌥ > |
| Decrease letter spacing | ⌥ < |
Edit and Transform
General editing shortcuts that apply across all layer types.
| Action | Shortcut |
|---|---|
| Copy | ⌘ C |
| Paste | ⌘ V |
| Paste in place | ⌘ Shift V |
| Duplicate in place | ⌘ D |
| Cut | ⌘ X |
| Delete | Delete or Backspace |
| Undo | ⌘ Z |
| Redo | ⌘ Shift Z |
| Copy properties | ⌘ ⌥ C |
| Paste properties | ⌘ ⌥ V |
| Toggle fill | ⌥ click color swatch |
| Pick color from screen | ⌃ C (eyedropper) |
| Nudge 1 px | Arrow keys |
| Nudge 10 px | Shift + Arrow keys |
| Resize proportionally | Shift + drag corner |
| Resize from center | ⌥ + drag corner |
The ten to learn first
If you are starting from scratch, these ten shortcuts give the biggest return per minute of practice:
V— move toolF— frame toolT— text tool⌘ D— duplicate in place⌘ G— group⌘ ⌥ G— frame selectionShift 2— zoom to selection⌘ ⌥ K— create component⌥ A / D / W / S— align edges⌃ ⌥ H / V— distribute spacing
Learn these in one session and the rest become natural extensions of the same logic.
Faster design, cleaner handoff
A designer who works quickly in Figma is also a designer who builds cleaner files — there is less incentive to skip naming layers or setting up auto layout when those actions cost seconds instead of minutes.
Cleaner Figma files translate directly into faster, more accurate development handoffs. If you want to see what a production-ready Figma-to-code workflow looks like end to end, explore our services or get a free quote.
Sofia Reyes
Webflow & No-Code Lead
Sofia heads up Figmafy’s Webflow and Framer practice. She is obsessed with clean class systems, smooth interactions, and sites that marketing teams actually enjoy editing.