Tutorial Completo de FIGMA

Ferramenta GRÁTIS para

Design de Interfaces

O que é o FIGMA e pra que serve?

Ferramenta gratuita para criar

interfaces e protótipos interativos.

Só faz a parte visual. Pro negócio funcionar

um programar precisar codificar a interface.
Como se movimentar

Barra de espaço + botão direito

ou

Clicar na rodinha do mouse

CTRL CTRL+Rodinha

ZOOM

CTRL+0 Reset 100%

END Botão END:

Próximo quadro

HOME Botão HOME:

Quadro anterior
 Entendendo os menus e
botões do figma
Menu superior:
Operações básicas, configurações, etc.

Dificilmente você vai usar esses treco.

Shift+R

Ligue as réguas, são uteis.

Se sumir alguma coisa

é só mexer aqui

Menu central:

Histórico
Exportar TUDO no
arqruivo
Duplicar

Renomear

Deletar
Isso ai aparece quando você clica em Mover pra dentro de
um objeto.

um projeto
Vamos ver mais pra frente o que é.
 Menu lateral esquerdo
1 2 3 1 - Camadas (Layers)

É onde você vai encontrar a

hierarquia de todos objetos
criados.

2 - Recursos (Assets)

É onde fica os componentes que

você criou. Vou explicar melhor
como fazer depois.

3- Páginas (Pages)

Você pode criar páginas dentro de

um arquivo, cada página vem sem
nada. Dá pra dividir entre...

Wireframe

Referências

Protótipo, etc...

Menu lateral direito

Botão share:

Você pode compartilhar o seu arquivo para várias pessoas

visualizar. Porém somente UMA pode editar na versão free e é
necessário mover para um projeto.

Botão PLAY:

É onde você clicar para visualizar uma interface no modo

protótipo. Vamos ver sobre isso daqui a pouco.
Design (Sem selecionar nada)

Background: Mudar a cor de fundo do arquivo ou tirar

completamente.

Export (Exportar)

Exportar TUDO que tem dentro do arquivo.

Obs: 1x, 2x, significa multiplicação do tamanho do arquivo.

Um arquivo de 1000x1000 em @2x ficaria 2000x2000

Aba Inspect

É onde o programador vai ir pra pegar os

código maluco dele.
Ferramentas e seus atalhos:
Atalho entre parenteses.

Move - (V)

Ferramenta de seleção.

Serve para selecionar e

manipular obetos.

Scale - (K)

Escala.

Serve para aumentar e

diminuir objetos

proporcionalmente.

Frame - (F)

Quadros/Artboards.

Serve para criar quadros no nosso arquivo.

O nosso arquivo (onde estamos) é como se fosse

uma mesa de madeira.

A ferramenta de Frame consegue criar um

número quase infinito de “papéis” nessa mesa,
do tamanho e formato retangular que você

quiser.

E é dentro desses frames que você cria suas

interfaces, artes, layouts blablabla.

Dica: Cuidado pra não deixar nada de fora dos

frames, vai dar merda.

Obs: Vou falar mais sobre tamanhos de tela mais

pro meio da aula.

 OBJETOS:

Rectangle - (R)

Retângulos

Serve para criar retangulos. É o que vamos usar pra

criar qualquer forma e botões.

Dica: Clicando em um objeto e pressionando as setas do teclado

você movimenta 1 pixel por vez.

Ao segurar shift você movimenta 10 pixels.

Esses treco servem para arredondar as pontas:

Dica: Segurar ALT e movimentar o objeto com o botão esquerdo

duplicará um objeto (não pode soltar o alt)

Dica: Pressionando CTRL+D você segue duplicando usando o

mesmo espaçamento definido na primeira cópia

Dica: Pressionando alt e passando o mouse por cima dos objetos

você consegue ver as medidas deles.

Selecionando várias coisas, ele vai medir o grupo como um todo de

acordo com o que você passar o mouse.

Dica: Use o Tidy up! Basta selecionar todos objetos e clicar no

botãozinho azul do canto.

Line - (L)

Linhas

Serve para criar linhas.

Dica: se você segurar SHIFT você mantém a proporção e
cria uma linha reta.

Dica2: se você apertar SHIFT+L você seleciona a

ferramenta de FLECHA

Elipse - (O)

Circulos

Serve para criar elipses, bolas, bolotas.

Poligono

Poligonos

Serve para criar poligonos kkkk

Esse treco manipula as faces.

PenTool (P)

Ferramenta pena

Serve para pontos e vetores. Dificilmente você

vai usar isso, só se quiser criar coisas
específicas ou icones.
Text (T)

