Após alguns anos trabalhando como designer de UI/UX, posso dizer que: "se você compartilha o arquivo de design do Figma com alguém, precisa ser assertivo, claro e organizado". Essa pessoa precisa entender de imediato sem que precise explicar onde está cada elemento e por que foi feito assim, o que economiza tempo.
Os conteúdos que vi relacionados ao "handoff para engenheiros" consistiam em várias páginas, mas esquecem que em projetos pessoais ou até mesmo para pessoas sem dinheiro para assinatura, estão limitados a apenas 3 páginas no máximo por design. Por isso, trago aqui uma adaptação que tem sido útil para mim e espero que seja útil para você também!
O que é um handoff?
É um processo de passagem de bastão, de informação para outra pessoa ou grupo de pessoas. Esse bastão pode ser um processo completo ou apenas algumas informações.
No caso do design de UX, isso vai depender muito de como você trabalha e quais informações precisaria passar para outros designers ou engenheiros. Para termos uma noção, aqui está um exemplo:
Informações sobre o projeto ou jornada (contexto, usuários, valores, informações de marca e design system - se houver -, papéis dos envolvidos nas demandas, link do card do Jira, etc.);
Definições de design, tais como: componentes principais, regras de espaçamento, regras de marca, detalhes de comportamento (se aplicável);
Detalhes sobre a jornada, incluindo os cenários bons ou ruins. Se trabalhar com diferentes áreas, utilize um fluxograma para dar uma visão ampla das ações positivas e negativas no fluxo de telas.
A estrutura do Figma
Observação: Essa é uma sugestão de páginas que você pode incluir no seu arquivo.
Capa + Informações
- Para capa use um frame de 1745 x 960
- Selecione o frame e clique em "Set as Thumbnail"
- Use de cópias do frame com título + informações resumidas Lembre-se que essas informações poderão ser lidas por desenvolvedores, gerentes de projeto (PM/PO), CEOs e outras pessoas envolvidas.
Componentes
- Use seções ou grupos para organizar os seus componentes
- Se tiver algum comportamento esperado que o desenvolvedor precisa, adicione notas para guiar e evitar retrabalho
- Deixe claro espaçamentos, o inspect do Figma não detecta espaçamentos que estão em várias camadas.
Plugins que recomendo:
- Notely: https://www.figma.com/community/plugin/1329084856945618527
- EightShapes: https://www.figma.com/community/plugin/1205622541257680763
Jornada Feliz e Completa
- A jornada feliz é uma sequência de telas em que o usuário realiza ações de maneira feliz, sem cenários inesperados ou erros. Pode ser chamada de jornada perfeita também.
- A jornada completa prevê todos os cenários possíveis no momento
- Caso um time veja, é interessante usar de um fluxograma, e explicar a série de ações que o usuário irá percorrer
- Sinalizar a rota entre telas com o uso de setas, mostrando que na tela 1 o usuário clica no botão x e vai para a tela 2, por exemplo.
Me conta, como você organiza o seu arquivo? Já tinha visto essa estrutura?
Top comments (0)