SwiftUI Cheat Sheet — implement the iOS designs you create in Figma Tailwind CSS Cheat Sheet — translate Figma spacing/color tokens to Tailwind classes React Hooks Cheat Sheet — build the web interfaces designed in Figma

Figma Shortcuts Cheat Sheet: Design, Dev Mode & Proto

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 |

| 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 children
Padding:      Top / Right / Bottom / Left
Sizing:       Fixed / Hug / Fill
Wrap:         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 |

| 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.

Figma Shortcuts Cheat Sheet: Design, Dev Mode & Proto