Ferramenta texto

Serve para criar textos.

Dica: 1 Clique ele cria a box sozinho

Dica2: Clicar com o esquerdo e arrastar cria uma área

delimitad

Fontes do Google (Pra pegar fontes que você tem

instalado precisa instalar a versão desktop do PC e

baixar o font helper

Estilo da fonte bold itálico, et

Tamanho em pixel

Altura da linh

Distanciamento entre letra

Altura entre cada parágraf

Modificadores de tamanho da box, auto lateral, auto

altura ou fixo (por padrão sempre vem fixo

Alinhamento do text

Alinhamento do parágrafo inteir

Configurações avançada

Alinahmento do texto (mesma coisa

Decorações: nenhuma, underlike, strik

Identação do parágrafo (espaço que vem antes da

frease começar, aquele que sua professora da 2nd

série te incomodava quando você esquecia

Estilo de listagem, pontos ou numera

Modificadores do tipo da fonte, tudo caps, tudo

minisculas, primeira letra de cada palavra maiuscula,

smallcaps (só disponível em algumas fontes

Estilo dos números (só em algumas fontes

Posição do texto superior ou inferior (pra fazer

aquelas formula maluca)

 1

2 3
4 5
11 6 7
12
13 8 9 10
14

15

16

17
Pan (H)

Ferramenta PAN/Hand

Serve para se movimentar no arquivo.

É mais fácil segurar espaço e clicar e arrastar

com o botão esquerda.

Zoom (Z)

Ferramenta Zoom

Serve para aumentar e diminuir o zoom

É mais fácil segurar CTRL e girar a rodinha

do mouse.

Atalhos úteis:

Ctrl+0 - zoom 100%

Ctrl+1 - ajustar a tela

 Modificando e
manipulando objetos

Organizando e alinhando objetos dentro de um frame:

Você pode criar grupos com vários objetos para organizá-

los com eficiência.

Selecione vários objetos e pressione:

CTRL+G cria um grupo

CTRL+SHIFT+G desfaz o grupo

CTRL+SHIFT+L você BLOQUEIA um objeto assim não

permitindo que ele seja modificado/movido

Painel da direita (ao selecionar um objeto

Alinhamento
Serve para alinhar o objeto de acordo com o frame.
Precisa estar dentro do frame pra funcionar direito.

2- Coordenadas do objeto selecionado

3. Tamanho do objeto (em pixels)

W = Largura

H = Altura

4. Angulo do objeto

5. Arredondamento das pontas. Clicando no quadradinho ao

lado é possível manipular cada ponta do objeto e suavizar
bordas.

6. É como se fossem IMÃS que vão prender o objeto no frame

Fix position, mostra só no play é pra deixar fixo um objeto.

7. Modificadores de camada, dificilmente você vai usar isso.

8. Preenchimento do objeto. É aqui que adiciona cores.

Para UI Design recomendo usar o modelo HSB de cores

H = Matiz

S = Saturação

B = Brightness

Manipulando esses 3 valores você consegue criar boas cores.

9. É a mesma coisa, só que o contorno.

10. Efeitos, sombra projetada, etc.

Dica: É possível copiar e colar efeitos no figma! Basta selecionar o

efeito, apertar CTRL+C e depois ir em outro objeto e apertar
CTRL+V

11. Exportar o objeto selecionado.

1

2
3

4 5

10

11
Criando gradiente

Selecione um objeto, clique em cima da cor dele no

preenchimento e essa janela ao lado abrirá

Clique no menu suspenso onde diz “Solid” e troque para o

tipo de gradiente.

Agora é só manipular e
criar o seu gradiente
Criando estilos de cores, tipografias, etc.

Nas opções de texto, cores e efeitos você encontrará o simbolo

de Estilos. É possível PADRONIZAR e salvar um estilo para
reaproveitar.

Basta criar sua cor ou tipografia, clicar no icone e salvar clicando

no botão +.

Depois para reaproveitar é só clicar no mesmo icone e escolher a

sua cor salva.
 Trabalhando com imagens

Como inserir uma imagem

Basta arrastar pra dentro do arquivo ou usar a

ferramenta place image (CTRL+SHIFT+K)

Redimensionar

Ao selecionar uma imagem e redimensionar ela, o

figma automaticamente realizará um corte

inteligente.

PS: Para colocar uma imagem no figma basta arrastar

ela pra dentro do arquivo.

Você também pode cortar a imagem segurando CTRL

ao manipular o tamanho dela

Como criar uma máscara

(Inserir imagem dentro de uma forma)

1. Criar um objeto do qual você deseja colocar a imagem dentro

2. Enviar o objeto pra trás da imagem

3. Apertar ctrl+alt+M ou no botão lá em cima

4. Não é permanente, você pode ajustar selecionando nas camadas.

 Criando protótipos interativos
Aba Prototype

Serve para criar protótipos interativos. Como se o

app/tela tivesse ganho vida e seja funcional!

Device:

Aqui você escolhe qual celular/desk será simulado.

Background:

Cor de fundo que vai aparecer quando der play

Criando um fluxo

Para criar um fluxo você vai precisar de pelo menos 2 frames.

Clicando e arrastando na bolinha você vai definir pra ONDE o

usuário será levado ao executar uma interação

O tipo de interação que será realizad

On tap: Ao clica
While hovering: Ao passar por cim
While pressing: Enquanto estiver pressiona
Key/gamepad: Apertar botão específico no teclad
Mouse enter: Mouse passar por cim
Mouse leave: Mouse sair de algum luga
Touch down: Tocar na parte inferio
Touch up: Tocar na parte superio
After delay: Depois de um X tempo
2- Pra onde vai levar o usuário

a. Navigate to: Mandar para uma tela especifica

b. Open overlay: Abrir um overlay (imagem/objeto sobreposto)

c. Scroll to: Scrollar para um ponto especifico

d. Swap Overlay: Trocar overlay

e. Back: Voltar para tela anterior

f. Close Overlay: Fechar overlay

g. Open Link: Abrir um link da web

3. Frames que estão no seu arquivo

4. Tipo de animação (teste e veja)

5. Pra onde vai puxar a animação

6. Tipo do efeito da animação

7. Quanto tempo vai durar

8. Função massa demais, ative e teste

1
2 3

4 5
6 7
8
BÔNUS:

Criando botões inteligentes com Auto Layout

É uma propriedade para criar componentes dinâmicos, deixar eu

te mostrar na prática como funciona e por que isso é tão bom.

Botão feito da maneira tradicional:

Oi

Nesse modelo tem algumas limitações, se você tentar aumentar

ele vai ser mais chatinho, no auto layout é muito mais fácil.

Passo-a-passo Auto Layout:

- 01 - aperte T e escreva o texto do seu 1 Saiba mais

botão: saiba mais

- 02 - selecione o texto e aperte SHIFT+A

para automaticamente criar um frame com 2 Saiba mais
esse texto

- 03 - agora adicione um preenchimento

nele, pronto!

3 Saiba mais

- 04 - agora você tem um botão dinâmico,

quando você trocar o texto ele
automaticamente vai ajustar o tamanho

4 Saiba mais

- 05 - transformar em componente
CTRL+ALT+K. Agora você pode inserir uma Saiba muito mais
instância desse botão acessando o menu 5
ASSETS aqui no menu da esquerda.

A vantagem? Se você mudar o tamanho

do MASTER (O que você acabou de criar)
você muda o tamanho de todas instâncias,
mesma coisa com texto, cores, etc.
Aba Community

É um repositório onde você poderá

encontrar diversos templates,
efeitos, icones para usar no FIGMA.
Acesse clicando aqui.
Plugins do figma que eu pessoalmente uso

Colorblind: Simular versões para diversos níveis de daltonismo

https://www.figma.com/community/plugin/733343906244951586

Constrast: Verificar nível de contraste das cores

https://www.figma.com/community/plugin/748533339900865323

Isometric: Criar imagens/objetos isométricos

https://www.figma.com/community/plugin/741184519069077841/Isometric

Icones

Feather icons:

https://www.figma.com/community/plugin/744047966581015514/Feather-Icons

Font awesome:

https://www.figma.com/community/plugin/774202616885508874/Font-Awesome-Icons

Material Design icons + icons8:

https://www.figma.com/community/plugin/740272380439725040/Material-Design-Icons

Flaticons:

https://www.figma.com/community/plugin/785492935463158906/Flaticons

Iconify:

https://www.figma.com/community/plugin/735098390272716381/Iconify

Figmotion: Criar animações na sua interface

https://www.figma.com/community/plugin/733025261168520714

Pexels: Imagens bonitonas

https://www.figma.com/community/plugin/829802086526281657

Unsplash: Mais imagens bonitonas

https://www.figma.com/community/plugin/738454987945972471

Remove bg: Remover o fundo de imagens com IA

https://www.figma.com/community/plugin/738992712906748191

Tinyimage Compressor: Diminuir tamanho de imagens:

https://www.figma.com/community/plugin/789009980664807964

Vectary 3D: Criar mockups 3D com um clique

https://www.figma.com/community/plugin/769588393361258724

Acessar video