Passer au contenu principal
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 — JPG ou 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 de transférer vos designs générés par l’IA n’importe où.

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 conception. Sélectionnez-la pour ouvrir les paramètres d’export.
3

Choisir votre format

Sélectionnez JPG ou PNG selon votre cas d’utilisation (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 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.

Export de code

Au-delà des images, le bouton Code exporte votre design en code React + Tailwind — copiez un extrait ou téléchargez l’ensemble complet sous forme de 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 mise en place entre les écrans est intégrée dans le code généré, ce qui rend l’application exportée entièrement cliquable. Les ensembles sont autonomes : les images utilisées dans le design (y compris celles que vous avez jointes au panneau de chat) sont incluses dans un dossier public/assets/ avec le code les référençant par chemin d’accès local, afin que l’export fonctionne tel quel. Les fichiers téléchargés — images et ensembles de code — sont nommés d’après l’écran auquel ils appartiennent (revenant au nom du fichier si l’écran n’a pas de nom), ce qui facilite l’identification des exports lorsque vous travaillez avec de nombreux écrans.

Envoyer les designs à votre agent de codage

Au lieu de télécharger un fichier, vous pouvez remettre 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 crée 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 transférer un seul écran, plusieurs écrans sélectionnés ou un fichier entier en une seule fois — le prompt s’adapte à votre sélection. Cela utilise le serveur MCP Flowstep, alors 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 utiliser votre design dans un flux de travail d’édition vectorielle, copiez-le directement dans Figma. Consultez Copier les designs Flowstep dans Figma instantanément.