Naar hoofdinhoud gaan
Screenshot 2026 05 06 At 14 19 49
Als je klaar bent om een ontwerp te delen of over te dragen, stelt Flowstep je in staat het als een statische afbeelding te exporteren — ofwel een JPG ofwel een PNG. Beide indelingen worden veel ondersteund in ontwerphulpmiddelen, presentatiesoftware en browsers, dus je kunt je AI-gegenereerde ontwerpen overal meenemen waar je ze nodig hebt.

​
Hoe je je ontwerp exporteert

1

Open je ontwerp

Navigeer naar het ontwerp dat je in Flowstep wilt exporteren.
2

Open het exportmenu

Zoek de exportoptie in de werkbalk of het ontwerppaneel. Selecteer het om de exportinstellingen te openen.
3

Kies je indeling

Selecteer ofwel JPG ofwel PNG afhankelijk van je gebruiksgeval (zie de vergelijking hieronder).
4

Download het bestand

Bevestig je selectie en download de geëxporteerde afbeelding naar je apparaat.
Screenshot 2026 05 06 At 14 19 39

​
JPG versus PNG: welke indeling moet je gebruiken?

Als je je ontwerp in een diapresentatie plakt of snel een voorbeeld naar een cliënt stuurt, is JPG meestal de juiste keuze. Als je scherpe randen nodig hebt of een transparante achtergrond — bijvoorbeeld om het ontwerp op een ander afbeelding over te leggen — gebruik je PNG.

​
Codeexport

Naast afbeeldingen exporteert de Code-knop je ontwerp als React + Tailwind-code — kopieer een fragment, of download de volledige bundel als ZIP. Je kunt één scherm, meerdere geselecteerde schermen of een heel bestand tegelijk exporteren. Wanneer je meer dan één scherm exporteert, wordt elk zijn eigen componentbestand en is elke navigatie die je tussen schermen hebt ingesteld in de gegenereerde code opgenomen, dus de geëxporteerde app is van begin tot eind klikbaar. Bundels zijn zelfstandig: afbeeldingen die in het ontwerp worden gebruikt (inclusief afbeeldingen die je in het chatpaneel hebt bijgevoegd) zijn opgenomen in een public/assets/-map, waarbij de code ernaar verwijst via een lokaal pad, zodat de export ongewijzigd werkt. Gedownloade bestanden — zowel afbeeldingen als codebundels — worden genoemd naar het scherm waartoe ze behoren (terugvallend op de bestandsnaam als het scherm geen naam heeft), waardoor geëxporteerde bestanden gemakkelijk kunnen worden geïdentificeerd wanneer je met veel schermen werkt.

​
Ontwerpen naar je codeeringsagent sturen

In plaats van een bestand te downloaden, kun je een ontwerp rechtstreeks aan een AI-codeeringsassistent geven. Klik Send to your coding agent in de werkbalk — of open het exportdialoogvenster en kies dezelfde optie — om een kant-en-klaar-kopie-prompt voor je agent te kopiëren:
Je agent leest deze schermen via MCP en bouwt ze in je repo. Plak deze prompt in Claude, Cursor of je voorkeur agent.
De prompt vertelt je agent om de schermen via de Flowstep MCP-server op te halen en deze in je codebase opnieuw op te bouwen. Je kunt één scherm, meerdere geselecteerde schermen of een heel bestand in één keer afgeven — de prompt past zich aan wat je hebt geselecteerd. Dit gebruikt de Flowstep MCP-server, dus verbind eerst een MCP-client. Zie het MCP-serveroverzicht voor ondersteunde clients en de Snelstart om er één aan te sluiten.
Als je je ontwerp in een vector-bewerkingswerkstroom wilt brengen, kopieer het dan rechtstreeks naar Figma. Zie Flowstep-ontwerpen direct naar Figma kopiëren.