Cheatsheet Figma
Ferramenta de design de interfaces e prototipagem colaborativa
Figma
22
cards found
Categories:
Versions:
Tools
Main Tools
V # Move / Select
F # Frame
R # Rectangle
O # Ellipse
T # Text
P # Pen
L # Line
Tool shortcuts.
Advanced Shapes
Shift + R # Star
Shift + O # Polygon
Shift + L # Arrow
K # Slice
H # Hand
Other shapes and tools.
Selection
Ctrl + A (select all)
Ctrl + Click (deep select)
Shift + Click (add)
Ctrl + Alt + A (select matching)
Selection techniques.
Measure Distances
Alt + hover # see distances
Alt + drag # duplicate with spacing
Ctrl + / # quick actions
Measurements and quick actions.
Edition
Basic Operations
Ctrl + C / V (copy/paste)
Ctrl + D (duplicate)
Ctrl + X (cut)
Ctrl + Z (undo)
Ctrl + Shift + Z (redo)
Delete (delete)
Fundamental editing.
Group and Arrange
Ctrl + G (group)
Ctrl + Shift + G (ungroup)
Ctrl + ] (bring forward)
Ctrl + [ (send backward)
Ctrl + Alt + ] (bring to front)
Ctrl + Alt + [ (send to back)
Arrange layers.
Alignment
Alt + H (align horizontal)
Alt + V (align vertical)
Ctrl + Alt + T (distribute H)
Ctrl + Alt + Shift + T (distribute V)
Align and distribute objects.
Transform
Ctrl + E (flatten)
Ctrl + Shift + O (outline stroke)
Ctrl + Alt + B (boolean union)
Ctrl + Alt + S (boolean subtract)
Shift + A (auto layout)
Transformation operations.
Navigation
Zoom
Ctrl + = (zoom in)
Ctrl + - (zoom out)
Ctrl + 0 (100%)
Ctrl + 1 (fit to screen)
Ctrl + 2 (zoom to selection)
Shift + 1 (fit all)
Zoom control.
Navigation
Space + drag (pan)
Ctrl + Wheel (zoom)
Wheel (scroll V)
Shift + Wheel (scroll H)
Ctrl + / (quick actions)
Move around the canvas.
Pages and Layers
Ctrl + Alt + P (new page)
Ctrl + Alt + L (toggle layers)
Ctrl + Alt + R (rename layer)
Ctrl + F (search layers)
Manage pages and layers.
Components
Create Component
Ctrl + Alt + K (create component)
Ctrl + Alt + B (create variant)
Drag from the Assets panel
Ctrl + Alt + Shift + K (detach)
Components and variants.
Instances
Drag from the Assets panel
Ctrl + Alt + Shift + K (detach)
Override: edit properties
Main component: edit the original
Use and customize instances.
Auto Layout
Shift + A (add auto layout)
Alt + Shift + A (remove)
Direction: horizontal / vertical
Gap, padding and alignment
Automatic responsive layout.
Variables and Tokens
Variables → create a collection
Modes: Light / Dark
Types: Color, Number, String
Apply to fills, strokes, gaps
Design tokens and themes.
Styles and Layout
Styles
Ctrl + Alt + S (create style)
4 types: Fill, Stroke, Text, Effect
Apply via the right panel
Update: redefine the style
Shared styles.
Constraints
Left / Right / Center
Top / Bottom / Center
Left and Right (stretch)
Scale (proportional)
Responsive behavior.
Grids
Layout Grid → Columns
Count: 12, Margin: 24, Gutter: 16
Type: Stretch / Center / Left
Rows and Grid (8px)
Grid systems.
Export
Ctrl + Shift + E (export)
Formats: PNG, JPG, SVG, PDF
Scale: 1x, 2x, 3x, 4x
Ctrl + Alt + Shift + E (export all)
Export assets.
Prototyping
Interactions
Prototype tab (right panel)
Trigger: On click / On hover
Action: Navigate / Overlay
Animation: Instant / Dissolve / Slide
Create interactions.
Smart Animate
Animation: Smart Animate
Matching layers by name
Easing: Ease in/out, Spring
Duration: 300ms (typical)
Automatic animations.
Present Prototype
Ctrl + Alt + Enter (present)
Share a preview link
Set the starting frame
Scroll behavior and overflow
Test and share the prototype.