Figma is a browser-based and desktop collaborative design tool that has become the dominant platform for UI/UX design, design systems, and developer handoff. It matters because it collapses the design-development gap into a single live file — one source of truth for components, variables, prototypes, and specs. The key mental model to carry into every table: everything in Figma is a layer in a hierarchy, and the power of the tool comes from how those layers — frames, components, variables, and styles — relate and respond to each other.
What This Cheat Sheet Covers
This topic spans 15 focused tables and 151 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Frames, Groups, and Sections
Frames, groups, and sections are the three distinct container types in Figma, and choosing correctly between them determines whether your layout can use auto layout, constraints, and overflow scrolling. Frames are the foundational container — essentially artboards — while groups are lightweight wrappers and sections are canvas-level organizers only.
| Feature | Example | Description |
|---|---|---|
Press F, draw on canvas | Foundational container for screens, components, and layout regions; supports auto layout, constraints, layout guides, overflow scrolling, and clip content. | |
Select layers → Cmd/Ctrl+G | Lightweight wrapper whose bounds auto-adjust to fit children; no constraints, no auto layout; best for quick temporary bundling. | |
Press S, draw on canvas | Canvas-level organizer sitting above frames in the hierarchy; used to divide a file into named regions for collaboration and Dev Mode handoff; does not affect layout behavior. |