De Figma au code : React, Vue et frameworks CSS chez MarkupGen

L'une des décisions les plus chronophages dans n'importe quel hand-off de design n'est pas de savoir si le design est réussi — c'est de savoir sur quelle stack le code généré doit tourner. Une équipe React a besoin de JSX avec des props typées, une équipe Vue a besoin d'un vrai Single File Component, et une landing page statique n'a peut-être besoin d'aucun framework. MarkupGen ne vous enferme pas dans une seule stack de sortie pour chaque projet — le framework de sortie est un choix propre à chaque export, sur la base du même design Figma.

Comment fonctionne la conversion

Avant d'en arriver au choix du framework, MarkupGen traite le design en quatre étapes :

1. Exportez la frame depuis Figma. Le plugin Figma de MarkupGen envoie la structure, les styles et les images de la frame sélectionnée directement dans votre workspace — pas une capture d'écran qu'il faudrait reconstruire à l'œil.
2. L'IA construit le HTML/CSS à partir du design réel. La mise en page, l'espacement, la couleur et l'Auto Layout sont lus directement depuis le fichier Figma, pas devinés de façon générique.
3. Choisissez votre format de sortie. C'est là que vous choisissez le framework : HTML/CSS pur, React, Vue, Svelte, Angular, et pour le CSS spécifiquement Tailwind, Bootstrap, Bulma, Materialize ou Pico.
4. Affinez, puis exportez. Ajustez le contenu, les polices et la mise en page dans l'éditeur visuel avant de récupérer le code final, avec un score de qualité IA automatique pour savoir si l'export est prêt.

Parce que la structure et le style sont lus une seule fois depuis le design source, vous pouvez changer de format de sortie à l'étape 3 sans reconstruire le design à chaque fois.

Exporter vers React

Choisissez React et MarkupGen construit un composant fonctionnel avec du JSX, en TypeScript (TSX) ou en JavaScript pur (JSX) selon un réglage au moment de l'export. Les props sont typées, et les styles peuvent être exportés en CSS Modules plutôt qu'en styles inline si vous avez besoin d'un scope par composant plutôt que d'une seule feuille de style partagée. L'Auto Layout de Figma est mappé directement sur Flexbox dans les styles du composant, si bien que vous obtenez un composant dont la structure responsive est déjà en place, et non un simple bloc HTML statique avec des props ajoutées après coup. Pour un aperçu complet du workflow, voir Figma to React : un workflow pratique pour les développeurs.

Exporter vers Vue

Choisissez Vue et le résultat est un vrai Single File Component Vue 3 (.vue), qui utilise defineProps pour la déclaration des props et conserve la structure <template>/<script>/<style> que suivent déjà la plupart des bases de code Vue existantes. Comme pour React, la mise en page générée à partir de l'Auto Layout de Figma conserve sa structure Flexbox dans les styles du composant, et vous pouvez toujours définir le nom du composant et basculer entre TypeScript et JavaScript pur depuis le même écran d'export. Consultez la page de conversion Figma vers Vue pour en savoir plus sur le contenu d'un export Vue.

Svelte et Angular aussi

Au-delà de React et Vue, MarkupGen exporte aussi vers Svelte (4/5) et Angular (17+, sous forme de composant autonome) — utile si votre équipe n'utilise aucune des deux stacks les plus courantes mais souhaite quand même un composant plutôt que du HTML statique.

Les frameworks CSS livrés avec chaque composant

Si vous n'avez pas besoin du composant d'un framework JS particulier, vous pouvez exporter directement en HTML/CSS et choisir un framework CSS dans la configuration de votre projet : CSS pur, Tailwind, Bootstrap, Bulma, Materialize ou Pico. L'IA remappe la mise en page sur la grille, l'espacement et les conventions de classes propres à ce framework, plutôt que de coller une classe générique en vous laissant corriger ensuite. Pour un comparatif détaillé des compromis entre les six — poids du résultat, fidélité au design, courbe d'apprentissage — voir Les 6 frameworks CSS pris en charge par MarkupGen.

Que choisir pour votre projet

• Vous travaillez dans une base de code React ou Vue existante ? Exportez directement en composants React ou Vue, associés à Tailwind ou à des CSS Modules selon les conventions de votre équipe.
• Besoin d'une simple page statique sans bundler ? HTML/CSS pur ou Pico — aucune dépendance à l'exécution.
• Besoin d'une interface fonctionnelle rapidement, avec des composants prêts à l'emploi (navbars, modals, formulaires) ? Bootstrap ou Materialize.
• Votre équipe utilise Svelte ou Angular ? Les deux s'exportent sous forme de vrais composants, pas quelque chose que vous convertissez à la main depuis du HTML.

Il n'y a pas de bonne réponse unique valable pour tous les projets — l'essentiel est que MarkupGen vous laisse choisir le framework à chaque export, sur le même design source, plutôt que de vous enfermer dans une seule stack. Essayez-le gratuitement sur votre propre fichier Figma pour voir le code correspondant à la stack que vous utilisez réellement.