Figma
Todo o trabalho de design acontece no Figma. Mantemos uma única fonte da verdade com páginas organizadas: Componentes, Padrões, Fluxos e Arquivo. Os desenvolvedores têm acesso de visualização a todos os arquivos.
Nossa biblioteca Figma inclui todos os componentes de produção com variantes, auto-layout e restrições responsivas. Os componentes correspondem 1:1 com nossa biblioteca de componentes React.
Processo de Design
Como abordamos uma nova funcionalidade ou página:
- Entender: Que problema estamos resolvendo? Para quem é? Como é o sucesso?
- Explorar: Esboce múltiplas abordagens. Não se comprometa com a primeira ideia. Mostre opções.
- Refinar: Escolha uma direção e polir. Considere todos os estados e casos extremos.
- Revisar: Obtenha feedback de design e engenharia. Itere com base na contribuição.
- Lançar: Trabalhe com a engenharia na implementação. Faça QA no resultado final.
Revisão de Design
Mudanças significativas de design são revisadas antes da implementação:
- Compartilhe o problema que está resolvendo, não apenas a solução
- Mostre o contexto — como isso se encaixa na experiência maior?
- Inclua casos extremos: estados de carregamento, vazio, erro
- Obtenha feedback cedo quando as mudanças são baratas
Handoff Design-Dev
Não jogamos designs por cima do muro. Designers e desenvolvedores trabalham juntos desde o início. O handoff inclui:
- Link do Figma com modo de inspeção ativado
- Especificações de interação para animações
- Notas sobre comportamento responsivo
- Requisitos de acessibilidade
- Copy e microcopy finalizados
- Exportações de assets se necessário
Garantia de Qualidade
O QA de design acontece antes e depois do lançamento:
- Revisar funcionalidades implementadas em relação aos designs
- Testar comportamento responsivo em dispositivos reais
- Verificar se animações e transições parecem corretas
- Verificar acessibilidade com leitores de tela
- Documentar quaisquer desvios intencionais