Tutorial Figma

Tutorial Figma 2.
0 - Gabriel Silvestri
Tutorial Completo de FIGMA

2.0 - Ferramenta GRÁTIS
para Design de Interfaces
Luciano Campos Felício

luciano.c.felicio@gmail.com
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.
Tutorial Figma 2.0 - Gabriel Silvestri
Como criar uma conta? figma.com

Como se movimentar
Barra de espaço + botão direito
ou
Clicar na rodinha do mouse
CTRL CTRL+Rodinha
ZOOM
CTRL+0 Reset
Luciano Campos100%
Felício
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 temluciano.c.felicio@gmail.com

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.
1
2 3
4 5
11 6 7
12
13 Luciano Campos Felício
8 9 10
14
15
16
17
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)
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
1
2
3
4 5

10
11
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.

Felício
Luciano Campos
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.

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. Luciano Campos Felício
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 automaticamenteluciano.c.felicio@gmail.com
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.

E isso é o suficiente para criar

uma interface como essa:
MMT COFFEE
Login Cadastrar

Email
Mr.bean@gmail.com
Senha
*************
Lembrar senha Esqueci minha senha
ENTRAR
ou
Entrar com o facebook
Entrar com o google

Exercício potencializador
de aprendizado
Faça uma cópia de uma interface!

É fácil e divertido.

Cone do aprendizado
Edgar Dale
Tarefa:
Escolher apenas UMA tela de um app mobile e tirar um prin
Copiar essa interface/projeto (só olhando)
1
2 3
4 5
6 7
8
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

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

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çõesLuciano Campos Felício

na sua interface

Pexels: Imagens bonitonas

Unsplash: Mais imagens bonitonas

Remove bg: Remover o fundo de imagens com IA

Tinyimage Compressor: Diminuir tamanho de imagens:

Vectary 3D: Criar mockups 3D com um clique
Acessar video

Tutorial Figma

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial Figma

Enviado por

Direitos autorais:

Formatos disponíveis

Tutorial Figma 2.

Tutorial Completo de FIGMA

Luciano Campos Felício

O que é o FIGMA e pra que serve?

Ferramenta gratuita para criar

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

Como criar uma conta? figma.com

Luciano Campos Felício

Barra de espaço + botão direito

Clicar na rodinha do mouse

END Botão END:

HOME Botão HOME:

Dificilmente você vai usar esses treco.

Ligue as réguas, são uteis.

Se sumir alguma coisa

Menu lateral esquerdo

É onde você vai encontrar a

É onde fica os componentes que

Você pode criar páginas dentro de

Luciano Campos Felício

Menu lateral direito

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

É onde você clicar para visualizar uma interface no modo

Design (Sem selecionar nada)

Background: Mudar a cor de fundo do arquivo ou tirar

Exportar TUDO que temluciano.c.felicio@gmail.com

Luciano Campos Felício

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

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

É onde o programador vai ir pra pegar os

Ferramentas e seus atalhos:

Serve para selecionar e

Serve para aumentar e

Serve para criar quadros no nosso arquivo.

O nosso arquivo (onde estamos) é como se fosse

A ferramenta de Frame consegue criar um

E é dentro desses frames que você cria suas

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

Obs: Vou falar mais sobre tamanhos de tela mais

pro meio da aula.

Serve para criar retangulos. É o que vamos usar pra

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

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

Luciano Campos Felício

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

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

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

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

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

Serve para criar elipses, bolas, bolotas.

Luciano Campos Felício

Serve para criar poligonos kkkk

Esse treco manipula as faces.

Serve para pontos e vetores. Dificilmente você

vai usar isso, só se quiser criar coisas

Serve para criar textos.

Dica: 1 Clique ele cria a box sozinho

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