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