Figma Design Tool Keyboard Shortcuts

Figma Design Shortcuts

Figma is the industry-standard design tool for UI/UX design. These keyboard shortcuts help designers and developers work faster in Figma.

Tool Selection

Figma uses single-key shortcuts for tools (no modifier keys needed):

• V — Move tool (selection)
• F — Frame tool
• R — Rectangle
• O — Ellipse
• L — Line
• P — Pen tool
• T — Text tool
• K — Scale tool
• I — Color picker (eyedropper)
• C — Comment tool

Navigation & Zoom

• Zoom In (⌘+= / Ctrl+=) — zoom in
• Zoom Out (⌘+- / Ctrl+-) — zoom out
• Zoom to 100% (⌘+0 / Ctrl+0) — actual size
• Zoom to Fit (⌘+1 / Ctrl+1) — fit everything in view
• Zoom to Selection (⌘+2 / Ctrl+2) — zoom to fit the selected element
• Pan (Space+Drag) — hold Space and drag to pan the canvas

Layer Operations

• Group (⌘+G / Ctrl+G) — group selected layers
• Ungroup (⌘+Shift+G / Ctrl+Shift+G) — ungroup
• Frame Selection (⌘+⌥+G / Ctrl+Alt+G) — wrap selection in a frame
• Bring Forward (⌘+] / Ctrl+]) — move layer up in the stack
• Send Backward (⌘+[ / Ctrl+[) — move layer down
• Duplicate (⌘+D / Ctrl+D) — duplicate in place
• ⌥+Drag / Alt+Drag — duplicate and drag

Components & Auto Layout

• Create Component (⌘+⌥+K / Ctrl+Alt+K) — turn selection into a reusable component
• Detach Instance (⌘+⌥+B / Ctrl+Alt+B) — detach a component instance from its main component
• Auto Layout (Shift+A) — add auto layout to the selection (essential for responsive design)
• Remove Auto Layout (Shift+⌥+A / Shift+Alt+A) — remove auto layout

Developer Handoff

• Copy CSS (⌘+⌥+C / Ctrl+Alt+C) — copy CSS properties from the Design panel
• Show/Hide UI (⌘+\\ / Ctrl+\\) — toggle the interface for a clean view of the canvas
• Layers Panel (⌥+1 / Alt+1) — toggle the layers panel
• Assets Panel (⌥+2 / Alt+2) — toggle the assets/components panel