Design-to-Dev Handoff
Handoff não é o fim do processo de design, é o início da colaboração para a construção do produto real. Um bom handoff reduz dúvidas, bugs e retrabalho.
O que o Designer deve pensar?
Ao preparar um arquivo para o desenvolvedor, o designer deve categorizar os elementos mentalmente:
1. O que vira Prop?
Atributos simples que mudam o comportamento ou visual básico.
- Exemplo:
label,isDisabled,hasError.
2. O que vira Variant?
Grupos de estilos predefinidos.
- Exemplo:
type="primary" | "secondary",size="sm" | "md" | "lg".
3. O que vira Slot?
Áreas onde o desenvolvedor pode colocar qualquer coisa.
- Exemplo: O corpo de um Modal, o ícone de um botão (se permitirmos qualquer ícone).
4. O que é Token?
Tudo o que for cor, espaçamento, tipografia e sombra.
- Exemplo:
spacing-m,color-brand-primary.
Decisões Corretas vs Incorretas (Exemplos Conceituais)
| Situação | Decisão Incorreta ❌ | Decisão Correta ✅ | Por que? |
|---|---|---|---|
| Ícone no botão | Criar um componente ButtonWithIcon. | Usar um Slot leadingIcon no componente Button. | Evita explosão de componentes e dá flexibilidade de usar qualquer ícone. |
| Cor de erro | Pintar o texto de #FF0000. | Usar o Token colors.text.error. | Se o tom de vermelho mudar na marca, o sistema se adapta. |
| Tamanho de Card | Definir largura fixa de 300px. | Usar Auto Layout (Fill container). | O card deve ser responsivo e se adaptar ao grid da tela. |
| Botão primário | Criar um botão novo com borda azul. | Usar a Variant type="primary". | Mantém a consistência visual e reaproveita o código já testado. |
Checklist de Handoff para o Designer
- [ ] Todos os elementos usam Tokens do sistema?
- [ ] Os estados (Hover, Disabled, etc) estão desenhados ou documentados?
- [ ] A estrutura segue o padrão Leading/Content/Trailing?
- [ ] Existe uma anotação sobre o comportamento em telas menores (Responsividade)?
- [ ] Os nomes das camadas fazem sentido e estão organizados?
Como fazer vs Como não fazer
✅ Como fazer
- Organize uma página no Figma chamada "Handoff" ou "Ready for Dev".
- Deixe comentários no Figma explicando comportamentos complexos (ex: "Este campo só aparece se o usuário for Admin").
- Use a funcionalidade de "Inspect" do Figma para garantir que os valores exportados coincidem com os tokens.
❌ Como não fazer
- Entregar um design com camadas ocultas ou lixo visual.
- Esperar que o desenvolvedor "adivinhe" o que acontece quando um botão é clicado.
- Usar grupos simples em vez de Auto Layout.