Tutorial Completo de FIGMA - Ferramenta GRÁTIS para Design de Interfaces
Quer se tornar UX Designer em 3 meses? Eu preparei uma palestra online gratuita te ensinando como:
https://ux.gabrielsilvestri.com.br/aula
Timestamps:
(0:10) Como funciona o Figma
(2:40) Camadas e objetos
(3:10) Páginas
(4:10) Estilos
(6:30) Exportar arquivos e objetos (assets)
(8:30) Compartilhamento de arquivos em tempo real
(9:55) Integrações
(10:10) Ferramenta MOVE (Atalho: V)
(11:20) Ferramenta SCALE (Atalho: K)
(12:35) Ferramenta FRAME (Atalho: F)
(17:00) Constraints
(19:50) Grids (Tamanho ideal de tela + grids ideais)
(21:45) Figma MIRROR (App para iOS e Android)
(22:20) Ferramenta de formas geométricas
(23:45) Movimentação
(24:55) Componentes (Atalho: Ctrl+Alt+K)
(25:55) Máscaras (Atalho: Ctrl+Alt+M)
(26:40) Operações Booleanas
(27:35) Pen Tool (Atalho: P)
(27:45) Ferramenta Texto (Atalho: T)
(28:45) Copiar e colar efeitos e cores
(30:35) Alinhamentos (Tidy Up)
(33:00) Cropar imagens
(33:45) Icones
(35:00) Criando uma interface completa na prática
(41:20) Ver medidas em pixels segurando o ALT
(51:30) Criando um protótipo interativo
---
Neste vídeo você aprenderá TUDO que você precisa saber para começar a criar suas primeiras interfaces utilizando o Figma.
Vou te ensinar do básico ao avançado sobre como utilizar essa ferramenta que é 100% grátis e online :)
Esse vídeo foi feito para qualquer pessoa que deseja aprender sobre essa ferramenta, não é necessário ter conhecimentos pra aplicar os conteúdos desse guia
Nos comentários eu coloquei atalhos para que você possa voltar nesse vídeo e assistir somente as partes que você precisa aprender.
Confuso no inicio do vídeo? Aqui estão atalhos das ferramentas que eu usei (teclas do teclado, só pressionar):
R - Ferramenta de retângulo. Clicar com o botão esquerdo e arrastar pra criar uma forma.
F - Ferramenta de FRAME (é as "folhas de papel" em branco pra você criar interfaces). Mesma coisa do retângulo, só clicar e arrastar.
T - Ferramenta de TEXTO. Você pode usar de duas maneiras, 1) Clicar e arrastar pra criar uma área do texto ou 2) Só dar um clique pra inserir o texto.
V - Ferramenta de seleção. É a ferramenta que você usa para selecionar objetos :)
K - Ferramenta de ESCALA. Use essa ferramenta para aumentar e diminuir o tamanho de qualquer coisa, principalmente para TEXTOS.
H - Ferramenta HAND/PAN. Serve para se movimentar no arquivo.
L - Ferramenta de linha
SHIFT+L - Ferramenta de seta (você precisa ajustar os valores dela no painel da direita)
Outros atalhos úteis:
Segurar alt e movimentar o mouse vai te mostrar as medidas dos objetos no seu arquivo.
CTRL+D vai duplicar o último objeto clonado ou só simplesmente clonar ele em cima dele mesmo.
Segurar barra de espaço habilita o PAN (ferramenta hand) para você se movimentar no arquivo.
Segurar CTRL+Rodinha do mouse vai dar zoom na tela.
CTRL+G serve para agrupar elementos (é útil pra criar botões, etc)
CTRL+SHIFT+G desagrupa o grupo.
CTRL+SHIFT+L bloqueia ou desbloqueia um objeto ou grupo
N - Navega entre frames
SHIFT+R - Habilita réguas no arquivo
CTRL+Y - mostra só outline do projeto
Curtiu o vídeo? Inscreva-se no meu canal e me acompanhe nas redes sociais (links aqui na descrição)
Descubra como se tornar UX/UI Designer através do método UIPB e consiga um emprego com salários de R$ 1.800,00 à R$ 4.500,00 mesmo que você esteja começando do ZERO:
🔶 https://ux.gabrielsilvestri.com.br/cu...
🐱 CONTEÚDOS DIÁRIOS SOBRE DESIGN DE INTERFACES NO MEU INSTAGRAM:
🔶 / silvestri_gabriel
🐱 [EBOOK GRÁTIS]
7 Passos para você se tornar UX/UI Designer e ganhar um salário de R$ 4.500,00 já nos próximos 3 meses:
🔶 https://gabrielsilvestri.com.br/ebook...
🐱 Artigos sobre Design, UX e UI no meu blog:
🔶 https://gabrielsilvestri.com.br
🐱 Me acompanhe por aí:
• Blog » https://gabrielsilvestri.com.br
• Instagram » / silvestri_gabriel
• Canal YT » / gabrielsilvestri
__⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
DesignGrafico #Design #uxui #ux #ui #uiuxdesign #uxdesign #uidesign #designdeinterfaces