Blog
18 de junho de 2021
Estrutura de arquivos utilizando o Figma para solução de Design
Quando penso em estruturas, sempre imagino uma gaveta e os itens dentro dela organizados, porém, isso não se reflete a realidade do dia a dia. E foi por isso, que o Chapter de Design resolveu organizar essa gaveta.
Visão geral do Figma
De forma bem simples, podemos falar que o Figma é uma ferramenta onde projetamos interfaces e qualquer outro tipo de materiais gráficos. Com ele customizamos ou personalizamos conforme a necessidade do Designer, dessa forma, pode surgir algumas dúvidas quando escalamos esse documento para que o time possa visualizar ou que outro Designer possa trabalhar no arquivo.
Pensando nisso, o Chapter de Design da Before resolveu criar um arquivo que todos os Designer possam entender a estrutura. Essa estrutura permite que o Designer tenha maior foco em sua tarefa e não precise se preocupar em estruturar o arquivo, para que o time de engenharia possa fazer a visualização dos protótipos.
Objetivo
O objetivo do Figma dentro da Before é servir como repositório de propostas e concentrar as tarefas realizadas pelo time de Design, dessa forma, ela é ferramenta de design que auxilia no compartilhamento com o time de engenharia e estratégia para validar requisitos.
Estrutura
Dentro da estrutura do Figma é possível trabalhar com várias Pages que ficam localizadas dentro da interface na lateral esquerda, com essa opção podemos criar diversas páginas
📕 COVER
A página Cover é responsável por conter as informações de identificação rápida.
Nessa thumb contém as informações do card, como ícone da plataforma se ela é mobile e/ou desktop, o título resumido, número de identificação, funcionalidade, logo do produto e o responsável.
Abaixo vemos alguns exemplos de thumbnails e como podemos identificar a tarefa sem precisar abrir o arquivo.
🔍 DISCOVERY
A page Discovery tem uma função importante para tarefas específicas. Nesta página você pode colocar informações sobre a tarefa, adicionar insights originados de atividades com usuários, documentar dados coletados em analytics, fluxos de navegações atuais e todos os outros conteúdos que auxilia o entendimento do problema e indicar uma possível solução.
Aqui vale você colocar aquele fluxo antigo ou telas que sirvam para contextualizar sua tarefa e deixá-la completa.
💡 MOODBOARD
Nele pode adicionar referências externas ao seu time sobre como solucionaram problemas parecidos. As referências podem ir desde heurísticas a inspirações de sites como Behance e Dribbble ou algum produto que já tenha realizado com maestria.
📕 NEW COMPONENTES
Essa page no começo pode parecer desnecessária para você que está realizando a tarefa, mas ela tem a sua função. Nela podemos incluir novos componentes que precisarão ser construídos para atender a solução. Assim o time de engenharia conseguirá afinar a estimativa de prazo para a tarefa.
📰 DESIGN
Talvez a page mais importante, pois ela é sua entrega final para seu PM/PO. Pode ser projetada no formato que atender seu contexto, protótipo de baixa e alta fidelidade, wireframe etc. Aqui todas as telas da interface deverão ser transformadas em componentes para centralizar as modificações futuras. Para abordagens multiplataforma, projete a interface mobile ao lado do desktop para manter a consistência. As atualizações nesta página refletirão na navegação.
Essa página tem um link utilizável com as page de Navegation.
📦 STORAGE
O Storage serve como espaço para alocar as ideias da tarefa que não serão utilizadas, este ambiente preserva esses elementos, podendo ser consultado quando necessário.
Sabe aquele fluxo que você explorou, mas não vai fazer parte da sua entrega? Então essa página tem esse objetivo.
🚀 DESKTOP NAVIGATION
Esse é o ambiente ideal para construir protótipos navegáveis para plataformas desktop, traga as interfaces, mas antes transforme os frames das telas em componentes (papo para outro artigo) para que permaneçam na página de Design e atualizem automaticamente seu protótipo navegável.
No Figma, temos essa maravilhosa funcionalidade que permite fazer protótipos com interações e navegações, ajudando a validar ideias, servindo como base para apresentações.
Aviso importante! Sempre que possível deixe os frames alinhados horizontalmente para que na apresentação não fique nenhuma tela fora da ordem.
🚀 MOBILE NAVIGATION
Bom aqui temos o mesmo intuito da versão WEB, mas agora para construir protótipos navegáveis para plataformas mobile.
Conclusão
Por fim, as telas de validações de ideias são de suma importância para o desenvolvimento, pois com ela podemos pensar no visual e estruturas, contribuindo na apresentação ao cliente, ou até mesmo analisando se é possível realizar a implementação no código.
Dessa forma, é importante explorar a ferramenta e padronizar os cards facilitando as entregas e futuras alterações.
Texto: Gilson José dos Santos