Figma Keyboard Shortcut Cheatsheet

Interface Related

Navigation

• Fn →, Fn ← (Home, End): Go to next frame, go to previous frame
• Fn ↑, Fn ↓ (PageUp, PageDown): Go to next page, go to previous page
• Tab, ⇧ Tab: Go to next sibling, go to previous sibling (sibling in the layer)
• Enter, ⇧ Enter (or Fn ⇧ Enter): Go to child, to to parent (when multiple children present, all of them will be selected)

Interaction

Selecting objects

• drag-select: select objects that is in your current selection box
• shift + click: add / remove object from your current selection

Nudge (moving stuff around)

• ↑, ↓, ←, →: small nudge (move the element by 1px)
• ⇧↑, ⇧↓, ⇧←, ⇧→: big budget (move the element by 10px)
• (*you can configure the nudge amount in the “Preferences Nudge Amount” setting)

Bring front/back

• [, ]: bring to front (top layer), send to back (bottom layer)
• ⌘[, ⌘], bring forward, send backward (move one layer per step)

Zoom

• 1 : zoom to fit (zoom to a ratio that will fit everything you have in the current page)

• 2 : zoom to selection (zoom to fit your current cursor selection)

• n, ⇧n: zoom to next frame, zoom to previous frame

• ⌘ 0: zoom to 100% (would be useful if you want to view how the page may looks like on your current device)

• ⌘ +, ⌘ -: zoom in, zoom out (I would just prefer using gesture on trackpad)

Asset

(To add existing component or resources)

• Method-1: Insert asset using “asset tab in quick action panel”:
  1. ⌘p to open quick action panel
  2. ⌥2 to focus the asset panel in the quick action panel
  3. start tying in the search field (without the need to click on anything)
  4. find the component using your arrow-keys
  5. press enter to insert the component
• Method-2: Inserting asset using “asset sidebar panel” (less recommended, since mouse is involved)
  1. ⌥2 to open the panel
  2. focus on the search input field and input
  3. find the component drag-and-drop component

Other

UI / Sidebar

• ⌘ \: Toggle UI (show or hide the sidebar)
• ⇧⌘\: Use minimised UI (hide left sidebar but show right panel)
• ⌥ L: Collapse layers (collapse folder on the layer sidebar)
• ⌘ P: Open quick action panel

Assist / Guide

• ⇧G: Toggle layout guide (e.g. 12 column layout overlay, when dragging the item will snap to the columns)
• ⇧R: Toggle rulers

Layout Related

Alignment

• ⌥w, ⌥a, ⌥s, ⌥d: align top, align left, align bottom, align right

• ⌥h, ⌥v: align centre in horizontal axis, align centre in vertical axis

• ⌃⌥h, ⌃⌥v: distribute spacing in horizontal axis, distribute spacing in vertical axis

(*The above alignment functionalities is only functional when free form is active (auto-layout is NOT being used))

Organise

• ⌘G Group current selection

• ⌥⌘G Frame current selection

• ⇧A Auto Layout (Manual) for current selection

• ⌃⇧A Suggest Auto Layout (AI Powered) for current selection

(* as you can see from the above example, the “suggest auto layout” can intelligently setup auto-layout inside the current selected frame, you can learn more about this topic in this video: https://www.youtube.com/watch?v=h13lHNx6rtI )

Component

• ⌥⌘K : Create component

• ⌃⌥⌘K : Go to main component

• ⌥⌘B: Detach instance (turn components back to regular frame)