Figma is a cloud-based design platform for creating user interfaces, prototypes, and collaborative design systems. It provides real-time collaboration, vector editing tools, auto-layout, components with variants, variables for design tokens, prototyping capabilities, and developer handoff features. Figma enables teams to design, prototype, and gather feedback all in one place.
What This Cheat Sheet Covers
This topic spans 11 focused tables and 145 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Frames & LayersTable 2: Components & VariantsTable 3: Auto-LayoutTable 4: Constraints & Responsive DesignTable 5: Text Properties & TypographyTable 6: Prototyping & InteractionsTable 7: Variables & Design TokensTable 8: Vector Editing & Boolean OperationsTable 9: Styles & LibrariesTable 11: Collaboration & PluginsTable 12: Essential Keyboard Shortcuts
Table 1: Frames & Layers
| Concept | Example | Description |
|---|---|---|
F or A | • Top-level container that defines canvas boundaries • frames can be nested and support auto-layout, constraints, and prototyping | |
Frame within frame | • Child frames contained within parent frames • useful for organizing complex layouts and component structures | |
Click, Shift+click | • Single-click selects layer • Shift+click adds to selection • Cmd/Ctrl+click for deep select nested layers | |
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 • properties like auto-layout and constraints affect parent-child interactions |