Handoff

Você já ouviu falar em Handoff? Se não, hoje vamos desvendar essa etapa que pode fazer diferença no seu trabalho! Logo abaixo você vai aprender sobre o que ele é, como fazer e qual a importância dele num projeto! Pronto(a) para começar? Vamos lá!

O que é?

O Handoff é a fase em que a equipe de design, repassa o trabalho para a equipe de desenvolvimento. É um processo não só de passagem de bastão, mas de muita colaboração e comunicação. Para que assim, as ideias estruturadas pelos designers não sejam perdidas e os desenvolvedores possam entender elas mais rápido.

Por que fazer?

O Handoff é uma etapa essencial para garantir que o projeto seja entregue de forma clara e eficaz, evitando atrasos e problemas de comunicação entre o designer e o desenvolvedor. Nela, os designers devem criar um arquivo com todas as especificações, imagens e informações necessárias. Para que dessa forma, os desenvolvedores possam criar ou aplicar as mudanças no produto.

Como fazer?

As características de um Handoff podem mudar de empresa para empresa, de acordo com as ferramentas que são usadas pela equipe. Porém, na maioria das vezes, esse entregável é feito através do Figma, por isso preparamos um passo a passo para te ajudar!

1. Padronize o nome dos arquivosO processo do handoff começa desde organizações simples como a nomeação de um arquivo, isso é importante para que futuramente as pessoas consigam encontrar o documento facilmente. Você pode utilizar alguns padrões como:

Protótipo — Nome da funcionalidade ou iniciativa

Ex: Protótipo — Onboarding

2. Crie páginas no arquivo do FigmaPara facilitar a visualização do conteúdo, uma dica muito legal é separar as informações em páginas. Assim, os outros profissionais conseguem encontrar o que precisam de uma forma mais rápida.

3. Crie uma capa para o arquivoA capa é um recurso visual usado para ajudar os usuários a encontrarem o arquivo de forma mais rápida. Além de deixar o ambiente mais organizado e profissional.

Para incluir uma capa no seu arquivo, você só precisa clicar com o botão direito do mouse e selecionar “Set as thumbanail”.

4. Faça uma introdução sobre o projetoLembre-se que Handoff é um arquivo que pode ser acessado por várias pessoas da sua empresa, não só os designers e os desenvolvedores. Por isso, é importante que nós possamos apresentar contextos, descobertas e análises relevantes do projeto.

5. Fluxo de navegaçãoUma boa prática é deixar bem claro o fluxo de navegação. Para que assim, a equipe de desenvolvimento saiba quais elementos da tela geram ações e também quais são as telas, que os usuários serão direcionados ao interagir com a solução.

6. Protótipo interativoVocê pode também separar uma página para organizar os protótipos interativos e desse jeito, organizar os fluxos para o teste de usabilidade.

7. Entregável para os desenvolvedoresNessa página é importante que você coloque toda as especificações do protótipo, como:

• Tamanho das imagens
• Ícones
• Tipografias
• Cores
• Espaçamentos
• Grid

8. Componentes locaisEm componentes locais você pode acrescentar todos componentes feitos para o protótipo. Para quem ainda não sabe o que é componente, calma que vamos te explicar! Componentes são elementos padronizados que podem ser reutilizados no seu design. Assim você pode definir um padrão e replicar em outros itens de uma forma muito mais rápida.

9. Revisão de qualidadeÉ bom lembrar que o trabalho do designer não termina depois da criação do Handoff, é necessário também acompanharmos o desenvolvimento da solução. Nessa página, você pode mostrar os elementos que não estão de acordo com o protótipo, para que os desenvolvedores possam corrigir.

10. RascunhoNessa página, você pode colocar os itens que foram despriorizados ou que deram errado durante a sprint. Dessa forma, você não vai perder um trabalho já feito e que pode utilizar como banco de dados para gerar insights para projetos futuros.

Ferramentas para Handoff

Plugins

Pega um papel e caneta, porque chegou a hora dos plugins! Separamos algumas ferramentas para te ajudar durante o Handoff.

Outline

Este plugin nos ajuda a sinalizar os espaçamentos, bordas e margens para o handoff.

Color style guide

O Color Style Guide é uma dica para mostrar as características das cores usadas no projeto.

Typography style guide

Esse plugin é perfeito para mostrar os detalhes da tipografia escolhida.

Dev mode

Agora por último, mas não menos importante. Temos o Dev mode, uma das mais novas funcionalidades do Figma. O Dev Mode é um interface voltada para os desenvolvedores, com elementos que eles já estão familiarizados. Nessa configuração os desenvolvedores conseguem ver o código dos elementos e integrar o Figma com ferramentas que eles utilizam no dia a dia, como o Jira e GitHub

Separamos um tutorial para que você possa aprender a usar: Dev Mode Figma — O novo jeito de exportar o Design (abre em nova aba)

Pronta para preparar seu Handoff? Esperamos que com essas informações você se sinta mais confiante para fazer seus entregáveis de Design!

Artigos

• Design handoff: a importância da boa organização nas entregas (abre em nova aba)
• Design Handoff: Como fazer de forma bem sucedida (abre em nova aba)
• Como o UI Designer pode facilitar a vida do desenvolvedor frontend (abre em nova aba)