Uma organização eficiente de arquivos Figma é fundamental para manter a produtividade e a colaboração. Não sabe como organizar os arquivos Figma? Este tutorial está aqui para ajudar!
Você já criou um arquivo intitulado “App-layout-v1-final-final-final“? Não há vergonha nisso, todos nós já passamos por isso! Dito isso, ter arquivos Figma bem organizados pode ser uma virada de jogo para você.
Segundo Figma, a forma como você estrutura e apresenta seu trabalho pode ser fundamental para que todos os envolvidos permaneçam na mesma página à medida que o projeto evolui.
Este tutorial foi criado especialmente (mas não exclusivamente) para designers freelancers que trabalham sozinhos. Portanto, vamos nos concentrar nas linhas inferiores deste fluxograma organizacional: Projetos e arquivos.
Vejamos cinco dicas e truques que você pode aplicar facilmente em seus projetos. O objetivo é facilitar sua vida organizando cada projeto e acompanhando cada aspecto específico dele.
Tenha em mente que a organização de arquivos Figma deve funcionar para você e seu processo de design.
5 dicas e truques para organizar seus projetos Figma como um profissional
Começaremos pela visão geral sobre Recentes página na Figma. Em seguida, passaremos às dicas para a estrutura interna recomendada dentro de cada projeto individual.
Essas dicas são apenas sugestões. Existem mil versões de organização de arquivos Figma. Mas para orientação, aqui estão três abordagens de organização compartilhadas pela Figma:
- Por superfície do produto: isso é sugerido para aplicativos ou produtos da web. Por exemplo, se estiver construindo um site de comércio eletrônico, você terá projetos como Conta, Carrinho, Pagina iniciale Listagens de produtos.
- Por recurso ou estado de produção: essa abordagem é ótima para as equipes verem o que está “ao vivo” e o que não está.
- Por estágio do processo de design: isso é melhor para equipes como agências, para que todos estejam alinhados na fase do processo. Isso pode incluir projetos para WIP, Análise, Desenvolvimento e Enviado.
Alguns desses recursos variam de acordo com a versão do Figma com a qual você está trabalhando (gratuita ou paga).
Este tutorial é focado no que está disponível quando você trabalha com Figma na versão básica e gratuita.
1. Crie nomes de arquivos limpos
Criar nomes de arquivos limpos e eficazes pode economizar horas para você e sua equipe. Ao nomear seus arquivos, tente ser o mais descritivo possível, incluindo o conteúdo e a finalidade do arquivo.
Também é recomendado criar um formato de nomenclatura para ser usado de forma consistente. Por exemplo, pode ser “ProjectName_Section”. Faça disso um acordo repetível e estabelecido entre você e seus colaboradores.
Aqui está um gráfico que mostra a hierarquia e estrutura que um nome de arquivo Figma pode seguir:
2. Adicione uma capa de arquivo para cada projeto
Uma capa de arquivo no Figma é basicamente um resumo visual do que está dentro de um arquivo Figma. É perfeito para digitalização visual de seus projetos. Você pode identificar rapidamente o projeto, o estágio e quem está trabalhando nele.
É um ótimo truque para identificar e diferenciar rapidamente os arquivos Figma. E o melhor: é muito fácil de criar. Eu vou te mostrar como.
Comece criando uma página intitulada Capa e pressione F.
Em seguida, clique no painel do lado direito em Comunidade Figma e depois clique em Plugin/capa do arquivo.
Você obterá um quadro de 1920 x 960. Você vai clicar com o botão direito nele e selecionar Definir como miniatura.
Aqui estão as principais informações que sua capa de arquivo deve conter:
- Status
- Nome do arquivo
- Descrição do Projeto
- Equipe
- Elementos visuais
Não sabe como projetar o seu? Encontre vários designs de capas de arquivos Figma na Comunidade Figma para se inspirar. O meu é mais ou menos assim:
E está tudo pronto! Faça isso com todos os seus arquivos Figma e encontre as coisas mais rapidamente!
3. Pense na estrutura da página
Agora vamos entrar nos arquivos Figma. Pensar na estrutura da página pode salvar totalmente sua vida à medida que cada projeto evolui e mais projetos surgem. A estrutura de sua página para organização eficiente de arquivos Figma pode incluir:
- Capa dos arquivos Figma (como aquele que acabei de mostrar como criar)
- Pesquisa visual: adicione todas as capturas de tela e ideias que encontrar em um só lugar
- Pesquisa do usuário: você pode testar e acompanhar os fluxos de usuários sem atrapalhar seu design
- Sistema de projeto: isso é como sua caixa de tesouro onde você guarda todos os seus elementos de design
- Pronto para revisão: aqui está o design pronto para mostrar ao seu cliente antes de prosseguir
- Pronto para desenvolvimento: é aqui que fica tudo aprovado pelo cliente e pronto para sua equipe de desenvolvimento trabalhar
Por exemplo, pode ser uma estrutura básica de duas páginas como a apresentada neste modelo de site de comércio eletrônico de supermercado ga-analytics#sendElementsClickEvent”>:
Ou pode ser mais específico se o projeto for mais complexo ou considerar mais aspectos. Você pode até adicionar emojis para orientação visual.
Crie linhas divisórias para separar páginas visualmente.
Aqui está uma estrutura de página mais específica sugerida pela Figma:
Conforme mencionado no início, a organização de arquivos Figma deve funcionar para você e sua equipe. Crie as páginas que você precisa com base nos requisitos de cada projeto.
4. Dedique algum tempo para nomear camadas
Como designers, acho que esta é uma prática que a maioria de nós ignora desde os tempos do Photoshop. Nomear suas camadas de maneira consistente e fácil de entender pode economizar tempo (e talvez lágrimas) para você (e para outros) no futuro.
Não vá, continue lendo. Eu prometo a você que isso leva apenas alguns segundos! Aqui está um bom exemplo de diagrama criado pela Figma para você ter uma ideia:
Em vez de ter um genérico Quadro 25, vetor, imagem camadas, dê-lhes um pouco de amor. Torne-os um pouco mais específicos.
Como você pode ver neste exemplo, o Cartão Comunitário segue uma hierarquia básica de camadas. Cada camada tem simplesmente o nome de sua função.
5. A organização ideal do quadro
Esta etapa fica guardada para o final, pois é útil quando o projeto está pronto para desenvolvimento.
Esta organização de arquivos Figma para frames pode criar um meio-termo para você e sua equipe de desenvolvimento.
Isso pode garantir que suas ideias de design sejam efetivamente traduzidas em código. Portanto, use esta dica de organização de arquivos Figma para sua página “Pronto para desenvolvimento”.
A melhor abordagem é pensar nesta estrutura por fluxo e por plataforma. Por exemplo, criei um fluxo móvel de login básico usando o modelo ga-analytics#sendElementsClickEvent”>E-commerce Mobile App como base. Seguir uma estrutura de quadro organizada pode ter a seguinte aparência:
Não se estresse. Felizmente, há uma boa alma na comunidade Figma que criou um guia de estrutura de arquivos para nós.
Neste exemplo, cada quadro mostra um estágio diferente do fluxo de Login. O primeiro quadro mostrará Conecte-se tela. Então Senha preenchida e por ultimo E-mail preenchido.
Este é apenas um exemplo de como você pode se preparar para o processo de transferência perfeito para sua equipe de desenvolvimento.
Os melhores modelos Figma para otimizar seu trabalho de design
Agora você tem algumas dicas e truques práticos sobre como organizar arquivos Figma. Para facilitar ainda mais sua vida, você pode começar a trabalhar com os templates Figma.
Envato Elements oferece uma ampla seleção de ga-analytics#sendElementsClickEvent”>modelos Figma, incluindo fluxogramas, wireframes, modelos de aplicativos móveis, modelos da web e muito mais para ajudar a aprimorar seus projetos de design.
Comece a aplicar todas essas dicas e truques de organização de arquivos Figma com os modelos Figma da Envato Elements!
Mais recursos e tutoriais do Figma
Quer saber mais sobre o Figma? Mergulhe em um (ou mais) dos tutoriais e recursos do Figma disponíveis no Envato Tuts+:
