Figma
1. Introdução ao Figma
1.1 O que é o Figma?
O Figma é uma ferramenta de design de interface colaborativa baseada na nuvem que
permite:
Criar designs de UI/UX, protótipos e sistemas de design
Trabalhar em tempo real com equipes distribuídas
Desenvolver sistemas de design consistentes
Integrar-se com fluxos de trabalho de desenvolvimento
1.2 Principais Características
✔ Colaboração em tempo real (como Google Docs para design)
✔ Plataforma cross-platform (funciona no navegador e desktop)
✔ Prototipagem interativa avançada
✔ Sistemas de design com componentes reutilizáveis
✔ Versionamento automático de arquivos
✔ Plugins para extensibilidade
1.3 Figma vs Outras Ferramentas
Ferramenta Vantagens Desvantagens
Sketch Mais maduro para macOS Sem versão Windows
Adobe XD Integração com Creative Cloud Colaboração limitada
Acesso multiplataforma, melhor
Figma Requer conexão à internet
colaboração
2. Configuração Inicial
2.1 Criando sua Conta
1. Acesse [Link]
2. Escolha entre:
o Plano Free (até 3 projetos)
o Plano Professional (US$12/editor/mês)
o Plano Organization (para empresas)
2.2 Interface do Usuário
Áreas principais:
Barra de ferramentas (à esquerda)
Layers (hierarquia de elementos)
Properties (propriedades de design)
Canvas (área de trabalho principal)
2.3 Configurações Recomendadas
Ative Pixel Preview (View > Pixel Preview)
Configure Grids e Layouts para projetos responsivos
Defina Keyboard Shortcuts personalizados
3. Fundamentos do Design no Figma
3.1 Ferramentas Essenciais
Ferraramenta Atalho Função
Frame F Cria containers para telas
Shape tools R/O/E/P Retângulo, círculo, polígonos
Pen tool P Cria vetores personalizados
Text T Adiciona texto
Move V Seleciona e move elementos
3.2 Trabalhando com Layers
Organização: Nomeie e agrupe layers (Ctrl+G)
Hierarquia: Use parent-child relationships
Masks: Ctrl+Alt+M para criar máscaras
3.3 Estilos e Consistência
Crie estilos para:
o Text (fontes, tamanhos)
o Color (paleta de cores)
o Effects (sombras, blurs)
Sistema de design: Componentes master → Instances
4. Componentes e Variants
4.1 Criando Componentes
1. Selecione um elemento
2. Clique em "Create Component" (Ctrl+Alt+K)
3. Use "Place Instance" para reutilizar
4.2 Variants
Permitem múltiplos estados de um componente (hover, active, disabled)
Configure no painel "Variants" na sidebar direita
4.3 Bibliotecas de Design
Publique styles e components como bibliotecas
Compartilhe entre arquivos e equipes
5. Prototipagem Avançada
5.1 Criando Protótipos
1. Mude para tab "Prototype"
2. Conecte frames com interações
3. Defina:
o Trigger (on click, hover)
o Action (navigate, open overlay)
o Animation (smart animate, dissolve)
5.2 Microinterações
Animações entre telas
Transições fluidas com Smart Animate
Overlays e dialogs interativos
5.3 Testes de Usabilidade
Compartilhe protótipos com stakeholders
Colete feedback com comentários
Use Figma Mirror para testar em dispositivos móveis
6. Trabalho Colaborativo
6.1 Realtime Collaboration
Multiplos editores simultâneos
Cursor tracking (vê onde outros estão editando)
Comentários contextualizados
6.2 Version History
Acesse File > Version History
Compare versões diferentes
Restaure versões anteriores
6.3 Design Systems
Master file com componentes centrais
Documentação embutida
Governança de design tokens
7. Integrações e Plugins
7.1 Principais Integrações
Jira: Vincule designs a tickets
Slack: Notificações de atualizações
Google Sheets: Data-driven designs
7.2 Plugins Essenciais
Plugin Função
Unsplash Imagens royalty-free
Content
Dados mockados
Reel
Auto Layout Layouts responsivos
Figmotion Animações avançadas
8. Figma para Desenvolvedores
8.1 Handoff de Design
Inspecione código CSS/Swift/Android
Exporte assets em múltiplos formatos
Meça espaçamentos precisos
8.2 Design Tokens
Exporte cores, tipografia como JSON
Integre com sistemas de design front-end
8.3 Figma API
Automatize fluxos de trabalho
Crie plugins customizados
9. Boas Práticas
9.1 Organização de Arquivos
Nomeie todos os layers
Use páginas para separar fluxos
Mantenha um sistema de versionamento claro
9.2 Performance
Evite frames aninhados profundamente
Limite uso de efeitos complexos
Divida arquivos grandes
9.3 Acessibilidade
Contraste mínimo 4.5:1 para texto
Tags alt para imagens
Sequência lógica de foco
10. Recursos para Aprofundamento
Cursos Oficiais: Figma Academy
Comunidade: Figma Community (templates gratuitos)
YouTube: Flux, DesignCourse
Livros: "Design Systems" - Alla Kholmatova