Back to All Cheatsheet Libraries cheatsheets

Figma

Keyboard shortcuts, Auto Layout and component/variant concepts, and a Dev Mode handoff guide for designers and developers.

Total Shortcuts: 0

Category	Action	macOS	Windows
Tools	Frame tool	`F`	`F`
Tools	Rectangle tool	`R`	`R`
Tools	Ellipse tool	`O`	`O`
Tools	Text tool	`T`	`T`
Tools	Pen tool	`P`	`P`
Components	Create component	`⌥⌘K`	`Ctrl+Alt+K`
Components	Create instance from component	`Drag from Assets`	`Drag from Assets`
Components	Detach instance	`⌥⌘B`	`Ctrl+Alt+B`
Layout	Add Auto Layout	`⇧A`	`Shift+A`
Layout	Group selection	`⌘G`	`Ctrl+G`
Layout	Frame selection	`⌥⌘G`	`Ctrl+Alt+G`
Alignment	Align left / right	`⌥A / ⌥D`	`Alt+A / Alt+D`
Alignment	Align center (horizontal)	`⌥H`	`Alt+H`
View	Zoom to fit	`⇧1`	`Shift+1`
View	Zoom to selection	`⇧2`	`Shift+2`
Collaboration	Add comment	`C`	`C`
Collaboration	Present / Play prototype	`⌘⏎`	`Ctrl+Enter`

Auto Layout Concepts

Direction

Horizontal or vertical stacking — items reflow automatically as content is added, removed, or resized.

Padding & Gap

Padding controls space inside the frame's edges; gap controls space between each child item.

Resizing (Hug / Fill / Fixed)

Hug wraps tightly to content, Fill expands to its parent's available space, Fixed stays a set size regardless of content.

Nested Auto Layout

Auto Layout frames can contain other Auto Layout frames — the standard way to build a responsive card, list row, or nav bar.

Components & Variants

Main Component

Source of truthEdits propagate to instances

Instance

Linked copyOverrides allowed

Variants

Property-based statese.g. size, state, icon

Component Properties

BooleanTextInstance swap

Switch to Dev Mode

Toggles the right panel from design properties to a code-focused inspector — CSS, iOS (Swift), and Android (Compose/XML) snippets per selected layer.

Read spacing directly

Hover between two layers in Dev Mode to see the exact pixel gap — no more eyeballing margins from a screenshot.

Export assets

Select a layer, set export format (SVG for icons, PNG/WebP for raster) and scale (1x/2x/3x) in the right panel, then export — or use the Export panel to batch multiple layers at once.

Quick Tips

Styles vs. Variables

Styles (color/text/effect) are the older, simpler token system; Variables support modes (e.g. light/dark) and can bind to component properties — use Variables for anything that needs to change per-theme.

Branch before big changes

Figma branches work like Git branches for a file — create one before a risky redesign so the main file stays safe to hand off.

Plugins for repetitive work

Content Reel, Autoflow, and similar plugins handle placeholder data and diagramming faster than doing it by hand.