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

# Redigera och iterera på Flowstep-designs via chat eller canvas

> Förfina alla Flowstep-genererade skärmar genom manuell visuell redigering eller chattbaserade prompts — iterera så många gånger som behövs tills designen är korrekt.

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Flowstep-designs är fullt redigerbara efter generering. Du är inte låst till vad AI:n först producerar—du kan justera visuella element direkt i redigeraren, använda chat för att beskriva ändringar på vanlig svenska, eller be Flowstep att generera varianter och nya skärmar. Använd vilken metod som passar bäst för den ändring du vill göra.

## Två sätt att redigera

<Tabs>
  <Tab title="Manuell visuell redigering">
    Gör ändringar direkt på canvas genom att välja och ändra element. Den här metoden fungerar bäst för exakta justeringar—flytta en komponent, ändra en färg, uppdatera en etikett eller finjustera avstånd.

    <Steps>
      <Step title="Välj det element du vill ändra">
        Klicka på någon komponent eller lager i din design för att välja det.
      </Step>

      <Step title="Gör dina ändringar">
        Använd redigeringskontrollerna för att justera egenskaper som färg, storlek, position eller textinnehål.
      </Step>

      <Step title="Granska resultatet">
        Dina ändringar tillämpas omedelbar på canvas. Fortsätt redigering eller gå vidare till nästa skärm.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Chattbaserad redigering">
    Beskriv den ändring du vill ha på vanlig svenska och Flowstep uppdaterar designen för dig. Den här metoden är snabbare för breda eller strukturella ändringar—justera layouten, omtänka en sektion eller tillämpa en stilriktning.

    <Steps>
      <Step title="Öppna chattfönstret">
        Välj den skärm du vill redigera och öppna sedan chattinmatningen.
      </Step>

      <Step title="Beskriv din ändring">
        Skriv vad du vill att Flowstep ska uppdatera. Var specifik om vad som ska ändras och varför, om det hjälper.
      </Step>

      <Step title="Granska den uppdaterade designen">
        Flowstep tillämpar ändringen och visar dig resultatet. Om det inte är helt rätt, skicka ett följmeddelande för att förfina vidare.
      </Step>
    </Steps>

    Redigeringar och återgenereringar uppdaterar den valda skärmen **in place** istället för att lägga till en ny skärm — medan Flowstep streamar ändringen är elementet som den för närvarande arbetar på markerat med en grön streckad kant. Generering utan en vald skärm lägger istället till en ny skärm.
  </Tab>
</Tabs>

## Redigera bara en del av en skärm

Du behöver inte redigera hela skärmar. Välj ett underelement — ett kort, en knapp, en textetikett — och din chattompt tillämpas bara på det och lämnar resten av skärmen orördt.

* Byt till **Direct selection**-läge med **Shift+V** (eller listrutan på **Select**-verktygsfältsknappen) för att välja det djupaste elementet under klickningen. Tryck **V** för normal markering, eller håll **Cmd** (Mac) / **Ctrl** (Windows) för att använda direct selection tillfälligt. **Escape** avslutar direct selection.
* Välj underelement över flera skärmar med **Cmd+Shift** — en enda prompt kan redigera upp till 6 skärmar per meddelande.

När ett bildelement är valt (utanför wireframe-läge) visas en **Image**-panel i egenskapspanelen: förgranska bilden, byt den genom att dra en ny bildfil till förgranskningen eller klicka **Pick image**, eller spara den med **Download image**.

## Återställ en tidigare version

Varje AI-generering i chatthistoriken behåller sitt ursprungliga resultat. Om en skärm har redigerats eller tagits bort sedan den genererades, visar dess chattmeddelande en **Restore**-knapp — **Restore original** för att ångra redigeringar, eller **Restore** / **Restore all** för att få tillbaka raderade skärmar. Använd den för att återgå till ett känt bra tillstånd efter att en redigering gått i fel riktning.

## Åtgärder med ett klick

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

Utöver direkta redigeringar kan du be Flowstep att utforska alternativ:

* **Try again from scratch** — be Flowstep att producera en ny version av den aktuella skärmen med en annan layout eller visuell riktning.
* **Show the next screen** — be Flowstep att generera vad som logiskt kommer härnäst i användarflödet.
* **Make it pretty** — justera avstånd, justering och färger över designen. Layouten förblir densamma.

Dessa alternativ låter dig iterera snabbt utan att behöva skriva en prompt varje gång.

## Iterera för att förfina

Design landar sällan perfekt vid första försöket. Använd chattbaserad redigering för varje feedback-runda—beskriv vad som fungerar och vad som inte gör det, och Flowstep justerar därefter. Det finns ingen gräns för hur många gånger du kan iterera på en skärm.

<Tip>
  När du itererar via chat, referera till specifika element efter namn eller plats för att få mer exakta resultat. Till exempel: "Flytta call-to-action-knappen till botten av skärmen och gör den full-width" är mer effektiv än "fixa knappen."
</Tip>
