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
Figma Acesso multiplataforma, melhor colaboração Requer conexão à internet
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 Reel Dados mockados
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