Handoff (entrega pro dev)

O momento em que o desenho vira código: o time de produto entrega ao dev tudo que ele precisa pra construir fiel ao que foi pensado.

Soft

O que é

Handoff é a passagem do desenho pra construção, e ela vai muito além de exportar telas. Envolve entregar medidas, estados, comportamento, arquivos de asset, referência do design system e contexto suficiente pra quem programa decidir bem nos buracos que sempre aparecem no caminho. Por isso o handoff bom começa antes de qualquer arquivo trocar de mãos, quando dev e design já vêm conversando sobre o que é viável.

A qualidade de um handoff se mede justamente no espaço entre o que foi desenhado e o que foi construído. Quando o handoff é fraco, o produto desvia da intenção, o retrabalho fica caro e decisões de design acabam sendo tomadas por ninguém em particular. Quando é forte, o produto chega perto do desenho e o vaivém durante a construção diminui bastante, porque o dev não precisa parar pra adivinhar a cada estado que falta.

A ferramenta mudou muito essa rotina. O modelo antigo, de exportar asset e escrever a spec num documento separado, deu lugar à inspeção direta no arquivo, como o Dev Mode do Figma e o Code Connect. Isso reduz o atrito de medida, mas não resolve a parte mais difícil, que é comunicar a intenção, os estados e o porquê de cada decisão.

Em uma frase

Antes do handoff, vamos documentar todos os estados da tela pra engenharia não ter que adivinhar nada.

A pergunta que ele responde

O que eu preciso entregar pro dev pra ele construir igual ao que desenhei?

Quando usar

Ajuda quando um fluxo de design fica pronto o bastante pra virar código e precisa chegar limpo até a engenharia.

Como não usar

O cuidado é não entregar só o estado default e deixar a acessibilidade de fora, porque cada estado que falta vira uma decisão solta do dev, e o produto acaba saindo inconsistente.

Na prática

Pense em subir uma feature nova. Antes disso, o time monta a tela com todos os estados, vazio, carregando, erro, anota o comportamento de teclado e o ARIA dos componentes custom e marca o que vem do design system. Assim o dev constrói sem precisar adivinhar nada.

Não confunda com

Vale separar handoff de um momento único em que o design acaba e a engenharia começa. Em time integrado ele virou uma troca contínua, com o dev acompanhando o desenho antes mesmo de ele estar fechado, justamente pra evitar surpresa lá na frente.

Em inglês

Handoff

Pronúncia

rénd-óf

Também chamado de

handoff, entrega de design, passagem pro dev

Origem

n/a

Fonte

Saiba mais

Figma, documentação do Dev Mode