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

# Förhandsgranska Flowstep-designs som interaktiva prototyper

> Öppna vilken Flowstep-fil som helst som en klickbar prototyp — Flowstep länkar dina skärmar automatiskt, och du kan ange eller låsa navigering manuellt per element.

Flowstep kan omvandla skärmarna i en fil till en klickbar prototyp. Klicka på **Preview** i redigeringsverktygsfältet och Flowstep öppnar en fullsides prototypspelare där du kan klicka dig igenom ditt flöde — användbar för att testa en användarresa eller presentera den för intressenter.

## Öppna en prototyp

<Steps>
  <Step title="Klicka på Preview">
    Klicka på **Preview** i redigeringsverktygsfältet. Prototypspelaren öppnas som en helsidesvy, separerad från redigeraren.
  </Step>

  <Step title="Låt Flowstep länka dina skärmar">
    Om filen har två eller flera skärmar länkar Flowstep automatiskt interaktiva element — knappar, kort, menyalternativ — till deras målskärmar när du öppnar förhandsvisningen (du ser "Bringing your screens to life" medan det fungerar). Länkarna genereras bara igen när dina skärmar har ändrats sedan senaste körningen.
  </Step>

  <Step title="Klicka dig igenom ditt flöde">
    Klicka på ett länkat element — en knapp, ett kort, ett menyalternativ — för att navigera till dess målskärm. Sidofältet listar alla skärmar i filen så du kan hoppa direkt till någon av dem, och **Back to editor** returnerar dig till filen.
  </Step>
</Steps>

<Note>
  Automatisk länkning kräver minst två skärmar i filen. Om länkgenereringen misslyckas använder du knappen **Retry** i spelaren.
</Note>

## Ange navigering manuellt

Du kan kontrollera exakt var ett element navigerar:

1. I redigeraren väljer du elementet (till exempel en knapp).
2. Öppna panelen **Navigation** i egenskapspanelen till höger.
3. Välj en målskärm från rullgardinen — eller välj **No navigation** för att ta bort länken.

För att förhindra att Flowsteps automatiska länkning skriver över en länk du ställer in själv klickar du på **Lock link** i panelen Navigation. Låsta länkningar lämnas orörda när länkarna genereras igen.

## Interaktiva kontroller

En prototyp är inte bara klickbar navigering — kontrollerna på skärmarna reagerar medan du förhandsgranskar. Vrid en växel, markera en kryssruta, välj ett alternativ för en radioknapp, välj från en rullgardin, växla mellan flikar, skriv i ett fält eller öka en räknare, och skärmen uppdateras live för att återspegla det nya tillståndet.

Skärmarna i en fil delar ett prototyptillstånd under en förhandsgranskningssession, så en ändring du gör på en skärm överförs när du klickar dig in i andra. Du kan också växla en skärm mellan ljus och mörk utseende för att se hur den svarar.

<Note>
  Interaktivt beteende genereras automatiskt från dina skärmar — det finns inget att ansluta. Förhandsgranska en fil för att prova det.
</Note>