Hoppa till huvudinnehåll
Screenshot 2026 05 06 At 14 19 49
När du är redo att dela eller överlämna en design kan Flowstep exportera den som en statisk bild – antingen en JPG eller en PNG. Båda formaten stöds allmänt i designverktyg, presentationsprogram och webbläsare, så du kan ta dina AI-genererade designer vart som helst du behöver.

​
Så exporterar du din design

1

Öppna din design

Navigera till den design du vill exportera i Flowstep.
2

Öppna exportmenyn

Hitta exportalternativet i verktygsfältet eller designpanelen. Välj det för att öppna exportinställningarna.
3

Välj ditt format

Välj antingen JPG eller PNG beroende på ditt användningsfall (se jämförelsen nedan).
4

Ladda ner filen

Bekräfta ditt val och ladda ner den exporterade bilden till din enhet.
Screenshot 2026 05 06 At 14 19 39

​
JPG eller PNG: vilket format ska du använda?

Om du klistrar in din design i en bildspelsdäck eller skickar en snabb förhandsgranskning till en klient är JPG vanligtvis rätt val. Om du behöver skarpa kanter eller en transparent bakgrund – till exempel för att lägga designen på en annan bild – använd PNG.

​
Exportkod

Utöver bilder exporterar Code-knappen din design som React + Tailwind-kod — kopiera ett kodutsnitt eller hämta hela paketet som en ZIP-fil. Du kan exportera en enskild skärm, flera valda skärmar eller en hel fil på en gång. När du exporterar mer än en skärm blir var och en sin egen komponentfil och all navigering du har ställt in mellan skärmarna kopplas in i den genererade koden, så den exporterade appen är klickbar från början till slut. Paket är fristående: bilder som används i designen (inklusive de du bifogade i chattfönstret) ingår i en public/assets/-mapp med kod som refererar till dem via lokal sökväg, så exporten fungerar direkt. Hämtade filer — både bilder och kodpaket — namnges efter den skärm de tillhör (eller filen om skärmen är namnlös), vilket gör det enkelt att identifiera exporter när du arbetar med många skärmar.

​
Skicka designs till din kodningsagent

I stället för att hämta en fil kan du skicka en design direkt till en AI-kodningsassistent. Klicka på Send to your coding agent i verktygsfältet — eller öppna exportdialogen och välj samma alternativ — för att kopiera en färdig prompt för din agent:
Din agent läser dessa skärmar via MCP och bygger dem i din repo. Klistra in denna prompt i Claude, Cursor eller din föredragna agent.
Prompten instruerar din agent att hämta skärmarna via Flowstep MCP-servern och bygga om dem i din kodvase. Du kan överlämna en enskild skärm, flera valda skärmar eller en hel fil på en gång — prompten anpassas till det du har valt. Detta använder Flowstep MCP-servern, så anslut först en MCP-klient. Se MCP-serveröversikten för klienter som stöds och Snabbstart för att ansluta en.
Om du behöver ta din design till ett vektoredigeringsarbetsflöde kopierar du den istället direkt in i Figma. Se Kopiera Flowstep-designs till Figma omedelbar.