Skip to main content
O Flowstep pode transformar as telas de um arquivo em um protótipo clicável. Clique em Preview (visualização) na barra de ferramentas do editor e o Flowstep abre um player de protótipo em página inteira onde você pode clicar através do seu fluxo — útil para testar uma jornada do usuário ou apresentá-la aos interessados.

​
Abrir um protótipo

1

Clique em Preview

Na barra de ferramentas do editor, clique em Preview. O player de protótipo abre como uma visualização em página inteira, separada do editor.
2

Deixe o Flowstep vincular suas telas

Se seu arquivo tiver duas ou mais telas, o Flowstep vincula automaticamente elementos interativos — botões, cards, itens de menu — a suas telas de destino quando você abre a visualização (você verá “Bringing your screens to life” enquanto funciona). Os links são regenerados apenas quando suas telas foram alteradas desde a última execução.
3

Clique através do seu fluxo

Clique em qualquer elemento vinculado — um botão, um card, um item de menu — para navegar para sua tela de destino. A barra lateral lista todas as telas no arquivo para que você possa pular para qualquer uma delas diretamente, e Back to editor (voltar ao editor) retorna você ao arquivo.
A vinculação automática requer pelo menos duas telas no arquivo. Se a geração de links falhar, use o botão Retry (tentar novamente) no player.

​
Definir navegação manualmente

Você pode controlar exatamente para onde um elemento navega:
  1. No editor, selecione o elemento (por exemplo, um botão).
  2. Abra o painel Navigation (navegação) no painel de propriedades à direita.
  3. Escolha uma tela de destino na lista suspensa — ou selecione No navigation (sem navegação) para remover o link.
Para impedir que a vinculação automática do Flowstep sobrescreva um link que você definiu, clique em Lock link (bloquear link) no painel Navigation. Os links bloqueados não são alterados quando os links são regenerados.

​
Controles interativos

Um protótipo não é apenas navegação clicável — os controles em suas telas respondem enquanto você visualiza. Alterne um switch, marque uma checkbox, escolha uma opção de rádio, selecione de um dropdown, mude entre abas, digite em um campo, ou incremente um contador, e a tela se atualiza em tempo real para refletir o novo estado. As telas em um arquivo compartilham um estado de protótipo durante uma sessão de visualização, então uma mudança que você faz em uma tela carrega quando você clica para outras. Você também pode alternar uma tela entre aparência clara e escura para ver como ela responde.
O comportamento interativo é gerado automaticamente a partir de suas telas — não há nada para configurar. Visualize um arquivo para tentar.