DevTools

Cheatsheet Figma

Ferramenta de design de interfaces e prototipagem colaborativa

Voltar às linguagens
Figma
22 cards encontrados
Categorias:
Versões:

Ferramentas


4 cards
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


4 cards
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


3 cards
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


4 cards
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


4 cards
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


3 cards
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.