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

# Télécharger les conceptions Flowstep en tant que fichiers JPG ou PNG

> Flowstep permet d'exporter les conceptions en JPG ou PNG. Découvrez quel format convient à votre cas d'usage et comment télécharger vos écrans en quelques clics.

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

Lorsque vous êtes prêt à partager ou à confier une conception, Flowstep vous permet de l'exporter en tant qu'image statique — soit un JPG ou un PNG. Les deux formats sont largement pris en charge dans les outils de conception, les logiciels de présentation et les navigateurs, vous pouvez donc apporter vos conceptions générées par IA où vous en avez besoin.

## Comment exporter votre conception

<Steps>
  <Step title="Ouvrir votre conception">
    Accédez à la conception que vous souhaitez exporter dans Flowstep.
  </Step>

  <Step title="Ouvrir le menu d'export">
    Localisez l'option d'export dans la barre d'outils ou le panneau de conception. Sélectionnez-la pour ouvrir les paramètres d'export.
  </Step>

  <Step title="Choisir votre format">
    Sélectionnez soit **JPG** ou **PNG** selon votre cas d'usage (voir la comparaison ci-dessous).
  </Step>

  <Step title="Télécharger le fichier">
    Confirmez votre sélection et téléchargez l'image exportée sur votre appareil.
  </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 : quel format utiliser ?

|                       | JPG                                                                          | PNG                                                                 |
| --------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| **Idéal pour**        | Partager des aperçus, des présentations, des révisions des parties prenantes | Conceptions avec arrière-plans transparents, remises haute fidélité |
| **Taille du fichier** | Plus petit — plus rapide à partager par courriel ou messagerie               | Plus grand — conserve tous les détails de l'image                   |
| **Transparence**      | Non pris en charge                                                           | Pris en charge                                                      |
| **Qualité**           | Légèrement compressé                                                         | Sans perte — aucune réduction de qualité                            |

<Tip>
  Si vous collez votre conception dans un diaporama ou envoyez un aperçu rapide à un client, JPG est généralement le bon choix. Si vous avez besoin de bords nets ou d'un arrière-plan transparent — par exemple, pour superposer la conception sur une autre image — utilisez PNG.
</Tip>

## Export de code

Au-delà des images, le bouton **Code** exporte un écran en tant que code React + Tailwind — copiez un extrait ou téléchargez l'ensemble complet en tant que ZIP. Les bundles sont autonomes : les images utilisées dans la conception (y compris celles que vous avez jointes dans le panneau de discussion) sont incluses dans un dossier `public/assets/` avec le code les référençant par chemin local, donc l'export fonctionne tel quel.

Les fichiers téléchargés — images et bundles de code — sont nommés d'après l'écran auquel ils appartiennent (en revenant au nom du fichier si l'écran n'est pas nommé), ce qui facilite l'identification des exports lorsque vous travaillez avec plusieurs écrans.

<Note>
  Si vous avez besoin de prendre votre conception dans un workflow d'édition vectorielle, copiez-la directement dans Figma à la place. Voir [Copier les conceptions Flowstep dans Figma instantanément](/fr-CA/figma-integration).
</Note>