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

O frio na barriga

Aquele frio na barriga antes de começar, parada em frente a uma tela em branco. Uma tela em branco às vezes pode ser desesperadora.

Hoje superei um pouco isso, enchendo essa tela em branco em poucos segundos com um ritual que chamo de “Kill the white page ritual” (Ritual mate a página em branco).

Nesse ritual, eu escrevo ou desenho o que eu sei que tenho que fazer até o momento em 5 segundos ou menos. Às vezes faço um título de 68 pixels, um botão e um quadrado. A partir daí me sinto melhor e começo a respirar e pensar com calma.

Comece com uma capa

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

Tamanhos de capas

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

Texto

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)

Defina em equipe(a) um modelo de organização

Crie uma estrutura para os projetos, arquivos e páginas que faça sentido para você e sua equipe. Mapeei seis sugestões de modelos que podem ser por:

Tamanho de tela ou plataforma

Feature

Entregáveis de UX

Processo de desenvolvimento

Baseado no Scrum

Baseado em versões com um arquivo por feature

1. Tamanho de tela ou plataforma

No início eu organizava o arquivo por tipos de dispositivos. Por exemplo:

1. Desktop

2. Mobile

Funciona para criação de websites simples ou uma landing page rápida.

2. Feature

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.

4. Processos de desenvolvimento

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.

5. Baseado no Scrum

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.

6. Baseado em versões com um arquivo por feature

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.

Entenda a estrutura de organização de arquivos do Figma

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.

Minhas lições no processo todo

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)