> ## 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-Designs als JPG- oder PNG-Bilddateien herunterladen

> Flowstep unterstützt den Export von Designs als JPG oder PNG. Erfahren Sie, welches Format für Ihren Anwendungsfall geeignet ist und wie Sie Ihre Screens in wenigen Klicks herunterladen.

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

Wenn Sie bereit sind, ein Design freizugeben oder abzugeben, können Sie es in Flowstep als statisches Bild exportieren – entweder als JPG oder PNG. Beide Formate werden umfassend von Design-Tools, Präsentationssoftware und Browsern unterstützt, sodass Sie Ihre KI-generierten Designs überall hin mitnehmen können.

## So exportieren Sie Ihr Design

<Steps>
  <Step title="Öffnen Sie Ihr Design">
    Navigieren Sie zum Design, das Sie exportieren möchten, in Flowstep.
  </Step>

  <Step title="Öffnen Sie das Exportmenü">
    Suchen Sie die Exportoption in der Symbolleiste oder im Design-Panel. Wählen Sie diese aus, um die Exporteinstellungen zu öffnen.
  </Step>

  <Step title="Wählen Sie Ihr Format">
    Wählen Sie entweder **JPG** oder **PNG**, je nach Ihrem Anwendungsfall (siehe den Vergleich unten).
  </Step>

  <Step title="Laden Sie die Datei herunter">
    Bestätigen Sie Ihre Auswahl und laden Sie das exportierte Bild auf Ihr Gerät herunter.
  </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 vs. PNG: Welches Format sollten Sie verwenden?

|                  | JPG                                                       | PNG                                                        |
| ---------------- | --------------------------------------------------------- | ---------------------------------------------------------- |
| **Best for**     | Freigaben, Präsentationen, Stakeholder-Reviews            | Designs mit transparentem Hintergrund, hochwertige Abgaben |
| **File size**    | Kleiner – schneller freizugeben per E-Mail oder Messaging | Größer – behält vollständige Bilddetails bei               |
| **Transparency** | Nicht unterstützt                                         | Unterstützt                                                |
| **Quality**      | Leicht komprimiert                                        | Verlustfrei – keine Qualitätsreduzierung                   |

<Tip>
  Wenn Sie Ihr Design in eine Präsentation einfügen oder schnell eine Vorschau an einen Kunden senden, ist JPG normalerweise die richtige Wahl. Wenn Sie scharfe Kanten oder einen transparenten Hintergrund benötigen – beispielsweise um das Design auf einem anderen Bild zu überlagern –, verwenden Sie PNG.
</Tip>

## Code exportieren

Über die Schaltfläche **Code** können Sie einen Screen als React + Tailwind-Code exportieren – kopieren Sie ein Snippet oder laden Sie das vollständige Bundle als ZIP herunter. Bundles sind in sich abgeschlossen: Bilder, die im Design verwendet werden (einschließlich solcher, die Sie im Chat-Panel angehängt haben), sind in einem Ordner `public/assets/` enthalten, wobei der Code auf sie nach lokalem Pfad verweist, sodass der Export so funktioniert.

Heruntergeladene Dateien – sowohl Bilder als auch Code-Bundles – werden nach dem Screen benannt, zu dem sie gehören (fallback auf den Dateinamen, wenn der Screen unbenannt ist), was die Identifizierung von Exporten beim Arbeiten mit vielen Screens erleichtert.

<Note>
  Wenn Sie Ihr Design in einen Vektor-Bearbeitungsworkflow mitnehmen müssen, kopieren Sie es stattdessen direkt in Figma. Siehe [Flowstep-Designs sofort in Figma kopieren](/de/figma-integration).
</Note>