Estruture o ser arquivo de design no Figma grátis
Tags: figma, handoff, organization, ptbr
Published: 2024-04-10 14:01:50


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:

1. 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.);

2. Definições de design, tais como: componentes principais, regras de espaçamento, regras de marca, detalhes de comportamento (se aplicável);

3. 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
![Uma estrutura de páginas no menu lateral esquerdo do Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0p8ka9ynlr3hj3dcuue.png)
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
![Uma sugestão de tamanho de frames e configuração de exibição](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9wok6xipse7r2jj8cm0.png)
- 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.
![Uma sugestão de visualização dos componentes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzm9l4v02q5clzzvvgsp.png)

### 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.
![Sugestão de como exibir o fluxograma e organizar as telas do protótipo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krgbqtjjz3s0p8okd3fi.png)

<hr>

> Me conta, como você organiza o seu arquivo? Já tinha visto essa estrutura?