Blog

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