Tutorial Figma 2.
0 - Gabriel Silvestri
Tutorial Completo de FIGMA
2.0 - Ferramenta GRÁTIS
para Design de Interfaces
Luciano Campos Felício
[Link]@[Link]
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? [Link]
Luciano Campos Felício
[Link]@[Link]
Tutorial Figma 2.0 - Gabriel Silvestri
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
[Link]@[Link]
END Botão END:
Próximo quadro
HOME Botão HOME:
Quadro anterior
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
[Link]@[Link]
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 é.
Tutorial Figma 2.0 - Gabriel Silvestri
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...
Luciano Campos Felício
[Link]@[Link]
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.
Tutorial Figma 2.0 - Gabriel Silvestri
Design (Sem selecionar nada)
Background: Mudar a cor de fundo do arquivo ou tirar
completamente.
Export (Exportar)
Exportar TUDO que [Link]@[Link]
dentro do arquivo.
Luciano Campos Felício
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.
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
proporcionalmente.
[Link]@[Link]
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.
Tutorial Figma 2.0 - Gabriel Silvestri
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)
Luciano Campos Felício
[Link]@[Link]
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.
Tutorial Figma 2.0 - Gabriel Silvestri
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.
Luciano Campos Felício
[Link]@[Link]
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
[Link]@[Link]
14
15
16
17
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
[Link]@[Link]
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)
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
[Link]@[Link]
É mais fácil segurar CTRL e girar a rodinha
do mouse.
Atalhos úteis:
Ctrl+0 - zoom 100%
Ctrl+1 - ajustar a tela
Tutorial Figma 2.0 - Gabriel Silvestri
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:
Luciano Campos Felício
CTRL+G cria um grupo
[Link]@[Link]
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
Luciano Campos Felício
[Link]@[Link]
10
11
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
H = Altura
[Link]@[Link]
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.
Tutorial Figma 2.0 - Gabriel Silvestri
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
[Link]@[Link]
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.
Tutorial Figma 2.0 - Gabriel Silvestri
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.
Luciano Campos Felício
[Link]@[Link]
Agora é só manipular e
criar o seu gradiente
Tutorial Figma 2.0 - Gabriel Silvestri
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
[Link]@[Link]
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
figma [Link]@[Link]
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
Tutorial Figma 2.0 - Gabriel Silvestri
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.
Luciano Campos Felício
[Link]@[Link]
Tutorial Figma 2.0 - Gabriel Silvestri
E isso é o suficiente para criar
uma interface como essa:
MMT COFFEE
Login Cadastrar
Luciano Campos Felício
[Link]@[Link]
Email
[Link]@[Link]
Senha
*************
Lembrar senha Esqueci minha senha
ENTRAR
ou
Entrar com o facebook
Entrar com o google
Tutorial Figma 2.0 - Gabriel Silvestri
Exercício potencializador
de aprendizado
Faça uma cópia de uma interface!
É fácil e divertido.
Luciano Campos Felício
[Link]@[Link]
Cone do aprendizado
Edgar Dale
Tarefa:
Escolher apenas UMA tela de um app mobile e tirar um prin
Copiar essa interface/projeto (só olhando)
Luciano Campos Felício
[Link]@[Link]
1
2 3
4 5
6 7
8
Tutorial Figma 2.0 - Gabriel Silvestri
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.
Luciano Campos Felício
[Link]@[Link]
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
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
[Link]@[Link]
7. Quanto tempo vai durar
8. Função massa demais, ative e teste
Tutorial Figma 2.0 - Gabriel Silvestri
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
Luciano Campos Felício
[Link]@[Link]
- 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.
Tutorial Figma 2.0 - Gabriel Silvestri
Aba Community
É um repositório onde você poderá
encontrar diversos templates,
efeitos, icones para usar no FIGMA.
Acesse clicando aqui.
Luciano Campos Felício
[Link]@[Link]
Tutorial Figma 2.0 - Gabriel Silvestri
Plugins do figma que eu pessoalmente uso
Colorblind: Simular versões para diversos níveis de daltonismo
[Link]
Constrast: Verificar nível de contraste das cores
[Link]
Isometric: Criar imagens/objetos isométricos
[Link]
Icones
Feather icons:
[Link]
Font awesome:
[Link]
Material Design icons + icons8:
[Link]
Flaticons:
[Link]
Iconify:
[Link]
Figmotion: Criar animaçõesLuciano Campos Felício
na sua interface
[Link]@[Link]
[Link]
Pexels: Imagens bonitonas
[Link]
Unsplash: Mais imagens bonitonas
[Link]
Remove bg: Remover o fundo de imagens com IA
[Link]
Tinyimage Compressor: Diminuir tamanho de imagens:
[Link]
Vectary 3D: Criar mockups 3D com um clique
[Link]
Acessar video