Design Handoff: Parte 1
Conceito, Componentes e sua Aplicação
INTRODUÇÃO
O que é o Design Handoff?
O Design Handoff é uma etapa simples, mas crucial para o projeto. Por isso, ela deve ser feita da forma mais eficiente e colaborativa possível. Esta etapa tem por objetivo passar, com clareza, todas as especificações e detalhes das microinterações dentro de um projeto para o time de desenvolvimento. Por exemplo: como ocorrem os fluxos dentro do produto a ser construído e quais os comportamentos dos elementos que compõem as telas finalizadas.
À primeira vista, pode parecer um processo complicado, mas a verdade é que, enquanto solucionava os desafios do produto, você já definiu o conteúdo do Handoff. Com as telas finalizadas e liberadas para desenvolvimento, os fluxos e especificações do produto já estão bastante claros para você. Agora, basta repassar essas especificações no arquivo que será entregue ao time de engenharia para desenvolvimento.
Como e quando fazer o Handoff?
O Design Handoff deve ser feito apenas para a versão final do fluxo de um projeto, isto é, após a validação final do design e liberação para o desenvolvimento.
Para facilitar a realização do seu primeiro handoff, existe um passo a passo simples a ser seguido. Resumidamente, consiste em:
- Primeiro organize o fluxo da jornada: defina a sequência das telas e, depois, conecte-as através das setas, indicando o fluxo.
- Em seguida, explique a ação que leva àquela tela utilizando caixas de texto acima da tela
- Por fim, acrescente outras especificações pertinentes ao desenvolvimento do produto (como modais de hover, tooltips, entre outros).
A seguir, mostrarei de forma um pouco mais detalhada o que são cada um destes passos e os componentes citados (setas, caixas de texto, tooltip, modais, etc).
Caso queira saber um pouco mais sobre o conceito de Design Handoff, você pode ler esse artigo utilizado como referência para este texto de introdução, basta clicar no link: Design Handoff: O que é e como fazer de forma bem sucedida?
ANTES DO HANDOFF
Organize os fluxos do projeto a serem validados
- Oriente seu fluxo de telas da esquerda para a direita, facilitando a leitura do que está acontecendo para outras pessoas. Abaixo de cada uma delas liste as versões de cenários e estados alternativos.
- Adicione faixas com nomes sobre os fluxos para orientação visual — sua e das demais pessoas de sua squad (e stakeholders também).
- Adicione uma caixa de comentário à esquerda do fluxo, trazendo o seu raciocínio para resolver aquele fluxo, além de comentários relevantes para quem, eventualmente, precisar validar o fluxo assincronamente.
- Planeje o grid de seu projeto de forma que a sua interface consiga ter seu conteúdo adaptado a diferentes dispositivos. Em caso de grids fluidos, preveja e detalhe o comportamento de redimensionamento dos elementos da interface no seu styleguide.
- Com o comportamento dos elementos definidos, já não será 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.
COMPONENTES E SUA APLICAÇÃO
Trago uma boa notícia! Os elementos usados para criar o Handoff já estão padronizados e em forma de componentes neste arquivo do Figma. A seguir vou te apresentar cada um destes e sua aplicação no design handoff, mas se quiser entender como adicionar esses componentes aos seus arquivos de projeto, basta rolar essa página diretamente até o último tópico.
Setas Direcionando Fluxos
Existem dois tipos de setas com a função de direcionar fluxos: para o fluxo principal usamos a seta que apresenta linha em preenchimento sólido, para fluxos secundários, usamos a seta com a linha tracejada. Estas setas são utilizadas conectando as telas, de acordo com o fluxo representado.
Para gerar essas setas, recomendo utilizar o Plugin Autoflow, que pode ser baixado aqui. Após baixar o plugin, acesse-o no Figma: para isso, vá até a barra superior direita, clique em Plugins e, então, em Autoflow.
Com isso, abrirá um modal com o plugin do Autoflow e bastará clicar, segurando o Shift, na tela/elemento de onde a ação parte e depois, na tela/elemento que aparecerá após a ação.
Para configurar as setas, sugiro utilizar (conforme imagem abaixo à esquerda): stroke/traçado = 3; color/cor = D205B2; corner/curvatura = 20; terminals = open — line arrow. Em caso de fluxos secundários, utilize a seta tracejada com valor 10 para dash/tracejado (imagem abaixo à direita).
Caixas Indicando Ações
As caixas que indicam ações são utilizadas para demonstrar qual interação realizada pelo usuário gera determinado comportamento ou exibe certa informação do sistema. As ações representadas são: Atualizar (Refresh), Arrastar (User drag), Clicar (User click), Digitar (User type), Deslizar para a direita (Swipe right), Deslizar para a esquerda (Swipe left), Passar o mouse (User hover), Link para outra página (link to other page).
Caixa de Cenário
São utilizadas acima de cada uma das telas que compõem o fluxo. As caixas de cenário servem para contextualizar sobre a que a tela se refere e quando/como o usuário chega àquela tela durante a sua jornada.
Caixa de Comportamento
São componentes utilizados para especificar os comportamentos possíveis dos componentes utilizados no projeto. Exemplo de especificações: quando um botão fica ativo ou inativo, quando (e onde) algum elemento fica fixo na tela, animações (carregamento de tela, opacidade de elementos, mudança de cor de elementos), formatação de campos de valores, possibilidades de busca.
Caixa de Erro
Quando houver possibilidade de mais de um cenário de erro e a tela (ou modal) da mensagem de erro se repetir em todos eles, alterando apenas o conteúdo, você pode utilizar a variante de erro da caixa de comportamento para especificar as condições em que cada erro ocorre e a mensagem retornada. Caso o ícone também sofra alteração, você pode adicioná-lo ao lado da caixa contendo a condição.
Caixa de Link
Utilizada para anexar o arquivo que contém o styleguide do projeto, linkando de forma direta e prática para os desenvolvedores.
Para editar o link, posicione o mouse acima do texto do componente, aparecerão algumas opções, selecione “edit” (editar). Apague o link que aparece no campo que se abrirá e cole o link para o seu styleguide (ou outra página).
Fluxo Alterado
Quando um fluxo sofrer alteração isso é indicado no design handoff sobrepondo o antigo fluxo com um retângulo escuro e com uma seta cinza direcionando ao novo fluxo. Sobre este retângulo há um texto informando que houve alteração no fluxo e você pode editar esse texto para informar a data de alteração.
Cores
Escolhi o cor de rosa (#D205B2) por ser discrepante das cores utilizadas na maioria dos projetos. Caso o seu projeto utilize algum tom de rosa similar como cor principal, você deve escolher uma outra cor que se destaque das utilizadas no projeto. O azul (#2841C3) é utilizado nas caixas de links. O vermelho (#D20511), nas caixas de erro. O cinza (#636366), na caixa de comportamento e utilizamos o branco puro como preenchimento e nos textos das caixas de ação (#FFFFFF).
ADICIONANDO OS COMPONENTES DO HANDOFF
Como incluo esses componentes no meu projeto?
Esse é um processo bem simples, basta ir na barra lateral esquerda do Figma e clicar na aba “Assets” no canto superior esquerdo (ver a imagem abaixo). Então, clique no ícone de Biblioteca (imagem da direita abaixo).
Feito isso, será aberto um modal (ver a imagem abaixo) com todas as bibliotecas (Libraries) de componentes existentes no seu Figma. Habilite a biblioteca “Handoff Styles” (imagem abaixo à direita).
Prontinho! Agora é só expandir a seção “Handoff Styles” e sua subseção “Component” em “Assets”, na barra lateral esquerda, para conseguir acessar todos os componentes do Design Handoff.
