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

Figura 1: Exemplo de capa aplicado ao FIGMA

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.

Figura 2: Exemplo de categorização de arquivo aplicado ao FIGMA

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

Figura 3: Exemplo de nomenclatura de página aplicado ao FIGMA

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.

Figura 4: Prós e contras do nosso método de organização de arquivos

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.

Escrito por: Diego Curumim