Design Handoff: Parte 2
Exemplo de Aplicação do Design Handoff
Na Parte 1 deste tutorial para Design Handoff, você já conheceu o que é o Design Handoff e quando aplicar, além dos elementos utilizados e como adicioná-los à biblioteca de componentes do seu projeto. Agora, trago abaixo alguns exemplos esquemáticos para te ajudar a entender como aplicar cada um dos componentes mencionados anteriormente.
Lembrando que: os elementos usados neste Design Handoff já estão padronizados e em forma de componentes e podem ser acessados neste arquivo do Figma
1. Board (ou Quadro) de um Fluxo
O fluxo sobre o qual será realizado o Design Handoff deve ser enquadrado em um board (retângulo com cor de fundo neutra), contendo o nome do fluxo em seu cabeçalho, a fim de facilitar a identificação de qual feature ou etapa da jornada aquele fluxo representa.
2. Link para Styleguide
Com o intuito de facilitar o acesso dos programadores aos diferentes componentes do projeto, adiciona-se, no início de cada fluxo, a caixa de link redirecionando ao styleguide.
Outra opção é, além de adicionar o link para o styleguide, copiar todos os componentes do styleguide e colar em uma nova página do arquivo Figma.
DICA: NÃO FAÇA alterações nos componentes colados no arquivo. Os componentes copiados e colados existem apenas para facilitar o acesso dos programadores, disponibilizando o styleguide no mesmo arquivo do fluxo. Contudo, esses componentes dispostos no arquivo do fluxo não são os componentes principais e as alterações realizadas neles não irão atualizar automaticamente nos elementos adaptados. Lembrando: alterações devem, sempre, serem realizadas nos componentes principais (main components).
3. Título da Tela
Acima de cada tela do fluxo, traga a caixa de título, contextualizando ao que a tela se refere e em qual cenário ou qual etapa da jornada o usuário tem acesso a ela.
4. Comentários
Os comentários devem ser trazidos abaixo de cada tela e detalhar comportamentos dos elementos na tela, informações relevantes ou cenários existentes naquela etapa.
5. Fluxo Principal
O fluxo principal é representado pelas setas de linha sólida. Para isso, deve-se conectar o elemento responsável pela ação à próxima tela do fluxo.
6. Fluxo Secundário
O fluxo secundário é representado pelas setas de linha tracejada. Ele se refere à detalhamentos como: o comportamento de um input ao ser preenchido, possíveis erros de preenchimento, entre outros. Assim como no fluxo principal, você conecta o elemento que gera a ação à tela que exemplifica seu possível estado (preenchimento, preenchido, erro, etc).
Atenção: Nesse caso, as telas do fluxo secundário são válidas para demonstrar qual tipo de teclado (numérico, alfabético ou ambos) se habilitaria ao clicar no input. No caso de comportamento de componentes, isto deve ser representado no styleguide do projeto.
7. Botões de Interação
Os botões de interação são utilizados no handoff para demonstrar qual interação realizada pelo usuário exibe determinada informação. Eles são posicionados acima da linha da seta que direciona à informação exibida.
8. Cenários de Erro
Caso uma ação apresente mais de uma condição de erro, estas devem ser descritas nas caixas de comentário abaixo da tela de erro, trazendo as alternativas de mensagens possíveis para os diferentes cenários de erro.
9. Tela com Diversas Ações e Fluxos Possíveis
Em caso de muitas possibilidades de ação numa mesma tela existem três possibilidades:
- Se o novo fluxo já estiver desenhado e for ser desenvolvido na sprint, você deve ligar o elemento que inicia o fluxo ao board onde este está desenhado, na mesma página.
- Se o fluxo já estiver desenhado, mas foi desenvolvido anteriormente, você deve ligar o elemento à caixa de link, redirecionando para a página ou o arquivo que contém o fluxo deste.
- Se o fluxo se trata de uma feature que ainda não foi desenhada, não é uma preocupação para o desenvolvimento naquele momento e, portanto, você não precisa se preocupar em linkar ele no seu handoff.
10. Fluxo Alterado
Se um fluxo sofrer alteração, a alteração deve ser indicada sobrepondo o antigo fluxo com um retângulo escuro e com uma seta cinza direcionando ao novo fluxo. Lembre-se de informar a data em que a alteração do fluxo foi realizada (novo fluxo validado, com o handoff finalizado e liberado para desenvolvimento).
11. Outras Resoluções
Assim como mencionado na aba “antes do handoff”, a definição prévia do grid e do comportamento dos elementos definidos fará com que não seja necessário representar todas as resoluções possíveis de cada tela. Assim, você desenhará outras resoluções apenas para a primeira tela de cada fluxo ou para telas que necessitem mais detalhes sobre o comportamento dos elementos.
As demais resoluções desenhadas devem ser dispostas em um outro board na mesma página do arquivo Figma que contém o fluxo sobre o qual o Design Handoff foi realizado. Com isso, você conecta o cabeçalho do board do fluxo ao board contendo as demais resoluções.
Neste board, você adiciona o campo de título com o mesmo número e descrição da tela a qual as resoluções se referem.
Em caso de fluxos mobile e desktop, onde haja diferença considerável nos componentes existentes, o handoff deve ser feito para ambas as resoluções.