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

# Flowstep-ontwerpen downloaden als JPG- of PNG-afbeeldingsbestanden

> Flowstep ondersteunt het exporteren van ontwerpen als JPG of PNG. Lees welk formaat bij jouw gebruiksgeval past en hoe je je schermen in een paar klikken downloadt.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.49.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=b9d31a01c99bae3d325fdbfee34529dc" alt="Screenshot 2026 05 06 At 14 19 49" width="1824" height="1388" data-path="images/Screenshot-2026-05-06-at-14.19.49.png" />
</Frame>

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

<Steps>
  <Step title="Open je ontwerp">
    Navigeer naar het ontwerp dat je in Flowstep wilt exporteren.
  </Step>

  <Step title="Open het exportmenu">
    Zoek de exportoptie in de werkbalk of het ontwerppaneel. Selecteer het om de exportinstellingen te openen.
  </Step>

  <Step title="Kies je indeling">
    Selecteer ofwel **JPG** ofwel **PNG** afhankelijk van je gebruiksgeval (zie de vergelijking hieronder).
  </Step>

  <Step title="Download het bestand">
    Bevestig je selectie en download de geëxporteerde afbeelding naar je apparaat.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.39.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=8f3132e26a9a759315dd87a7a624fe00" alt="Screenshot 2026 05 06 At 14 19 39" width="1828" height="1522" data-path="images/Screenshot-2026-05-06-at-14.19.39.png" />
</Frame>

## JPG versus PNG: welke indeling moet je gebruiken?

|                         | JPG                                                           | PNG                                                                   |
| ----------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------- |
| **Meest geschikt voor** | Voorbeelden delen, presentaties, evaluaties door stakeholders | Ontwerpen met transparante achtergronden, gedetailleerde overdrachten |
| **Bestandsgrootte**     | Kleiner — sneller te delen via e-mail of berichten            | Groter — behoudt volledige afbeeldingsdetails                         |
| **Transparantie**       | Niet ondersteund                                              | Ondersteund                                                           |
| **Kwaliteit**           | Licht gecomprimeerd                                           | Verliesvrij — geen kwaliteitsverlies                                  |

<Tip>
  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.
</Tip>

## Codeexport

Naast afbeeldingen exporteert de **Code**-knop een scherm als React + Tailwind-code — kopieer een fragment, of download de volledige bundel als ZIP. 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.

<Note>
  Als je je ontwerp in een vector-bewerkingswerkstroom wilt brengen, kopieer het dan rechtstreeks naar Figma. Zie [Flowstep-ontwerpen direct naar Figma kopiëren](/nl/figma-integration).
</Note>
