Overview
Figma is a cloud-based interface design and prototyping tool that enables real-time collaboration. Teams use Figma to design user interfaces, create interactive prototypes, build design systems, and collaborate with developers through inspection and code generation. Figma runs in the browser and also offers desktop apps for Windows and macOS.
Figma supports vector editing, auto layout, components and variants, design tokens, developer handoff mode, and an extensive plugin ecosystem. Its multiplayer editing, commenting, and branching features make it the industry standard for team-based design workflows.
Installation
# macOS via Homebrew
brew install --cask figma
# Windows via winget
winget install Figma.Figma
# Windows via Chocolatey
choco install figma
Web version at figma.com requires no installation.
Keyboard Shortcuts
| Shortcut | Tool |
|---|
V | Move (selection) |
K | Scale |
R | Rectangle |
O | Ellipse |
L | Line |
P | Pen (vector path) |
T | Text |
F | Frame |
S | Slice |
H | Hand (pan) |
C | Add comment |
I | Color picker |
Editing
| Shortcut | Action |
|---|
Ctrl+D | Duplicate |
Ctrl+G | Group |
Ctrl+Shift+G | Ungroup |
Ctrl+Alt+K | Create component |
Ctrl+Shift+H | Flip horizontal |
Ctrl+Shift+V | Flip vertical |
Alt+drag | Duplicate while moving |
Shift+drag | Constrain movement |
Ctrl+R | Rename selected layer |
Shift+A | Add auto layout |
View
| Shortcut | Action |
|---|
Ctrl+0 | Zoom to 100% |
Ctrl+1 | Zoom to fit |
Ctrl+2 | Zoom to selection |
Ctrl+Shift+3 | Toggle layout grids |
Ctrl+\ | Toggle UI panels |
Ctrl+Shift+E | Export selected |
Core Concepts
Frames
| Frame Preset | Size |
|---|
| iPhone 15 Pro | 393 x 852 |
| iPad Pro 12.9” | 1024 x 1366 |
| Desktop (1440) | 1440 x 900 |
| MacBook Pro 16” | 1728 x 1117 |
| Android Small | 360 x 640 |
| Presentation 16:9 | 1920 x 1080 |
Auto Layout
| Property | Options |
|---|
| Direction | Horizontal, Vertical, Wrap |
| Spacing | Gap between children (px) |
| Padding | Top, Right, Bottom, Left |
| Alignment | 9-point grid |
| Sizing | Hug contents, Fill container, Fixed |
Components
| Concept | Description |
|---|
| Main component | The source definition (purple diamond) |
| Instance | A copy linked to the main component |
| Variant | Alternative states of a component |
| Overrides | Per-instance customizations |
Variables (Design Tokens)
| Mode | Use Case |
|---|
| Color variables | Theme colors (light/dark mode) |
| Number variables | Spacing, radius, sizing |
| String variables | Text content for localization |
| Boolean variables | Show/hide layers |
Prototyping
Interactions
| Trigger | Description |
|---|
| On click | User taps/clicks an element |
| On drag | User drags an element |
| While hovering | Mouse is over an element |
| While pressing | Mouse button is held down |
| After delay | Timer-based trigger |
| Key/Gamepad | Keyboard shortcut trigger |
Transitions
| Animation | Description |
|---|
| Instant | No animation |
| Dissolve | Fade between frames |
| Smart Animate | Animate matching layers |
| Move in/out | Slide from direction |
| Push | Push current frame out |
| Slide in/out | Slide over current frame |
Developer Handoff
Dev Mode
| Feature | Description |
|---|
| Inspect | View dimensions, spacing, colors |
| Code snippets | CSS, iOS (Swift), Android (XML) |
| Assets | Export individual elements |
| Redlines | Automatic measurement guides |
| Variables | View design tokens and values |
Export Settings
| Format | Use Case |
|---|
| PNG | Raster at 1x, 2x, 3x, 4x |
| SVG | Scalable vector graphics |
| JPG | Compressed raster images |
| PDF | Print-ready output |
Plugins and Integrations
Popular Plugins
| Plugin | Purpose |
|---|
| Stark | Accessibility checker |
| Content Reel | Placeholder text and images |
| Iconify | Icon library with 100k+ icons |
| Unsplash | Stock photos |
| Autoflow | Draw user flow arrows |
| Contrast | Color contrast checker |
Integrations
| Tool | Integration |
|---|
| Jira | Link designs to tickets |
| Slack | Share designs and notifications |
| Storybook | Sync components with code |
| GitHub | Connect designs to repos |
| Notion | Embed Figma files |
Troubleshooting
| Issue | Solution |
|---|
| Slow performance | Reduce layer count; simplify complex vectors |
| Fonts missing | Install missing fonts locally or use Google Fonts |
| Auto layout breaking | Check nested frame sizing (hug vs fill) |
| Component overrides lost | Avoid renaming layers in main component |
| Large file size | Remove hidden layers; flatten complex vectors |
| Export blurry | Use 2x or 3x export scale |
| Prototype not working | Verify connections in prototype tab |
| Plugin not loading | Update plugin; check version compatibility |
