> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Pré-visualizar designs Flowstep como protótipos interativos

> Abre qualquer ficheiro Flowstep como um protótipo clicável — Flowstep liga os teus ecrãs automaticamente, e podes definir ou bloquear a navegação manualmente por elemento.

O Flowstep consegue transformar os ecrãs de um ficheiro num protótipo clicável. Clica em **Preview** na barra de ferramentas do editor e o Flowstep abre um leitor de protótipo de página completa onde podes clicar através do teu fluxo — útil para testar uma jornada do utilizador ou apresentá-la a stakeholders.

## Abre um protótipo

<Steps>
  <Step title="Clica Preview">
    Na barra de ferramentas do editor, clica em **Preview**. O leitor de protótipo abre como uma vista de página completa, separada do editor.
  </Step>

  <Step title="Deixa o Flowstep ligar os teus ecrãs">
    Se o teu ficheiro tem dois ou mais ecrãs, o Flowstep liga automaticamente elementos interativos — botões, cartões, itens de menu — aos seus ecrãs de destino quando abres a pré-visualização (verás "Bringing your screens to life" enquanto funciona). As ligações são regeneradas apenas quando os teus ecrãs mudaram desde a última execução.
  </Step>

  <Step title="Clica através do teu fluxo">
    Clica em qualquer elemento ligado — um botão, um cartão, um item de menu — para navegar para o seu ecrã de destino. A barra lateral lista todos os ecrãs no ficheiro para que possas ir para qualquer um diretamente, e **Back to editor** leva-te de volta ao ficheiro.
  </Step>
</Steps>

<Note>
  A ligação automática precisa de pelo menos dois ecrãs no ficheiro. Se a geração de ligações falhar, utiliza o botão **Retry** no leitor.
</Note>

## Define navegação manualmente

Podes controlar exatamente para onde um elemento navega:

1. No editor, selecciona o elemento (por exemplo, um botão).
2. Abre o painel **Navigation** no painel de propriedades à direita.
3. Escolhe um ecrã de destino a partir do menu pendente — ou escolhe **No navigation** para remover a ligação.

Para impedir que a ligação automática do Flowstep sobrescreva uma ligação que tu próprio definiste, clica em **Lock link** no painel Navigation. As ligações bloqueadas são deixadas intocadas quando as ligações são regeneradas.

## Controlos interativos

Um protótipo não é apenas navegação clicável — os controlos nos teus ecrãs respondem enquanto previsualizas. Faz flip num comutador, marca uma caixa de seleção, escolhe uma opção de rádio, selecciona de um menu pendente, muda abas, digita num campo, ou incrementa um contador, e o ecrã actualiza-se em tempo real para reflectir o novo estado.

Os ecrãs num ficheiro partilham um estado de protótipo durante uma sessão de pré-visualização, portanto uma mudança que fazes num ecrã transmite-se enquanto clicas em outros. Também podes mudar um ecrã entre aparência clara e escura para veres como responde.

<Note>
  O comportamento interativo é gerado automaticamente a partir dos teus ecrãs — não há nada para ligar. Pré-visualiza um ficheiro para o experimentar.
</Note>