Figma Design and Prototyping Cheat Sheet

Updated 2026-03-18

Figma is a collaborative, browser-based design tool built for UI/UX designers, product teams, and developers working on digital products. Unlike traditional desktop applications, Figma operates entirely in the cloud, enabling real-time multiplayer collaboration where teams can design, prototype, comment, and hand off work simultaneously. What sets Figma apart is its comprehensive ecosystem: from vector design and prototyping to design systems, developer handoff (Dev Mode), and even whiteboarding (FigJam)—all within a single platform. The key mental model: everything in Figma is a frame-based, vector-first workflow where components and variables drive scalability, and constraints and auto layout handle responsiveness without writing code.

What This Cheat Sheet Covers

This topic spans 25 focused tables and 233 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Foundational ConceptsTable 2: Shape and Drawing ToolsTable 3: Text and TypographyTable 4: Fills, Strokes, and EffectsTable 5: Components and VariantsTable 6: Auto LayoutTable 7: Constraints (Non-Auto Layout)Table 8: Layout GridsTable 9: Prototyping BasicsTable 10: Prototype AnimationsTable 11: Prototype InteractionsTable 12: Design Systems and LibrariesTable 13: Collaboration FeaturesTable 14: Developer Handoff and Dev ModeTable 15: Export and AssetsTable 16: FigJam (Whiteboarding)Table 17: Plugins and ExtensibilityTable 18: Variables and Design TokensTable 19: Keyboard Shortcuts (Essential)Table 20: Smart Selection and AlignmentTable 21: MaskingTable 22: Blend Modes (Selected)Table 23: Accessibility and Inclusive DesignTable 24: Performance and OptimizationTable 25: AI and Automation Features (2026)

Table 1: Foundational Concepts

Concept	Example	Description
Frame	`Press F → drag canvas` `Select preset: iPhone 15 Pro`	• The core container in Figma • acts as an artboard, device screen, or wrapper for nested elements • supports layout grids, constraints, and clipping.
Component	`Select button → Ctrl+Alt+K` `Create variants for states`	• Reusable design element that maintains consistency across files • instances sync with the main component • critical for scalable design systems.
Auto Layout	`Select frame → Shift+A` `Set spacing: 16, padding: 24`	• Responsive layout behavior where frames automatically resize based on content • handles spacing, padding, and direction (horizontal/vertical/wrap).
Constraints	`Select layer → set: Left & Right` `Element stretches with frame`	• Defines how layers reposition and resize when their parent frame changes • used for responsive designs • works alongside or instead of auto layout.
Variant	`Button → Size: SM/MD/LG` `State: Default/Hover/Pressed`	• Multiple states of a component grouped in a component set • uses properties (like size, state) to organize variations • switcher in instance panel.
Instance	`Drag component from Assets` `Override text or swap variant`	• A copy of a component placed in the canvas • inherits component updates but can be customized with overrides or detached if needed.

Table 1: Foundational Concepts

Concept	Example	Description
Frame	`Press F → drag canvas` `Select preset: iPhone 15 Pro`	• The core container in Figma • acts as an artboard, device screen, or wrapper for nested elements • supports layout grids, constraints, and clipping.
Component	`Select button → Ctrl+Alt+K` `Create variants for states`	• Reusable design element that maintains consistency across files • instances sync with the main component • critical for scalable design systems.
Auto Layout	`Select frame → Shift+A` `Set spacing: 16, padding: 24`	• Responsive layout behavior where frames automatically resize based on content • handles spacing, padding, and direction (horizontal/vertical/wrap).
Constraints	`Select layer → set: Left & Right` `Element stretches with frame`	• Defines how layers reposition and resize when their parent frame changes • used for responsive designs • works alongside or instead of auto layout.
Variant	`Button → Size: SM/MD/LG` `State: Default/Hover/Pressed`	• Multiple states of a component grouped in a component set • uses properties (like size, state) to organize variations • switcher in instance panel.
Instance	`Drag component from Assets` `Override text or swap variant`	• A copy of a component placed in the canvas • inherits component updates but can be customized with overrides or detached if needed.