.
Essencial
Show / Hide UI
Pick color
Quick Actions
Ferramentas
Move tool
Frame tool
Pen tool
Pencil tool
Text tool
Rectangle tool
Elipse tool
Line tool
Arrow tool
Slice tool
Add comment
Eyedrop tool
Visualizar
Show / Hide UI
Multiplayer cursors
Rulers
Outlines
Layout grids
Pixel grid
Open layers panel
Open assets panel
Open design panel
Open prototype panel
Open inspect panel
Zoom e Movimentação
Pan
Zoom in
Zoom out
Zoom to 100%
Zoom to fit
Zoom to selection
Zoom to previous frame
Zoom to next frame
Texto
Bold
Italic
Underline
Create link
Strikethrough
Turn into a list
Text align left
Text align center
Text align right
Text align justified
Adjust font size
Adjust font weight
Adjust letter spacing
Adjust line height
Forma e desenho
Pen
Pencil
Paint bucket
Bend tool
Remove fill
Remove stroke
Swap fill and stroke
Outline stroke
Flatten selection
Join selection
Smooth join selection
Delete and heal selection
Seleção
Select all
Select inverse
Select none
Deep select
Select layer menu
Select children
Select parent
Select next sibling
Select previous sibling
Group selections
Ungroup selection
Frame selection
Show / Hide selection
Lock / Unlock selection
Cursor e Mouse
Measure to selection (while pointing)
Duplicate selection (while moving)
Deep select
Select layer menu
Deep select within rectangle
Resize proportionally (while dragging)
Editar, copiar e colar
Copy
Cut
Paste
Paste over selection
Duplicate
Rename selection
Export
Copy properties
Paste properties
Copy as PNG
Transformar
Flip horizontal
Flip vertical
Use a mask
Edit shape or image
Place image
Crop image
Arranjo e empilhamento
Bring forward
Send backward
Bring to front
Send to back
Align left
Align right
Align top
Align bottom
Align centers
Distribute spacing
Tidy up
Add auto layout
Remove auto layout
Componentes
Show assets
Team library
Create component
Detach intense
Swap component instance
Prototipagem
Fullscreen
Scale view
Restart prototype
Comment
Essencial
Show / Hide UI
Pick color
Quick actions
Ferramentas
Move tool
Frame tool
Pen tool
Pencil tool
Text tool
Rectangle tool
Ellipse tool
Line tool
Arrow tool
Slide cool
Add comment
Visualizar
Show / Hide UI
Multiplayer cursors
Rulers
Outlines
Layout grids
Pixel grid
Open layers panel
Open assets panel
Open design panel
Open prototype panel
Open inspect panel
Zoom e Movimentação
Pan
Zoom in
Zoom out
Zoom to 100%
Zoom to fit
Zoom to selection
Zoom to previous frame
Zoom to next frame
Texto
Bold
Italic
Underline
Create link
Strikethrough
Turn into a list
Text align left
Text align center
Text align right
Text align justified
Adjust font size
Adjust font weight
Adjust letter spacing
Adjust line height
Forma e desenho
Pen tool
Pencil tool
Paint bucket
Bend tool
Remove fill
Remove stroke
Swap fill and stroke
Outline stroke
Flatten selection
Join selection
Smooth join selection
Delete and heal selection
Seleção
Select all
Select inverse
Select none
Deep select
Select layer menu
Select children
Select parent
Select next sibling
Select previous sibling
Group selections
Ungroup selection
Frame selection
Show / Hide selection
Lock / Unlock selection
Cursor e Mouse
Measure to selection (while pointing)
Duplicate selection (while moving)
Deep select
Select layer menu
Resize from center (while dragging)
Resize proportionally (while dragging)
Editar, copiar e colar
Copy
Cut
Paste
Paste over selection
Duplicate
Rename selection
Export
Copy properties
Paste properties
Copy as PNG
Transformar
Flip horizontal
Flip vertical
Use a mask
Edit shape or image
Place image
Crop image
Arranjo e empilhamento
Crop image
Send backward
Bring to front
Send to back
Align left
Align right
Align top
Align bottom
Align centers
Distribute spacing
Tidy up
Add auto layout
Remove auto layout
Componentes
Show assets
Team library
Create component
Detach intense
Swap component instance
Show components menu
Prototipagem
Fullscreen
Scale view
Restart prototype
Comment
Atenção, este guia não funciona por si só… é necessário que você explore cada ferramenta aqui entrando em seu Figma, praticando e testando cada ferramenta.
É na prática que você vai decorar as teclas de atalho e vai criar cada vez mais rápido de melhor.
Toda vez que você ver essa seta para baixo ao lado de um ícone, significa que há mais ferramentas e opções dentro daquela categoria para você escolher.
Ctrl / (no Windows) ⌘ / (no Mac)
O menu de ações rápidas te ajuda a encontrar facilmente comandos, plugins, elementos, ligar e desligar funções no seu documento no Figma.
Ex: Inicie os comandos rápidos e digite “Snap”. Você verá os 3 tipos de ajustes na hora de usar (ou não usar) quando estiver criando.
V
Ferramenta que serve para selecionar, mover, manipular e transformar os objetos e elementos no seu palco de criação.
K
Ferramenta que serve para aumentar ou diminuir os objetos de forma proporcional (largura e altura igualmente na proporção).
F
Ferramenta que serve criar os seus quadros / pranchetas onde ficarão os seus layouts. Não há limite de quantos quadros / pranchetas você pode criar no seu documento de Figma.
Dica: Cuidado pra não deixar nada de fora das pranchetas. Se for exportar um quadro e tiver algum elemento fora dele, este elemento não vai aparecer no seu arquivo exportado. No exemplo acima parece que o grupo MED MKT FINAL está na Prancheta mas se olharmos as camadas, ele não está dentro do Quadro.
S
Ferramenta que serve para fatiar os layouts e exportar as fatias em separado. Muito usado para os carrosséis e para o web design onde precisamos das imagens e ícones em arquivos separados.
R
Ferramenta que serve para criar formas quadradas e retangulares.
L
Ferramenta que serve para criar linhas retas.
Shift L
Ferramenta que serve para criar setas retas.
O
Ferramenta que serve para criar formas circulares e ovais.
Sem tecla de atalho
Ferramenta que serve para criar formas poligonais começando pelo Triângulo. Quando criado, na barra lateral direita de propriedades você consegue aumentar o número de lados que seu polígono terá:
Sem tecla de atalho
Ferramenta que serve para criar formas pontiagudas como estrelas e outros polígonos que têm pontas. Você consegue aumentar o número de pontas da mesma forma que a ferramenta forma de polígono.
Shift Ctrl K (no Windows) Shift Command K (no Mac)
Ferramenta que serve para adicionar imagens do computador no Quadro / Prancheta.
P
Ferramenta que serve para desenhar vetores com cliques do mouse. Desenhe formas abertas e fechadas e também use-a para adicionar e remover pontos/nós vetoriais.
Para adicionar pontos, basta escolher a caneta, ir no segmento que quer adicionar o ponto e clicar com a caneta. Você verá um “mais” (+) na caneta assim:
Dica: ao clicar para adicionar pontos a caneta entenderá que você ainda quer continuar a desenhar. Se quiser interromper o desenho, basta apertar a tecla ESC do seu teclado.
Para excluir pontos, NÃO é o botão delete que você aperta. Com a ferramenta caneta selecionada, segure o Alt (no Windows) Option (no Mac) e clique no ponto que quer remover. A caneta ficará com um sinal de menos (-) assim:
Shift P
Ferramenta que serve para desenhar livremente na sua prancheta.
T
Ferramenta que serve para criar textos no seu Layout.
Dica: Use a ferramenta Escala (K) para aumentar e diminuir o texto. Se tentar com a ferramenta de seleção (V) você só vai conseguir manipular a caixa de texto, não o tamanho dele.
Barra de espaço
Pressione essa ferramenta para movimentar a sua visualização entre as pranchetas e o layout.
Dica: Esqueça as a barra lateral e inferior de movimentação. Ganhe 10x mais tempo treinando a ferramenta mão para movimentar o que o seu olho verá com mais facilidade. Use ainda as teclas + e – para dar mais e menos zoom. Acostume-se 🙂
C
Ferramenta que serve para deixar comentários no seu layout. Geralmente usado quando você quer deixar alguma nota de alteração, ideia ou para outras pessoas que acessam o seu arquivo poderem fazer o mesmo.
COMBO LIVRO + IMPULSO DESIGN
IMPULSO DESIGN