Cheatsheet Figma
Ferramenta de design de interfaces e prototipagem colaborativa
Figma
22
cards encontrados
Categorias:
Versões:
Ferramentas
Ferramentas principais
V # Move / Selecionar
F # Frame
R # Retângulo
O # Elipse
T # Texto
P # Pen (caneta)
L # Linha
Atalhos de ferramentas.
Formas avançadas
Shift + R # Star (estrela)
Shift + O # Polygon
Shift + L # Arrow (seta)
K # Slice
H # Hand (mão)
Outras formas e ferramentas.
Seleção
Ctrl + A (selecionar tudo)
Ctrl + Clique (seleção profunda)
Shift + Clique (adicionar)
Ctrl + Alt + A (selecionar iguais)
Técnicas de seleção.
Medir distâncias
Alt + hover # ver distâncias
Alt + arrastar # duplicar com medida
Ctrl + / # quick actions
Medições e ações rápidas.
Edição
Operações básicas
Ctrl + C / V (copiar/colar)
Ctrl + D (duplicar)
Ctrl + X (cortar)
Ctrl + Z (desfazer)
Ctrl + Shift + Z (refazer)
Delete (apagar)
Edição fundamental.
Agrupar e organizar
Ctrl + G (agrupar)
Ctrl + Shift + G (desagrupar)
Ctrl + ] (trazer à frente)
Ctrl + [ (enviar atrás)
Ctrl + Alt + ] (frente total)
Ctrl + Alt + [ (trás total)
Organizar camadas.
Alinhamento
Alt + H (alinhar horizontal)
Alt + V (alinhar vertical)
Ctrl + Alt + T (distribuir H)
Ctrl + Alt + Shift + T (distribuir V)
Alinhar e distribuir objetos.
Transformar
Ctrl + E (flatten)
Ctrl + Shift + O (outline stroke)
Ctrl + Alt + B (boolean union)
Ctrl + Alt + S (boolean subtract)
Shift + A (auto layout)
Operações de transformação.
Navegação
Zoom
Ctrl + = (zoom in)
Ctrl + - (zoom out)
Ctrl + 0 (100%)
Ctrl + 1 (fit to screen)
Ctrl + 2 (zoom to selection)
Shift + 1 (fit all)
Controlo de zoom.
Navegação
Espaço + arrastar (pan)
Ctrl + Roda (zoom)
Roda (scroll V)
Shift + Roda (scroll H)
Ctrl + / (quick actions)
Mover pelo canvas.
Páginas e layers
Ctrl + Alt + P (nova página)
Ctrl + Alt + L (toggle layers)
Ctrl + Alt + R (rename layer)
Ctrl + F (pesquisar layers)
Gerir páginas e camadas.
Componentes
Criar componente
Ctrl + Alt + K (criar componente)
Ctrl + Alt + B (criar variante)
Arrastar do painel Assets
Ctrl + Alt + Shift + K (detach)
Componentes e variantes.
Instâncias
Arrastar do painel Assets
Ctrl + Alt + Shift + K (detach)
Override: editar propriedades
Main component: editar original
Usar e personalizar instâncias.
Auto Layout
Shift + A (adicionar auto layout)
Alt + Shift + A (remover)
Direção: horizontal / vertical
Gap, padding e alinhamento
Layout responsivo automático.
Variáveis e tokens
Variables → criar coleção
Modos: Light / Dark
Tipos: Color, Number, String
Aplicar a fills, strokes, gaps
Design tokens e temas.
Estilos e Layout
Estilos
Ctrl + Alt + S (criar estilo)
4 tipos: Fill, Stroke, Text, Effect
Aplicar via painel direito
Atualizar: redefinir estilo
Estilos partilhados.
Constraints
Left / Right / Center
Top / Bottom / Center
Left and Right (stretch)
Scale (proporcional)
Comportamento responsivo.
Grids
Layout Grid → Columns
Count: 12, Margin: 24, Gutter: 16
Type: Stretch / Center / Left
Rows e Grid (8px)
Sistemas de grelha.
Exportar
Ctrl + Shift + E (exportar)
Formatos: PNG, JPG, SVG, PDF
Scale: 1x, 2x, 3x, 4x
Ctrl + Alt + Shift + E (export all)
Exportar assets.
Prototipagem
Interações
Prototype tab (painel direito)
Trigger: On click / On hover
Action: Navigate / Overlay
Animation: Instant / Dissolve / Slide
Criar interações.
Smart Animate
Animation: Smart Animate
Matching layers por nome
Easing: Ease in/out, Spring
Duration: 300ms (típico)
Animações automáticas.
Apresentar protótipo
Ctrl + Alt + Enter (apresentar)
Partilhar link de preview
Definir frame inicial
Scroll behavior e overflow
Testar e partilhar protótipo.