Figma is a cloud-based design platform for creating user interfaces, prototypes, and collaborative design systems. It provides real-time collaboration, vector editing, auto-layout (including a new CSS Grid-style two-dimensional layout), components with variants, variables for design tokens, prototyping, AI-powered tools (First Draft, AI image generation, the Figma Agent), and a developer-facing MCP server for design-to-code workflows. Figma has expanded from a UI design tool into a full product ecosystem — spanning Figma Design, Figma Make, Figma Sites, Figma Slides, and FigJam.
What This Cheat Sheet Covers
This topic spans 14 focused tables and 205 indexed concepts, 122 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Frames & Layers
Frames are Figma's primary containers for building screens and components; understanding frame hierarchy, layer management, and canvas organization with Sections is the foundation for everything else in Figma.
| Concept | Example | Description | |
|---|---|---|---|
F or A | • Top-level container that defines canvas boundaries • Frames can be nested and support auto-layout, constraints, clipping, and prototyping | ||
Shift+S | • Top-level canvas container for grouping related frames and flows • Supports "Ready for dev" and "Changed" status markers for developer handoff | ||
Click, Shift+click | • Single-click selects a layer; Shift+click adds to selection• Cmd/Ctrl+click for deep-select of nested layers inside a frame | ||
Click-drag area | • Click and drag on empty canvas to select multiple objects • Hold Cmd/Ctrl while dragging to select nested layers | ||
Frame contains objects | • Parent frames contain child objects • Auto-layout and constraints govern how children respond to parent resizing | ||
Cmd/Ctrl+Shift+H | • Toggle visibility with the eye icon or shortcut • Hidden layers cannot be selected on canvas but remain in the Layers panel | ||
Cmd/Ctrl+Shift+L | • Prevents moving or editing on the canvas • Locked layers are still selectable in the Layers panel for property inspection | ||
Cmd/Ctrl+] or [ | • Bring forward or send backward in the z-stack • Cmd/Ctrl+Opt/Alt+] brings to front, Cmd/Ctrl+Opt/Alt+[ sends to back | ||
Cmd/Ctrl+R | • Opens bulk-rename modal with support for numbering, prefixes, and regex patterns • Consistent naming is essential for component publishing and Dev Mode | ||
Frame within frame | Child frames inside parent frames enable complex layout structures and component compositions | ||
Collapse icon | Collapses all expanded groups in the Layers panel while preserving the current selection |