Figma: dicas para uma organização eficiente

Neste artigo, compartilho um pouco da minha experiência com melhores práticas e dicas para organizar o fluxo de trabalho no Figma, desde a criação de nomenclaturas até o uso de componentes reutilizáveis.

Vamos começar?

Figma — fonte: mentorama.com.br

Criação de Covers

A cover é a primeira tela do seu projeto e é a primeira impressão que o seu time de design terá do projeto. É importante investir tempo na criação de uma cover bem elaborada para apresentar o projeto de forma clara e atrativa para toda a equipe.

É importante ter uma capa organizada e padronizada para que todos saibam rapidamente o que esperar do arquivo.

Tela do time de DesignOps com os templates de uso. Cores distintas nas capas de cada módulo para sinalizar os tipos de documentos.

Algumas dicas para criar uma cover eficiente são:

• Use uma imagem ou ilustração que represente o projeto e chame a atenção do time de design;
• Inclua o nome do projeto e as informações relevantes, como a data de criação e a versão;
• Adicione uma breve descrição do projeto, destacando os principais objetivos ou desafios que ele busca solucionar;
• Inclua a data da última atualização (tome cuidado, com esta ação, você precisa sempre estar atento a essa data quando tiver alguma atualização no arquivo);
• Adicionar o nome do designer principal ou de todo o time de designers.

Nomeação de Frames

Frames são elementos fundamentais para a construção de interfaces digitais. Eles são basicamente áreas retangulares que definem o espaço onde o conteúdo deve ser inserido. Os Frames podem ser redimensionados, organizados em camadas e possuem diversas configurações, o que os torna uma ferramenta muito versátil para designers e equipes de desenvolvimento.

São utilizados para organizar os elementos de um layout, como botões, imagens, texto e outros elementos de design. Também, são utilizados para criar telas individuais, que posteriormente serão combinadas em um protótipo ou em uma interface final. A flexibilidade dos Frames é uma das suas maiores vantagens, pois permitem que os designers trabalhem em diferentes tamanhos e orientações de tela, criando layouts para desktop, tablet ou celular com facilidade.

É importante nomeá-los de forma clara e consistente para facilitar a navegação e a organização do projeto. A falta de padronização nos nomes pode causar confusão e dificultar a colaboração.

Na imagem, há dois frames idênticos, mas com diferentes configurações na nomeação dos seus elementos. Notavelmente, a versão que contém os nomes dos elementos é muito mais fácil de compreender, pois permite identificar claramente cada um deles.

Página do Figma contendo dois frames iguais, mas com nomenclaturas diferentes.

Algumas boas práticas para nomear os frames são:

• Seja descritivo: nomeie de forma clara e descritiva para que os membros da equipe possam entender facilmente o conteúdo e o propósito de cada um. Use nomes que descrevam claramente o conteúdo da tela;
• Considere usar prefixos ou sufixos para diferenciar os tipos de frames, por exemplo, “Home — Tela Inicial” ou “Modal — Confirmação”.
• Use palavras-chave: use palavras-chave relevantes para facilitar a busca de frames específicos.
• Seja consistente: use a mesma convenção de nomenclatura em todo o arquivo e certifique-se de que todos os membros da equipe a estejam seguindo.

Criação de Cenários

No Figma, cenários (também conhecidos como scenarios em inglês) são uma funcionalidade que permite criar e visualizar diferentes fluxos de um projeto de design. Um cenário é uma sequência de telas ou estados que mostram como um usuário pode interagir com um produto ou serviço. Essa funcionalidade é especialmente útil para designers que desejam criar protótipos interativos, permitindo que eles criem diferentes caminhos de navegação para os usuários testarem a experiência do produto.

Ao criar um, você pode definir transições e animações para simular a interação do usuário com a interface do produto, facilitando a compreensão da experiência do usuário e a identificação de possíveis problemas de usabilidade. Além disso, os cenários permitem que equipes de design e desenvolvimento colaborem de forma mais eficiente, ao visualizar e discutir as diferentes interações do produto em tempo real.

