Modelo de organização de arquivos e design no Figma
Acumular arquivos e não ter um processo de documentação definido é o cenário ideal para o caos e atraso nas entregas, concorda?
Isso porque a má organização prejudica não só a manutenção e o fluxo de criação de arquivos. Mas também o desempenho do time no dia a dia de trabalho.
E foi atuando em equipes de diferentes tamanhos que percebi algo interessante sobre documentação. Em times menores, por exemplo, vi que era comum os membros sistematizarem os arquivos à sua maneira, sem tantos critérios.
Por outro lado, em equipes maiores, quando precisamos escalar e aplicar a manutenção, essa lógica subjetiva não funcionou. Principalmente nos cenários onde tivemos um fluxo constante de entradas e saídas de colaboradores no time. O que por sua vez gerou:
- dificuldades para localizar arquivos;
- manutenção ineficaz;
- inconsistência na sistematização;
- produção de arquivos cada vez mais pesados;
- falta de alinhamento da equipe;
- não uso ou inexistência de um design system;
- e falta de documentação para os stakeholders do produto.
Daí veio o questionamento: o que fazer diante dessas dores?
Pensando nisso, comecei a adotar alguns métodos de organização que até o momento têm se mostrado bastante eficientes. E quem sabe pode funcionar para você também.
Mãos na massa: organizando os arquivos no Figma
O primeiro passo dessa empreitada foi ordenar as categorias e nomenclaturas de todo o arquivo, quebrando-o, inclusive, em pedaços menores.
Para isso, utilizei a ferramenta Notion e padronizei as categorias de acordo com os produtos. A exemplo:
Team
- Título
— Aplicativo
— Discovery ou Research
— Site logado
— Site deslogado - Título de outra categoria
— Site Logado
— Discovery ou research
— Referências UX/UI
Depois disso, comecei a organizar a quebra do arquivo, com base na estrutura: capa, categorização da página e nomenclatura das páginas.
Capa
Também conhecida como a ‘cara do projeto’. Aqui defino o layout padrão e uso palavras-chaves para facilitar o reconhecimento dos arquivos. Nele podemos encontrar:
- ícone;
- nome do arquivo/projeto;
- bullets;
- avatar dos membros envolvidos (ver os rostos nos arquivos ajudam na hora de pedir ajuda).
Nota: Para criar a capa, uso a proporção de 1920x960. Já para defini-la, clico com o botão direito sobre o frame e seleciono a opção “Set as Thumbnail” (definir como capa).
Categorização da página
Nessa etapa, classifico as páginas no Figma de três formas, segundo a Categoria, Subcategoria e Item.
- Para documentar a Categoria, utilizo um Dropdown (unicode) antes do título. Lembrando que o fim de uma Categoria deve ser marcado por uma página vazia e intitulada com underlines.
- Para documentar a Subcategoria, faço uso de um recuo seguido de uma flecha direcional para baixo (unicode).
- Em relação ao Item, aplico um recuo duplo.
Nomenclatura das páginas
O uso da nomenclatura, com a atribuição de contexto, elimina a necessidade de descrever as páginas visualmente. Logo, emprego a sequência: tipo/categoria/elemento/variação.
Exemplo (ver figura a seguir): App/Home/DadosdoUsuário
De maneira que chegamos ao final do entregável com capa, categoria, nomenclatura e páginas e subpáginas divididas. O handoff no Figma contém todo o material necessário, assim que, ao final de todas as etapas, levo para a documentação.
Aprendizados
Para além da teoria, eu e meu time temos utilizado esse método de organização por uns bons meses. A nossa avaliação é que ele tem suprido o escopo para funcionar como base de start (conferir Figura 4). Tanto que conseguimos organizar o produto/projeto e monitorá-lo com muito mais agilidade.
Além disso, percebemos que esse processo organizativo tem diminuído a carga de stress ao criar novos arquivos. O que nos ensinou também sobre a importância de colher feedbacks, saber ouvir e adaptar-se às mudanças. Pontos que decidimos manter em nossa rotina.
Longe de ser perfeito, seguimos testando e revisando essa metodologia, corrigindo problemas e aperfeiçoando os pontos que necessitam de melhoria.
Agora queria saber: como funciona o SEU processo de organização? Você faria algo diferente do que relatei aqui?
Vamos trocar uma ideia.
