Modelos de Design Workflow e Organização de Arquivos no Figma

Deixe o arquivo que você irá trabalhar mais bonito e arrumado.

Segundo Marcos Paulo Pagano, a imagem de capa ser quadrada a faz funcionar melhor em todas as proporções possíveis de exibição.

Outros tamanhos sugeridos:

• 500×270 pixels
• 620×320 pixels

• Tamanho mínimo visível: 24 pixels
• Títulos: 48 pixels

Clique para visualizar capas adicionadas aqui.

Com o botão direito sobre o frame é só clicar em “Set as Thumbnail” (Definir como capa).

Isso também é importante caso envie o link para o cliente, por exemplo, aparece a imagem junto ao link.

Dica: Gosto de colocar a cor do fundo do canvas da mesma cor do frame para não aparecerem bordas na visualização.

Criar capas e definir como tumbnails (Imagens do Samuel Wong)

Eu começo com um modelo de capa que criei, e copio de um projeto para o outro. Isso cria uma uniformidade em meus projetos e fica lindo quando entro na visualização de recentes do Figma.

Capas de projeto de Abel Hancock. (Ver em tamanho real)

Separar as features por página tem um ponto positivo e um negativo.

Pró:Os desenvolvedores adoraram quando passei a organizar as features em páginas, os devs realmente adoraram a ideia. Assim, quando estavam desenvolvendo uma versão podiam navegar mais fácil e rapidamente por cada feature.

Contra:Difícil manutenção para conseguir disponibilizar as features por página eu tinha que copiar as telas da página de UI principal onde estavam todas as telas organizadas por fluxo de usuário, e duplicá-las na página da feature específica e mantê-las atualizadas.O Figma, ao contrário do Sketch, não aceita prototipação entre páginas. Então eu tentei transformar as telas em componentes, assim quando eu mudasse algo na master as telas nas páginas de features seriam atualizadas automaticamente.Porém, transformar todas as telas em componentes não parecia uma boa ideia para mim e ainda não resolvi essa questão por completo.

• Outra forma de organizar é por etapas de desenvolvimento do produto. Exemplo:
  • Cover ou Apresentação do projeto
  • User story (o quê): usamos bastante como guia para testes com utilizador.
  • User tasks / Requisitos do projeto (como): pode copiar do doc de requisitos que o Gestor de produto faz e adicione anotações.
  • Pesquisas / Resultados: aqui se inclui também a persona.
  • Moodboard / Feature benchmarking / Concorrentes
  • Fluxos / Wireframes: gosto de fazer wireflows com o Plugin Autoflow.
  • Guia de estilos
  • Fluxos / UI Screens: fluxos com visual design aplicado, esta é a página que os devs mais utilizam por isso deixo com os fluxos junto.
  • Protótipo
  • Em andamento/Work in progress: comecei a usar o Plugin Status ou Frame Status para indicar no que estou trabalhando e o que já está pronto pra avaliar/desenvolver.
  • Drafts/Rascunhos

  Como eu faço parte de times de diversos produtos (4 apps, 13 websites e 2 Webapps) posso explorar organizações diferentes para cada produto e time.

Um modelo que vi nos fóruns sobre o tema foi criar 4 arquivos (não páginas) dentro do projeto, dessa forma:

1. Tokens

Reúne todos os elementos essenciais de design da empresa, como tipografia, paleta de cores, logotipos, ícones.

2. App

Todas as telas desde a concepção são colocadas aqui. As páginas principais incluem Sprint, Master, Archive. Deve-se criar uma página para cada sprint a fim de revisar os itens de trabalho com a equipe. As telas lançadas serão consolidadas na página mestra.

3. WebApp ou Website

4. Ops

Todos os ativos editoriais do produto ficam aqui, como gráficos pras lojas (Apple Store e Play Store) banners e gráficos de mídia social. As páginas principais são divididas de acordo com os canais, como Landing Banners, Campaign, Store, Website Assets, Instagram, etc.

Equipe › Projeto › Arquivo › Cover | Design | Test # | Develop

Equipe: normalmente é o nome da empresa

Projeto: site ou aplicativo em que você está trabalhando

Arquivo/file: o arquivo é baseado nos recursos/feature desse produto (web ou app, etc). Você pode ter um arquivo ou vários arquivos (como Login ou processo de checkout, são todos recursos individuais separados por feature)

• Dentro de cada arquivo existem páginas estruturadas:
• Capa
• Design
• Teste (com utilizadores e protótipos separados por versão testada e data)
• Desenvolvimento

As páginas de teste são para teste com utilizadores e podem haver várias delas até você chegar à etapa de desenvolvimento. Cada etapa pode ter seu próprio protótipo no Figma.

Dica: para quem tem um plano pro do Figma, a função de salvar versões e criar um histórico é um sonho.

Esta é a organização de arquivos no Figma

No final o melhor vai ser sempre combinar alguns destes modelos de acordo com o tipo de produto e o que fica melhor para sua equipe.

Use redlines para anotar coisas que você deseja destacar. Existe um componente chamado Figma Redline que você pode usar para fazer suas anotações se destacarem.

Faça comentários para adicionar informações importantes para o time, como, por exemplo, se um componente for dinâmico e requer um serviço. Garanta que o dev back-end irá ver.

Documente e rotule tudo — especialmente as camadas.

• Aprender a não complicar as coisas
• Nem todo mundo vai entender minha forma de pensar e organizar
• Sempre tentar diminuir minha carga de trabalho ao criar novos arquivos e projetos e mantê-los ao longo do tempo
• Ter seu próprio template/framework vai te salvar muito tempo e vai ajudar novos entrantes
• Tentar diminuir ao máximo a carga cognitiva da minha equipe ao ser jogada em um projeto que criei e ajudá-lo a navegar e encontrar o que precisam
• Sempre pedir feedback e construir tudo em equipe
• Não é necessário ter uma página só para a cover já que a thumbnail pode ser definida em qualquer lugar. Nesse caso é melhor que a primeira página seja a última versão da interface, pois fica mais prático para a equipe (valeu Marcos Paulo Pagano pelo insight)

Minha equipe acabou de migrar para o Figma e ainda estamos nos adaptando ao trabalho colaborativo por lá. Eu tenho implementado alguns modelos de acordo com cada produto e feito testes para saber o que funciona melhor, e claro, tem surgindo alguns problemas, mas o importante é coletar feedback e se manter evoluindo.

Espero que gostem do post e que os ajude de alguma forma 🙂

Partilhamos um artigo de Julia Nascimento (versão original)