Cheatsheet Figma Design UI/UX Productivity Developer Tools 10 min read
Figma Shortcuts Cheat Sheet: Design, Dev Mode & Proto
By Aayushi Gajjar
|
Updated: May 16, 2026
TL;DR
Mac modifier:Cmd — Windows modifier:Ctrl (interchangeable below, noted as Cmd/Ctrl)
V select · F frame · R rect · T text · P pen · H hand (pan)
Shift+A wraps selection in Auto Layout — the single most-used shortcut
Cmd/Ctrl+D duplicates · Alt+drag copies in place
Cmd/Ctrl+K opens the Scale tool — resizes without distorting constraints
Quick reference tables
Tool selection (no modifier)
Key
Tool
V
Select (Move)
K
Scale
F
Frame
S
Slice
R
Rectangle
L
Line
Shift+L
Arrow / Connector
O
Ellipse
P
Pen
B
Paint bucket (fill)
T
Text
H
Hand (pan canvas)
C
Comment
Esc
Back to Select / cancel operation
Canvas navigation
Shortcut
Action
Space + drag
Pan canvas
Cmd/Ctrl +
Zoom in
Cmd/Ctrl -
Zoom out
Cmd/Ctrl 0
Zoom to 100%
Cmd/Ctrl Shift H
Zoom to fit (all layers)
Shift 1
Zoom to fit selection
Shift 2
Zoom to selection
Shift N
Next frame (for prototypes / presentations)
N
Next frame (same direction)
Z + click
Zoom into clicked area
Z + drag
Zoom into dragged region
Cmd/Ctrl Shift –
Zoom out incrementally
Selection and editing
Selecting layers
Shortcut
Action
Click
Select top-most layer
Cmd/Ctrl + click
Select a specific layer inside a group
Shift + click
Add layer to selection
Double-click
Enter group / component
Esc
Exit group / select parent
Cmd/Ctrl A
Select all
Cmd/Ctrl Shift A
Select all on current frame
Click + drag
Marquee select
Tab
Select next sibling layer
Shift Tab
Select previous sibling layer
Moving and aligning
Shortcut
Action
Arrow keys
Nudge 1px
Shift + Arrow
Nudge 10px
Alt + Arrow
Nudge while duplicating (creates a copy)
Alt + drag
Duplicate in place
Cmd/Ctrl D
Duplicate selection
Cmd/Ctrl G
Group selection
Cmd/Ctrl Shift G
Ungroup
Cmd/Ctrl [
Send backward (one level)
Cmd/Ctrl ]
Bring forward (one level)
Cmd/Ctrl Alt [
Send to back
Cmd/Ctrl Alt ]
Bring to front
Cmd/Ctrl Shift H
Flip horizontal
Cmd/Ctrl Shift V
Flip vertical
Transforms and dimensions
Shortcut
Action
Cmd/Ctrl K
Open Scale tool (proportional resize)
Cmd/Ctrl R
Rename selected layer
Hold Shift while resizing
Maintain aspect ratio
Hold Alt while resizing
Resize from center
Enter on selected frame
Enter frame and select first child
Auto Layout
Auto Layout is Figma’s flexbox — it arranges children automatically and resizes as content changes.
Shortcut
Action
Shift A
Add Auto Layout to selection
Alt Shift A
Remove Auto Layout
Cmd/Ctrl Alt G
Frame selection (wrap in frame, not group)
Auto Layout properties panel
plaintext
Direction: Horizontal ↔ | Vertical ↕Alignment: Top-left, Center, Bottom-right (9 options)Gap: Space between childrenPadding: Top / Right / Bottom / LeftSizing: Fixed / Hug / FillWrap: Enabled wraps overflow to next row
Hug vs Fill
Hug shrinks the container to fit its children. Fill stretches the child to fill its parent’s available space. This is Figma’s equivalent of CSS height: fit-content vs flex: 1.
Components and variants
Shortcut
Action
Cmd/Ctrl Alt K
Create component from selection
Cmd/Ctrl Alt B
Detach instance from main component
Cmd/Ctrl E
Collapse / expand component in assets panel
Cmd/Ctrl /
Quick search (also opens component picker)
Alt + click on component
Edit main component
Shift + click on swapper
Swap component to another variant
Component panel navigation
Shortcut
Action
Cmd/Ctrl P
Open search / command palette
Type component name
Find in Assets panel
Drag from Assets panel
Insert an instance
Text editing
Shortcut
Action
T
Text tool
Double-click on text
Edit text
Esc
Exit text editing
Cmd/Ctrl B
Bold
Cmd/Ctrl I
Italic
Cmd/Ctrl U
Underline
Cmd/Ctrl Shift S
Strikethrough
Alt < / >
Decrease / Increase letter spacing
Alt Shift < / >
Decrease / Increase line height
Cmd/Ctrl Shift . / ,
Increase / Decrease font size
Vector and path editing
Shortcut
Action
Enter on a shape
Enter vector editing mode
Esc
Exit vector editing
P
Add a new point
Cmd/Ctrl P
Pen (inside vector edit mode)
Click + drag on point
Convert to curve
Alt + click on handle
Break handle (asymmetric)
Cmd/Ctrl J
Join selected end points
Delete
Delete selected points
Shift + click multiple points
Multi-select points
O
Boolean: union
Alt O
Boolean: subtract
Cmd/Ctrl Alt I
Boolean: intersect
Cmd/Ctrl Alt X
Boolean: exclude
Prototyping mode
Shortcut
Action
Shift E
Switch to Prototype tab
Click connection dot + drag
Create an interaction
Cmd/Ctrl \
Show / hide UI (present fullscreen)
Cmd/Ctrl Return
Start / restart prototype preview
Shift N
Next frame in prototype
R (in preview)
Restart prototype
Dev Mode (Figma Dev, 2024 GA)
Dev Mode is Figma’s developer handoff view — inspect measurements, copy CSS, and export assets.
Shortcut
Action
Shift D
Toggle Dev Mode on/off
Click a layer
Inspect properties (no more selecting first)
Hold Ctrl/Cmd
Toggle measurement guides between elements
I
Open the Inspect panel
Click </> icon
Copy CSS, Swift, Android code
Dev Mode panel sections
Section
What it shows
Properties
Width, height, x, y, opacity, blend mode
Fill
Hex/RGBA color, gradient details
Typography
Font, size, weight, line height, letter spacing
Variants
Current component variant and all available
Code
Auto-generated CSS / SwiftUI / Android XML
Links
Connected Jira tickets, Storybook stories, docs
Assets
Export slice — PNG / SVG / PDF / WebP
Copy CSS in One Click
In Dev Mode, clicking any layer then switching to the Code panel auto-generates the CSS for that layer. Press the copy icon to get the full block — font, size, color, padding, border-radius — ready to paste.
Exporting assets
Shortcut
Action
Cmd/Ctrl Shift E
Open Export panel
Select layer → + in Export panel
Add export setting
Click export button
Download asset
Export format guide
Format
Best for
PNG
Raster graphics, screenshots, icons with transparency
SVG
Icons, illustrations — stays sharp at any size
PDF
Print assets, multi-page documents
WebP
Web — smaller than PNG at same quality
Inspect panel (Design mode)
Action
What you get
Click any layer
Size, position, fill, stroke, effects
Hold Alt + hover over layers
Distance between two elements
Click color chip
Hex / RGBA / HSL value
Click font name
Full typography spec
Click Copy on a property
Copies value to clipboard
Figma shortcuts: Mac vs Windows reference
Action
Mac
Windows
Undo
Cmd Z
Ctrl Z
Redo
Cmd Shift Z
Ctrl Shift Z
Copy
Cmd C
Ctrl C
Paste
Cmd V
Ctrl V
Paste in place
Cmd Shift V
Ctrl Shift V
Save (auto in Figma)
Cmd S
Ctrl S
Open file
Cmd O
Ctrl O
Find layer
Cmd F
Ctrl F
Toggle panels
Cmd \
Ctrl \
Show rulers
Shift R
Shift R
Show grid
Cmd Shift '
Ctrl Shift '
Show guides
Cmd Shift ;
Ctrl Shift ;
Outline view
Cmd Y
Ctrl Y
Zoom to fit
Cmd Shift H
Ctrl Shift H
Component search
Cmd P
Ctrl P
Summary
V → F → T → R are your most-used tool keys — memorize them first
Shift+A for Auto Layout, Cmd/Ctrl+D to duplicate, Alt+drag to copy in place
Dev Mode (Shift+D) is the bridge between design and code — use the Code panel for instant CSS
Learn the 9-point alignment grid in the right panel — it replaces most manual positioning
Cmd/Ctrl+/ opens the quick search — type anything (layer name, component, action) to find it
FAQ
Does Figma work offline?
The Figma desktop app works offline for files previously opened. All edits sync when you reconnect. The browser version requires an internet connection.
What is the difference between a Group and a Frame?
Groups have no background, no independent constraints, and clip by the union of their children. Frames have their own dimensions, fill, Auto Layout, and can clip overflow. For layouts, always prefer Frames.
How do I reset a component instance to the main component?
Right-click the instance → Reset all overrides. This restores all properties (text, fill, visibility) to the main component defaults.
Can I use Figma without a paid plan?
Yes. The free Starter plan allows 3 Figma design files and 3 FigJam boards with full features. Paid plans unlock unlimited files, version history, and advanced Dev Mode features.
What is the best way to hand off designs to developers?
Share the file link with Dev Mode access. Developers can inspect layers, copy code, and export assets directly in the browser — no Figma account required for view-only access.
