Como organizamos nossos times, projetos e arquivos dentro do Figma

No post anterior falamos um pouco sobre a nossa tomada de decisão e o processo na migração do adobe XD para o Figma. Hoje vamos abordar como estruturamos nosso workflow dentro dele para garantir uma melhor performance e trabalho em equipe entre nós designers junto com stakeholders, desenvolvedores e demais colaboradores que acessam nossos protótipos.

#PraCegoVer: Imagem de capa do artigo com o logo do Figma, o logo da Obj.Exc e uma ilustração simulando a organização de elementos em um sistema, em volta há outra ilustração que representa a seleção de todos os elementos junto de um menu e o cursor selecionando a palavra “how to organize”.

Cadastro e login

Cada designer recebe sua própria assinatura para acessar o Figma. A licença que temos na Objective é a de Organização, o acesso é feito através do e-mail corporativo que cada colaborador recebe e assim faz parte da nossa organização dentro do Figma recebendo acesso aos recursos e projetos em que for atuar.

Estrutura geral

Mantemos todos os nossos projetos dentro de uma raiz que possui uma organização padrão.

#PraCegoVer: ilustração representando em modelo de árvore a estrutura de times, projetos e arquivos que utilizamos na nossa organização do Figma.

Raiz = Objective Global Services

Esta é a raiz de todos os nossos projetos e mantemos dentro dela todos os protótipos de projetos que estamos atuando. Não importa se ele ainda está em definição ou já finalizado.

Team = Cliente ou produto

Como o próprio nome evidencia, nos teams do Figma agrupamos nossos projetos separados por cliente ou produto.

Dentro destes times adicionamos como editores os Product Designers e, como admin, o Designer Lead que faz a gestão do projeto.

Project = Agrupamento para as sub-divisões

Utilizamos os projects para agrupar as sub-divisões como pastas dentro do time. Por exemplo:

• Resourses: Por padrão todos os times devem contar com esse tipo de pasta. Nela mantemos os recursos usados diariamente nos protótipos, como design system/style guide, biblioteca de ilustrações, documentações e recursos diversos deste projeto.
• Categories: As demais pastas são utilizadas para a organização dos protótipos criados que tem relação com as soluções que serão implementadas. Nelas a organização é realizada de acordo com o que mais faz sentido para o projeto, seja por épico, feature, squad, portal e assim por diante.

#PraCegoVer: print de um projeto organizado no Figma com as sub-pastas criadas.

Files = Tarefas e arquivos diversos

Concentramos neste nível os arquivos, normalmente organizados por tarefas refletindo a estrutura do Jira (nossa ferramenta de acompanhamento das atividades).

Para as tarefas estabelecemos uma regra de nomeação: [Código do jira] + Nome da tarefa + versão deste protótipo (caso seja v.2. ou posterior).

Thumbnails e versionamento

#PraCegoVer: Print de uma thumbnail utilizada em um protótipo.

Todos os files recebem uma thumbnail customizada. Utilizamos o recurso de library para agilizar este processo. Para aplicar, o designer simplesmente ativa a library “Obj.Exc — Thumbnails” que mantemos na nossa seção de recursos para os times e após isso deve-se preencher as seguintes informações abaixo.

1- Status

Temos 3 tipos de status para representar o estado atual do protótipo

• Prototipando:
  Representa o estado em que o designer está trabalhando no protótipo.
• Desenvolvendo:
  Estado em que o protótipo já foi aprovado pelos responsáveis e foi para desenvolvimento.
• Implementado:
  O passo final que significa que o protótipo já foi desenvolvido, aprovado e pronto para ser feito de UX/UI review.

2- Versão

A versão em que o protótipo está. Utilizaremos 1.0, 2.0 e por assim em diante.

Só é realizada a troca de versão em casos onde temos um protótipo que já está em desenvolvimento recebe uma nova alteração por parte de um stakeholder ou outro responsável. Nesse caso duplicamos o protótipo anterior, mudamos a versão e fazemos a alteração solicitada.

3- Título

É inserido o título da tarefa tal como está sinalizado na nossa ferramenta de acompanhamento, o Jira. Assim mantemos a consistência e todos os envolvidos com a tarefa a chamarão da mesma forma e isso acaba facilitando a comunicação.

4- Responsável

Designer escolhe a sua foto seguida do preenchimento de seu nome.

Esse processo de escolha é feito pelas variants que já estão configuradas previamente na library “Obj.Exc — Thumbnails”

5- Device

Alteramos o device que representa o tipo de protótipo, como desktop ou mobile que também é uma variant.

Essa foi mais uma parte da série de posts sobre o nosso processos de migração para o Figma. Nos posts a seguir falaremos sobre:

• Nossas boas práticas de prototipação com o Figma;
• Nosso processo de compartilhamento e handoff no Figma;
• Como organizamos e utilizamos o Orbit (nosso design system) dentro do Figma;
• Como organizamos as especificações dos componentes do Orbit utilizando Figma + Zeroheight.

Se esse texto serviu de alguma forma como ajuda em seu processo de trabalho, compartilhe-o para que chegue no maior número de pessoas possível e assim contribuirmos com a comunidade designers pelos Brasil.

Até mais!