Criar e gerenciar fluxos de protótipos

Antes de você começar

Quem pode usar este recurso

Disponível em todos os planos

Exige acesso de editor a um arquivo

Ao criar protótipos no Figma, você pode criar vários fluxos para testar diferentes partes da jornada de um usuário.

Um fluxo é uma coleção de estruturas conectadas que compõem uma única experiência de protótipo. Por exemplo, você pode criar um protótipo para um aplicativo de compras que inclua um fluxo para criação de conta, outro para itens de navegação e outro para o processo de pagamento, tudo em uma página.

Criar um fluxo de protótipo

Pontos de partida do fluxo

Um ponto de partida do fluxo é onde o fluxo começa. Os pontos de partida do fluxo são definidos em estruturas de nível superior.

Quando você adiciona uma conexão entre duas estruturas sem conexões existentes, o Figma cria um ponto de partida na estrutura de nível superior em que a conexão começou. Os pontos de partida do fluxo são mostrados no canvas com um ícone azul de visualização e o nome do fluxo.

Um quadro só pode ter um ponto de partida de fluxo.

Você também pode criar manualmente um ponto de partida de fluxo.

1. Selecione o quadro inicial.
2. Selecione a aba Protótipo na barra lateral direita.
3. Clique no sinal de mais na seção Ponto de partida do fluxo.

Para ver todos os pontos de partida do fluxo na página atual:

1. Desmarque todos os objetos clicando em uma parte vazia do canvas.
2. Selecione a aba Protótipo na barra lateral direita.
3. Na seção Fluxos, visualize uma lista de todos os pontos de partida da fluxo.
4. Passe o mouse sobre o nome de um fluxo e clique em Select frame para navegar até a estrutura em que o ponto inicial está localizado.

Adicionar ou remover quadros de um fluxo

Uma vez que você tenha um ponto de partida do fluxo, o restante do fluxo consiste em quaisquer estruturas que estejam conectadas ao ponto de partida com interações de prototipagem. Isso inclui estruturas que estão diretamente conectadas ao ponto de partida, bem como estruturas que estão conectadas por meio de outras interações.

Por exemplo, todas as estruturas roxas na imagem abaixo estão incluídas no Fluxo 1:

Para remover uma estrutura de um fluxo, remova todas as interações de protótipo que conectam a estrutura a outras estruturas no fluxo.

É possível incluir estruturas em vários fluxos. Por exemplo, a estrutura azul na imagem abaixo está incluída tanto no Fluxo 1 quanto no Fluxo 2:

Quando um usuário navega para uma estrutura que está incluída em vários fluxos, ele pode usar qualquer interação nessa estrutura. Isso abre o fluxo original para incluir todas as conexões dessa estrutura.

Gerenciar fluxos de protótipos

Editar nome do fluxo

Depois de criar um fluxo, o Figma o nomeará Fluxo 1 por padrão, e os fluxos adicionais serão Fluxo 2, Fluxo 3 e assim por diante. Você pode renomear um fluxo a qualquer momento.

Para renomear um fluxo:

1. Selecione o quadro inicial.
2. Selecione a aba Protótipo na barra lateral direita.
3. Na seção Flow starting point, selecione o campo do nome do fluxo.
4. Digite um novo nome para o fluxo.

Depois de renomeado, o nome do fluxo é exibido no ícone azul do ponto inicial do quadro e na barra lateral esquerda na  visualização da apresentação.

Adicionar a descrição do fluxo

Os nomes e descrições dos fluxos são exibidos na barra lateral esquerda na visualização da apresentação. Use descrições para fornecer instruções aos participantes do teste de usabilidade ou contexto e documentação adicionais para sua equipe. As descrições podem ser formatadas com texto em negrito, listas numeradas ou com marcadores e hiperlinks.

Para adicionar uma descrição de fluxo:

1. Selecione a estrutura com o ponto de partida do fluxo.
2. Selecione a aba Protótipo na barra lateral direita.
3. Na seção Flow starting point, clique em Edit description ao lado do nome do fluxo que deseja editar.
4. Adicione uma descrição de texto enriquecido.
5. Clique em X para sair do painel Description e salvar a descrição.

Depois de adicionada, a descrição é exibida na barra lateral esquerda na visualização da apresentação.

Mover ponto de partida do fluxo

Por padrão, o Figma usa a primeira conexão que você cria como ponto de partida do fluxo. Você pode mover um ponto de partida para outra estrutura.

1. Encontre o ícone azul do ponto de partida na tela.
2. Clique e arraste o nome do fluxo para uma nova estrutura inicial.

Excluir ponto de partida do fluxo

Para excluir um ponto de partida do fluxo:

1. Selecione a estrutura com o ponto de partida do fluxo.
2. Selecione a aba Protótipo na barra lateral direita.
3. Na seção Flow starting point, clique em Remove starting point.

Reproduzir e compartilhar fluxos de protótipos

Pré-visualizar fluxos

Você pode visualizar seus fluxos de protótipo diretamente no editor, com uma visualização em linha.

1. Desmarque todos os objetos clicando em uma parte vazia do canvas.
2. Selecione a aba Protótipo na barra lateral direita.
3. Na seção Flows, visualize uma lista de todos os fluxos.
4. Passe o mouse sobre o nome de um fluxo e clique em Preview para abrir a visualização em linha.

Na visualização em linha, navegue pelo seu fluxo acionando cada interação do protótipo.

Copiar e compartilhar links de fluxo

Você pode compartilhar fluxos de protótipos com outras pessoas para obter feedback sobre fluxos ou jornadas de usuários específicos. Quando você compartilha um fluxo de protótipo, os usuários podem reproduzir o protótipo na visualização da apresentação. Na visualização da apresentação, os usuários também podem selecionar qualquer outro fluxo para reproduzir.

No canvas:

1. Selecione a estrutura com o ponto de partida do fluxo.
2. Selecione a aba Protótipo na barra lateral direita.
3. Passe o mouse ao lado do cabeçalho Flow starting point.
4. Clique em Copy link.

Da visualização da apresentação:

1. Selecione o fluxo que você deseja compartilhar na barra lateral esquerda.
2. Clique em Share prototype na barra de ferramentas.
3. Clique em Copy link.