Figma Design and Prototyping Cheat Sheet

Updated 2026-05-28

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. As of 2026, Figma has evolved into a full product development platform: alongside its core design tool, the ecosystem now includes Figma Make (AI-driven prototyping), Figma Sites (no-code web publishing), Figma Buzz (campaign asset production), Figma Slides (collaborative presentations), and an AI agent embedded directly on the canvas. The key mental model: everything in Figma is a frame-based, vector-first workflow where components and variables drive scalability, auto layout handles responsiveness, and the MCP server bridges design directly into AI-assisted development environments.

What This Cheat Sheet Covers

This topic spans 26 focused tables and 236 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: Color and StylesTable 10: Prototyping BasicsTable 11: Advanced PrototypingTable 12: Inspect and Developer HandoffTable 13: Code Connect and MCP ServerTable 14: Libraries and Design SystemsTable 15: Variables and Design TokensTable 16: Accessibility and AnnotationsTable 17: Collaboration and SharingTable 18: Organization and File ManagementTable 19: Keyboard ShortcutsTable 20: Plugins and WidgetsTable 21: Figma AI FeaturesTable 22: Figma Make (AI Prototyping)Table 23: Figma SlidesTable 24: Figma SitesTable 25: Figma BuzzTable 26: Performance, Optimization, and Best Practices

Table 1: Foundational Concepts

The core building blocks of every Figma file — frames, components, layers, and canvas — form the mental model that everything else builds on. Getting these right from the start prevents structural rework and makes files legible to collaborators.

Concept	Example	Description
Frame	`Press F → drag canvas` `Select preset: iPhone 15 Pro`	• The core container in Figma • acts as artboard, device screen, or layout wrapper • supports layout grids, constraints, auto layout, and clipping.
Component	`Select button → Ctrl+Alt+K` `Create variants for states`	• Reusable design element that keeps designs consistent; instances sync to the main component • critical foundation of any design system.
Auto Layout	`Select frame → Shift+A` `Set spacing: 16, padding: 24`	• Responsive layout where frames auto-resize based on content • three flows: horizontal, vertical, and grid (CSS Grid-like 2D layout).
Variant	`Button → Size: SM/MD/LG` `State: Default/Hover/Pressed`	• Multiple states of a component grouped in a component set • properties (size, state) organize variations; switched in the instance panel.
Instance	`Drag component from Assets` `Override text or swap variant`	• A copy of a component that inherits updates from its main component • supports overrides and can be detached if needed.
Variables	`Colors, numbers, strings, booleans` `Modes for light/dark themes`	• Reusable stored values applied across design and prototyping • four types: color, number, string, boolean; support modes for theme switching.
Constraints	`Select layer → set: Left & Right` `Element stretches with frame`	• Defines how layers reposition and resize when parent frames change • used for responsive designs in non-auto-layout frames.

Table 1: Foundational Concepts

Concept	Example	Description
Frame	`Press F → drag canvas` `Select preset: iPhone 15 Pro`	• The core container in Figma • acts as artboard, device screen, or layout wrapper • supports layout grids, constraints, auto layout, and clipping.
Component	`Select button → Ctrl+Alt+K` `Create variants for states`	• Reusable design element that keeps designs consistent; instances sync to the main component • critical foundation of any design system.
Auto Layout	`Select frame → Shift+A` `Set spacing: 16, padding: 24`	• Responsive layout where frames auto-resize based on content • three flows: horizontal, vertical, and grid (CSS Grid-like 2D layout).
Variant	`Button → Size: SM/MD/LG` `State: Default/Hover/Pressed`	• Multiple states of a component grouped in a component set • properties (size, state) organize variations; switched in the instance panel.
Instance	`Drag component from Assets` `Override text or swap variant`	• A copy of a component that inherits updates from its main component • supports overrides and can be detached if needed.
Variables	`Colors, numbers, strings, booleans` `Modes for light/dark themes`	• Reusable stored values applied across design and prototyping • four types: color, number, string, boolean; support modes for theme switching.
Constraints	`Select layer → set: Left & Right` `Element stretches with frame`	• Defines how layers reposition and resize when parent frames change • used for responsive designs in non-auto-layout frames.