Flows: Conheça a nova funcionalidade do Figma

Flows: Conheça a nova funcionalidade do Figma
Mateus Villain
Mateus Villain

Compartilhe

Se você usa o Figma, sabe que ele traz constantes atualizações para melhorar e otimizar a construção de interfaces. Recentemente, eles trouxeram uma nova funcionalidade que alguns de seus concorrentes, como Adobe XD e Sketch, já possuíam: os Flows. Anteriormente, só poderíamos ter um único ponto de início, que normalmente era página inicial ou a página de login. Agora, por meio dessa nova funcionalidade já implementada, podemos ter duas ou mais entradas num único projeto, permitindo que você crie diversos fluxos de navegação no seu produto.

Como usar os flows

Selecionando um frame qualquer, e indo ao menu Prototype na barra da direita, clique no ícone “+” na opção Flow starting point. Neste mesmo frame, irá aparecer a identificação, que por padrão do Figma, aparecerá como Flow 1, Flow 2, e daí por diante, e só com essa ação, você já definiu um novo fluxo navegacional.

Interface do site da Alura versão para celulares, com uma flecha apontando para a o ponto em que está circulado o menu “Prototype”, e logo abaixo, o botão com símbolo de “mais” para criar um flow #inset

A partir do momento que você executar o projeto para navegação, já irá se deparar com uma interface reformulada, onde a principal novidade está localizada na barra da esquerda, mostrando todos os Flows criados no seu projeto.

Para trocar de um fluxo para outro, basta só clicar em alguma das outras opções.

Nova visualização de navegação do protótipo do Figma. Na esquerda ficam todos os flows criados, e na direita, a interface selecionada #inset

Para ter uma gestão melhor dos seus Flows e editá-los para melhorar a identificação, basta voltar ao ambiente de criação e selecionar novamente o menu “Prototype”. Para cada Flow que você criou, ao passar o mouse, aparecerão três opções:

  • Selecionar o frame (Select frame)
  • Copiar o link (Copy link)
  • Apresentar (Present)
Visualização das opções de edição dos flows. No menu “Prototype”, a terceira seção chama-se “Flows”, mostrando a lista de todos já criados, e mostrando as opções que aparecem ao passar o mouse sobre o item #inset

A primeira opção leva você à interface que você selecionou como ponto inicial para esse Flow. Ela apresentará mudanças na barra da direita, como a opção para remover o Flow, clicando no ícone de menos (1), renomear (2), e adicionar ou editar a descrição (3), clicando no ícone de lápis.

Modo de configuração de um flow, enumerado em três itens. O primeiro é o botão com símbolo de “menos”, alinhado horizontalmente com o texto “Flow starting point”. O segundo é o título deste Flow, que ao clicar, é possível ser alterado. Na mesma linha, está o terceiro e último, que é a opção de editar, representado por um ícone de “lápis”. Clicando nesse botão, é aberta uma janela para adicionar ou alterar a descrição do flow #inset

A segunda e terceira opção são semelhantes. Ao copiar o link, você poderá acessar pelo navegador aquele determinado Flow com mais praticidade ou compartilhar com alguém. Ao apresentar, você executará a navegação no mesmo instante, independente da plataforma que esteja usando, seja o Figma pelo navegador, ou pelo programa instalado.

Banner da promoção da black friday, com os dizeres: A Black Friday Alura está chegando. Faça parte da Lista VIP, receba o maior desconto do ano em primeira mão e garanta bônus exclusivos. Quero ser VIP

E aí, o que achou da atualização?

Eu, particularmente, gostei muito. Com certeza, vai facilitar ainda mais para construir novas interfaces com diversos fluxos.

Se quiser ler mais sobre essa atualização, você pode acessar o site do Figma e conhecer a atualização a partir das próprias palavras da equipe.

E, para ir ainda mais além, temos uma formação maravilhosa de Figma aqui na Alura, pra você ficar “profissa” na construção de interfaces digitais.

A gente se vê na próxima, valeu 😉

Mateus Villain
Mateus Villain

Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.

Veja outros artigos sobre UX & Design