Figma
Last updated
Last updated
O Figma, um dos softwares de referência da indústria no momento para o desenho de vectorial é a ferramenta de eleição da equipa de UX do TicAPP para o desenho de protótipos. É através desta ferramenta que toda a equipa cria seja protótipos de baixa fidelidade (wireframes) ou de alta fidelidade.
Embora o desenho seja algo bastante pessoal, pois com o tempo cada designer vai definindo os seus próprios preceitos (e manias) é importante manter em toda a equipa uma utilização, organização e formatação padrão no que toca ao desenho. Para isso, definimos e listamos aqui alguns pontos importantes que não te podes esquecer de ter como referência quando estiveres a utilizar este software.
Se estás a começar agora a utilizar a ferramenta, tens um caminho incrível pela frente. Nós no TicAPP gostamos muito das potencialidades do software e queremos muito que consigas descobrir tudo aquilo que o programa tem para oferecer. Por isso mesmo, aqui te deixamos algumas sugestões de tutoriais.
Para facilitar a compreensão da estrutura adoptada na organização dos ficheiros em Figma, na equipa procuramos manter em todos os projetos uma abordagem coerente. Podendo, conforme a complexidade de cada projeto alterar um pouco esta estrutura, em todos eles seria importante manter alguma coerência e que aqui documentamos.
Existe no Figma a que tens acesso uma equipa denominada "TicAPP". É dentro desta equipa que deves criar um novo projeto de Figma com o nome do projeto que estás a realizar. Na equipa "TicAPP" podes também ter acesso ao trabalho que está a ser desenvolvido em todos os projetos do TicAPP.
Dentro do projeto que criaste deves então criar todos os ficheiros Figma que vais precisando para as várias áreas do produto que estiveres a construir. Depende bastante de cada projeto, mas pode ser uma boa prática, separar por diferentes a prototipagem dos ecrãs conforme as principais áreas do produto que estejas a criar.
Dentro deste projeto de Figma, deves garantir que para além dos vários ficheiros para cada uma das principais áreas do produto, tens também um ficheiro "Protótipos Alta-Fidelidade" e outro de "In Progress".
Dentro de cada um destes ficheiros devem estar sempre também as declinações responsive necessárias para a implementação da equipa de desenvolvimento e as eventuais interações que possam existir em cada ecrã a ilustração a experiência idealizada.
Estes ficheiros, ao lado de cada um dos protótipos de ecrã, podem também conter notas para clarificar alguma interação mais complexa ou outra informação relevante.
É dentro deste ficheiro que deves criar todos components transversais para utilização em todos os ficheiros de prototipagem, caso o Ágora ainda não o suporte, ou caso queiras facilitar a gestão de alterações e conteúdos nos componentes.. Este ficheiro é importante que seja publicado como uma library Figma para poder ser utilizados como biblioteca nos de mais ficheiros.
O ficheiro "In Progress" é o espaço de trabalho de cada um dos designers que estiver a participar no trabalho de prototipagem do projeto. É um ficheiro que deve ter por cada designer uma página "In Progress (primeiro e último nome do designer)" e outra página "Old (primeiro e último nome do designer)".
A página "In Progress" serve de área de desenho para aquilo que estiver em desenvolvimento em cada momento. Já a página "Old" serve para guardar elementos de desenho antigos ou que não tenham sido utilizados e que cada designer queira manter à mão.
Este ficheiro é para uso exclusivo dos designers e não deve em momento algum ser partilhado com ninguém na equipa de projeto.
A partilha de protótipos com a equipa de desenvolvimento é feita através dos ficheiros Figma das várias áreas do produto. Cada um destes ficheiros deve ser partilhado com a equipa de desenvolvimento onde poderão fazer o handoff de todos os elementos de UI presentes no protótipo. Deve ser também partilhado com a equipa de desenvolvimento também o ficheiro de "Design system" para que a equipa possa também fazer essa análise mais numa lógica de design tokens e componentes.
É absolutamente imprescindível, com excepção do ficheiro "In Progress" que as layers de desenho de todo e qualquer ficheiro estejam impecavelmente organizadas, para facilitar o trabalho não só da equipa de desenvolvimento mas também de qualquer designer que possa ter a necessidade de pegar em algum protótipo.
Para te ajudar na utilização do Figma no dia a dia, aqui te deixamos algumas recomendações simples, organizadas por temas, com algumas práticas da equipa e soluções que fomos encontrando ao longo do tempo para manter a consistência no desenho de protótipos.
