Skip to main content
Screenshot 2026 05 06 At 14 19 49
Lorsque vous êtes prêt à partager ou à transférer un design, Flowstep vous permet de l’exporter en tant qu’image statique — en JPG ou en PNG. Les deux formats sont largement pris en charge par les outils de conception, les logiciels de présentation et les navigateurs, ce qui vous permet d’utiliser vos designs générés par IA où vous en avez besoin.

​
Comment exporter votre design

1

Ouvrir votre design

Accédez au design que vous souhaitez exporter dans Flowstep.
2

Ouvrir le menu d'export

Localisez l’option d’export dans la barre d’outils ou le panneau de design. Sélectionnez-la pour ouvrir les paramètres d’export.
3

Choisir votre format

Sélectionnez JPG ou PNG selon votre cas d’usage (voir la comparaison ci-dessous).
4

Télécharger le fichier

Confirmez votre sélection et téléchargez l’image exportée sur votre appareil.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG : quel format devez-vous utiliser ?

Si vous collez votre design 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 le design sur une autre image — utilisez PNG.

​
Code d’export

Au-delà des images, le bouton Code exporte votre design en tant que code React + Tailwind — copiez un extrait ou téléchargez le bundle complet en ZIP. Vous pouvez exporter un seul écran, plusieurs écrans sélectionnés ou un fichier entier à la fois. Lorsque vous exportez plusieurs écrans, chacun devient son propre fichier de composant et toute navigation que vous avez configurée entre les écrans est intégrée au code généré, ce qui rend l’application exportée cliquable d’un bout à l’autre. Les bundles sont autonomes : les images utilisées dans le design (y compris celles que vous avez jointes dans le panneau de chat) sont incluses dans un dossier public/assets/ avec le code les référençant par chemin local, ce qui fait que l’export fonctionne tel quel. Les fichiers téléchargés — les images et les bundles de code — sont nommés d’après l’écran auquel ils appartiennent (en revenant au nom du fichier si l’écran n’a pas de nom), ce qui facilite l’identification des exports lorsque vous travaillez avec plusieurs écrans.

​
Envoyer les designs à votre agent de codage

Au lieu de télécharger un fichier, vous pouvez transmettre un design directement à un assistant de codage IA. Cliquez sur Send to your coding agent dans la barre d’outils — ou ouvrez la boîte de dialogue d’export et choisissez la même option — pour copier un prompt prêt à coller pour votre agent :
Votre agent lit ces écrans via MCP et les construit dans votre dépôt. Collez ce prompt dans Claude, Cursor ou votre agent préféré.
Le prompt indique à votre agent de récupérer les écrans via le serveur MCP Flowstep et de les reconstruire dans votre base de code. Vous pouvez transmettre un seul écran, plusieurs écrans sélectionnés ou un fichier entier à la fois — le prompt s’adapte à votre sélection. Cela utilise le serveur MCP Flowstep, donc connectez d’abord un client MCP. Consultez l’aperçu du serveur MCP pour les clients pris en charge et le Guide de démarrage rapide pour en connecter un.
Si vous devez traiter votre design dans un flux de travail d’édition vectorielle, copiez-le directement dans Figma à la place. Consultez Copier les designs Flowstep dans Figma instantanément.