Desenho de Telas e Fluxo de Uso com Figma

O Figma é um editor gráfico de vetor e prototipagem de projetos. Ele pode ser usado para desenhar as telas do produto e fluxo de uso, antes de iniciar o desenvolvimento. Assim é possível coletar feedback de outros times e também passar melhor formatado para o desenvolvedor Frontend.

Figma da iTFLEX

Utilizamos a versão Free do Figma, que possui algumas limitações como quantidade de projetos e páginas por arquivos, mas que já é suficiente para nossas demandas.

Para acessar nosso ambiente, realize login no Figma com sua conta Google da iTFLEX. PM e POs possuem acesso de Admin no projeto Engenharia e podem conceder acesso para edição e visualização para os demais envolvidos. Com todos os devidos acessos, o Figma deve aparecer como na imagem abaixo.

Projeto Engenharia

Para cada nova funcionalidade desenhada, deve ser criado um novo arquivo, referenciando sempre o ticket da feat no nome. Pode ser criado uma página para cada story. Em cada página pode ser desenhado todas as telas envolvidas (listagem, detalhes, edição, cadastros, etc), uma embaixo da outra, deixando claro o fluxo de uso. Caso a feat tenha muitas stories, considere quebrar os desenhos em mais arquivos para não ficar desorganizado dentro do limite de 3 páginas.

Edição

A iTFLEX possui um arquivo de componentes, para facilitar desenho (copia e cola) e evitar retrabalho. Caso seja necessário desenhar um novo componente, este deve ser disponibilizado também no arquivo de componentes para desenhos futuros. Para tomar como base, é possível buscar modelos/kits do Figma na internet baseados no Material Design. Alguns exemplos são o Material Design da Google e o Vuetify UI Kit. Estes kits não possuem todos os componentes da iTFLEX, mas servem como base. Ícones podem ser encontrados em https://materialdesignicons.com/ .

Publicação

O arquivo deve ser compartilhada para visualização (sem edição) para qualquer pessoa com o link. O link deve ser anexado ao ticket no Redmine. O desenvolvedor Frontend irá consultar o desenho das telas através do link anexado no ticket.