São uma forma de organizar as telas do seu projeto em fluxos de interação. Eles ajudam a visualizar como o usuário navegará pelo produto e a identificar possíveis problemas de usabilidade.

Representação no Figma de cenário criado para oganizar a jornada de um sistema

Para criar cenários eficientes no Figma, siga estas dicas:

• Crie uma página separada para cada cenário e nomeie-as de forma clara;
• Adicione uma breve descrição do cenário para contextualizar o time de design;
• Use as caixas de texto para explicar as ações do usuário em cada etapa do cenário;
• Adicione links entre os frames para simular a navegação do usuário.

Organização de Pages

Pages são uma funcionalidade que permitem aos usuários criar diferentes páginas em um único arquivo. Cada página pode conter diferentes telas, estados, elementos de design, ou uma combinação desses itens. Isso torna as Pages uma ferramenta muito útil para designers que precisam criar projetos complexos com múltiplas seções.

As Pages funcionam como se fossem várias pranchetas dentro do mesmo arquivo. Cada prancheta representa uma página, e você pode alternar entre as páginas usando o painel de navegação na parte inferior esquerda da tela. Dessa forma, é possível organizar todo o projeto de forma mais clara e eficiente, permitindo que os usuários acessem e editem as diferentes seções com facilidade.

Essa organização é essencial para manter o seu projeto de design bem estruturado e fácil de navegar.

Exemplo de pages organizadas no Figma com nomes distintos para cada etapa do processo e ícones representativos sobre o status de cada etapa.

Algumas dicas para manter as suas pages organizadas são:

• Organize suas páginas em uma estrutura que faça sentido para o projeto. Utilizar uma hierarquia de fluxo de produção é uma boa ideia para seu projeto.
• Mantenha uma convenção de nomenclatura consistente em todo o projeto. Isso significa que todos os nomes devem seguir um padrão comum. Por exemplo, você pode optar por usar letras minúsculas, separadas por hífens ou sublinhadas para separar palavras (por exemplo, “pagina-inicial” ou “pagina_inicial”).
• Tente manter os nomes das páginas o mais concisos possível, mas ainda assim informativos. Evite nomes longos e complexos, pois eles podem dificultar a leitura e a identificação rápida.
• Considere organizar suas páginas em ordem alfabética. Isso facilita a localização de uma página específica, principalmente quando você tem muitas páginas no projeto.
• Considere adicionar prefixos ou sufixos aos nomes das páginas para categorizá-las ou agrupá-las. Por exemplo, você pode usar um prefixo “01_” para páginas relacionadas ao design inicial, “02_” para páginas de iteração, “03_” para páginas finalizadas, etc.
• Evite caracteres especiais: Evite o uso de caracteres especiais, como pontos de exclamação, asteriscos ou caracteres não alfanuméricos nos nomes das páginas. Isso pode confundir quem está lendo seu projeto.
• Se você estiver trabalhando em um projeto multilíngue, decida em qual idioma você usará os nomes das páginas e mantenha essa consistência em todo o projeto. Isso ajudará a evitar confusões e erros de interpretação.
• Considere usar ícones ou cores para diferenciar visualmente as páginas e subpáginas.

Em resumo, o Figma é uma ferramenta poderosa que oferece recursos incríveis para projetos de design e colaboração em equipe. Ao explorar suas funcionalidades e adotar práticas de organização eficazes, é possível melhorar significativamente a produtividade e a qualidade dos projetos.

Espero que as dicas compartilhadas neste artigo tenham sido úteis para que você possa aproveitar ao máximo o potencial do Figma em seus projetos.

Lembre-se de sempre se manter atualizado sobre as novidades e atualizações da ferramenta, a fim de garantir uma experiência cada vez melhor e mais eficiente em seus projetos de design.

Até a próxima.