> ## 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.

# Bekijk Flowstep-ontwerpen als interactieve prototypes

> Open elk Flowstep-bestand als een klikbaar prototype — Flowstep koppelt je schermen automatisch, en je kunt navigatie per element handmatig instellen of vergrendelen.

Flowstep kan de schermen in een bestand in een klikbaar prototype veranderen. Klik op **Preview** in de editorbalk en Flowstep opent een fullscreen-prototypespeler waar je door je flow kunt klikken — handig om een gebruikerstraject te testen of aan belanghebbenden te presenteren.

## Open een prototype

<Steps>
  <Step title="Klik op Preview">
    Klik in de editorbalk op **Preview**. De prototypespeler opent in een fullscreen-weergave, apart van de editor.
  </Step>

  <Step title="Laat Flowstep je schermen koppelen">
    Als je bestand twee of meer schermen heeft, koppelt Flowstep interactieve elementen — knoppen, kaarten, menu-items — automatisch aan hun doelschermen wanneer je het voorbeeld opent (je ziet "Bringing your screens to life" terwijl dit gebeurt). Koppelingen worden alleen opnieuw gegenereerd als je schermen sinds de laatste keer zijn gewijzigd.
  </Step>

  <Step title="Klik door je flow">
    Klik op een gekoppeld element — een knop, een kaart, een menu-item — om naar het doelscherm te navigeren. De zijbalk toont alle schermen in het bestand, zodat je direct naar elk daarvan kunt springen, en **Back to editor** brengt je terug naar het bestand.
  </Step>
</Steps>

<Note>
  Automatische koppeling vereist minstens twee schermen in het bestand. Als het genereren van koppelingen mislukt, gebruik je de **Retry**-knop in de speler.
</Note>

## Navigatie handmatig instellen

Je kunt exact bepalen waar een element naar navigeert:

1. In de editor selecteer je het element (bijvoorbeeld een knop).
2. Open het **Navigation**-paneel in het eigenschappenpaneel aan de rechterkant.
3. Kies een doelscherm in het keuzemenu — of kies **No navigation** om de koppeling te verwijderen.

Om te voorkomen dat Flowstep's automatische koppeling een zelf ingestelde koppeling overschrijft, klik je op **Lock link** in het Navigation-paneel. Vergrendelde koppelingen blijven ongewijzigd wanneer koppelingen opnieuw worden gegenereerd.

## Interactieve besturingselementen

Een prototype is niet alleen klikbare navigatie — de besturingselementen op je schermen reageren terwijl je preview. Zet een schakelaar aan, vink een selectievakje aan, kies een radiooptie, selecteer iets uit een vervolgkeuzelijst, wissel tussen tabbladen, typ in een veld of verhoog een teller, en het scherm werkt live bij om de nieuwe status weer te geven.

Schermen in een bestand delen één prototype-status tijdens een preview-sessie, dus een wijziging die je op één scherm aanbrengt, volgt mee wanneer je naar andere schermen klikt. Je kunt ook een scherm tussen licht en donker uiterlijk schakelen om te zien hoe dit reageert.

<Note>
  Interactief gedrag wordt automatisch gegenereerd op basis van je schermen — er hoeft niets te worden bekraad. Preview een bestand om het uit te proberen.
</Note>