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. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
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 |