Guide utilisateur MarkupGen
Tout ce qu'il faut savoir pour transformer vos designs Figma en code prêt pour la production — fonctionnalités, forfaits, limites, et comment obtenir les meilleurs résultats.
Bienvenue sur MarkupGen
Ce qu'est MarkupGen, à qui il s'adresse, et ce qui le distingue.
Qu'est-ce que MarkupGen ?
MarkupGen est une plateforme qui transforme des designs Figma en code front-end prêt pour la production. Un plugin Figma dédié exporte le frame sur lequel vous travaillez ; MarkupGen le convertit en HTML et CSS, et — sur les forfaits payants — en composant React, Vue, Svelte ou Angular. Un éditeur intégré à double mode (éditeur de code plus un Visual Editor de type « cliquer pour modifier ») vous permet d'affiner le résultat avant l'export.
À qui ça s'adresse
Aux développeurs front-end et freelances qui préfèrent ne pas retranscrire manuellement chaque mise en page à partir d'un fichier de design, aux petites agences qui doivent convertir rapidement les designs de leurs clients en pages fonctionnelles, et à quiconque conçoit un modèle d'e-mail HTML devant s'afficher correctement dans Gmail, Outlook et Apple Mail.
Le problème qu'il résout
Transformer un fichier Figma en code fonctionnel à la main est répétitif et il est facile de faire des erreurs subtiles. La conversion de base de MarkupGen s'appuie sur un moteur prévisible, basé sur des règles, piloté par les noms de vos calques Figma et les réglages d'Auto Layout, de sorte qu'un même design se convertit toujours de la même façon. Un ensemble ciblé de fonctionnalités IA vient ensuite s'ajouter — pour l'interactivité, les variantes responsives, la notation qualité et les corrections en un clic — exactement là où l'IA apporte une vraie valeur ajoutée.
Principaux cas d'usage
- Convertir un unique frame ou composant Figma en une page HTML autonome.
- Produire une landing page responsive qui s'adapte du bureau au mobile.
- Générer un modèle d'e-mail HTML avec styles en ligne pour une compatibilité multi-clients.
- Exporter un design en composant React, Vue, Svelte ou Angular pour l'intégrer à votre propre codebase (forfaits payants).
- Constituer, avec les Templates, une bibliothèque personnelle ou d'équipe de points de départ réutilisables.
Prise en main
De la création d'un compte à l'examen de votre première page générée.
- 1
Créer un compte
Inscrivez-vous avec Google en un clic, ou avec un e-mail et un mot de passe. Le parcours par e-mail nécessite de résoudre une rapide vérification et de confirmer votre adresse e-mail avant de pouvoir vous connecter.
- 2
Se connecter
Utilisez la même méthode que celle utilisée à l'inscription. Cinq tentatives de mot de passe échouées verrouillent votre compte pendant 15 minutes — utilisez « Mot de passe oublié » pour le réinitialiser par e-mail à tout moment.
- 3
Explorer votre tableau de bord
Votre tableau de bord affiche un bouton Créer depuis Figma, le nombre de vos projets et votre score qualité IA moyen, un lanceur Quick Convert, et vos projets récemment mis à jour.
- 4
Comprendre les Workspaces
Chaque projet vit dans un Workspace — un espace partagé pour vous et vos coéquipiers. Dans un projet, vous pouvez basculer entre le Code Editor (tous les forfaits) et le Visual Editor (Starter, Pro, Business).
- 5
Créer votre premier projet
Installez le plugin MarkupGen depuis la Figma Community, ouvrez-le dans Figma, sélectionnez un frame ou un composant, puis cliquez sur Export & Send.
Un nouveau projet apparaît sur votre tableau de bord MarkupGen.
- 6
Lancer votre première conversion
Ouvrez le nouveau projet et cliquez sur Generate Code. Observez la progression pendant que MarkupGen se connecte aux données de votre design, analyse les calques, extrait les images et rédige le HTML/CSS.
Une page HTML/CSS fonctionnelle, ainsi qu'un score qualité automatique de 0 à 10.
- 7
Examiner le résultat
Utilisez l'onglet Code pour un éditeur HTML/CSS/JS en vue scindée, ou le panneau Preview pour vérifier les vues Desktop (1280px), Tablet (768px) et Mobile (375px).
- 8
Exporter votre code
Téléchargez du HTML/CSS brut sur n'importe quel forfait. Les forfaits payants permettent d'exporter un composant pour un framework unique, ou tous les frameworks à la fois sous forme d'un pack ZIP.
Fonctionnalités principales
Chaque fonctionnalité du produit, le forfait qu'elle nécessite, et son fonctionnement.
Import via le plugin Figma
Exporte un unique frame, composant ou groupe sélectionné dans Figma — y compris les icônes vectorielles en vrai SVG, les images d'arrière-plan, les polices et la structure Auto Layout.
Installez-le depuis la Figma Community, connectez-vous une fois, sélectionnez un frame, puis cliquez sur Export & Send.
Un frame par export — il n'existe pas encore d'import multi-frames ou de page entière en lot.
Code Editor
Un éditeur de code professionnel en vue scindée pour votre HTML, CSS et JS générés, avec coloration syntaxique et mise en forme automatique.
Visual Editor
Modifiez directement sur l'aperçu en direct : inspectez les éléments, modifiez les styles par glisser-déposer, éditez le texte en ligne, gérez les liens en toute sécurité, et affichez/masquez des éléments avec des transitions.
Nécessite un abonnement payant actif, vérifié côté serveur.
Conversion sémantique des éléments par IA
Transforme des blocs de mise en page statiques en véritables contrôles de formulaire interactifs — boutons, champs de saisie, zones de texte, listes déroulantes — grâce à l'IA.
Trois niveaux de précision :
Analyse la structure HTML actuelle, le style, et l'image d'aperçu.
Recoupe les informations avec le design d'origine pour une précision accrue.
Analyse structurelle complète pour classifier avec précision les composants complexes.
JavaScript & composants interactifs par IA
Détecte les schémas d'interface — sliders, carrousels, accordéons, fenêtres modales, onglets, validation de formulaire — et génère le JS et le CSS fonctionnels correspondants.
Générateur de mise en page responsive par IA
Restructure une conversion desktop en une mise en page optimisée pour une autre taille d'écran, avec un aperçu avant/après côte à côte.
Prend en charge deux directions cibles — mobile et desktop — avec un point de rupture configurable (320–2000px).
Notation qualité & comparaison par IA
Note votre code généré de 0 à 10 par rapport au design d'origine, sur six critères pondérés : Mise en page, Espacement, Typographie, Couleur, Contenu et Détails.
Convention de couleurs du score
Excellent
Correspond au design d'origine de façon quasi parfaite.
Bon
Globalement proche, avec quelques différences notables.
À améliorer
Différences importantes par rapport au design d'origine.
Correction intelligente en 1 clic
Applique des correctifs ciblés générés par IA pour les écarts relevés par le score qualité, sans perturber le reste de votre code.
Validation automatique de la syntaxe et du code
Inspecte et corrige les problèmes de syntaxe HTML/CSS générés avant l'enregistrement.
Traitement prioritaire haute vitesse
Limites de génération par minute et par jour plus élevées, avec un traitement plus rapide sur le forfait Business.
Export de composant
Télécharge votre design généré en HTML/CSS brut, en composant pour un seul framework, ou en pack multi-frameworks complet.
React (JSX/TSX), Vue 3 SFC, Svelte 5, ou Angular Standalone, plus un pack ZIP et une option de test pour client e-mail.
Sortie framework CSS
Génère votre CSS dans l'un des six styles suivants : Vanilla, Tailwind, Bootstrap, Bulma, Materialize ou Pico CSS.
Vanilla, Tailwind et Bootstrap sont disponibles sur tous les forfaits. Bulma, Materialize et Pico CSS nécessitent un forfait payant.
Modes de sortie
Page web standard (conversion directe en Flexbox/Grid), Mise en page responsive (multi-écrans fluide), ou Modèle d'e-mail (tableaux avec CSS en ligne pour Gmail, Outlook et Apple Mail).
Le mode Modèle d'e-mail ne peut pas reproduire la rotation, les modes de fusion non standards, ni les effets d'ombre ou de flou — ces éléments sont simplifiés ou rendus sous forme d'image à la place.
Templates
Marque n'importe lequel de vos propres projets comme Template réutilisable, visible dans une galerie consultable pour votre workspace.
Flux de travail Figma vers code
Comment préparer, convertir et vérifier un design de bout en bout.
Un Figma propre en entrée, un code propre en sortie
Ce n'est pas juste un encouragement — c'est ainsi que le moteur fonctionne. Les balises HTML sémantiques, les libellés accessibles et les niveaux de titres sont déduits directement des noms de vos calques Figma et de la structure Auto Layout. Un fichier avec des noms descriptifs et un Auto Layout cohérent se convertira nettement mieux qu'un fichier plein de formes non groupées portant des noms par défaut comme « Rectangle 4 ».
Préparer votre fichier Figma
Nommez les calques selon ce qu'ils représentent — « Header », « Bouton Ajouter au panier », « Image Hero » — et non selon les noms générés automatiquement par Figma. Utilisez l'Auto Layout autant que possible : les frames en Auto Layout se convertissent directement en CSS Flexbox, tandis que les frames sans Auto Layout sont exportés comme des blocs de taille fixe. Gardez chaque frame nettement en dessous d'environ 2 000 calques et 120 mégapixels de surface rendue — découpez les designs volumineux en frames plus petits.
Importer
L'export s'effectue via le plugin Figma, un frame, composant ou groupe à la fois. Il n'existe actuellement aucun moyen d'importer plusieurs frames ou une page entière en une seule action — convertissez chaque frame en tant que projet MarkupGen distinct.
Options de configuration
Choisissez votre mode de sortie (Page web standard, Mise en page responsive, ou Modèle d'e-mail), votre framework CSS (Vanilla, Tailwind et Bootstrap sur tous les forfaits ; Bulma, Materialize et Pico CSS sur les forfaits payants), et un format d'image pour les assets exportés (Original, PNG, AVIF, WebP, ou JPG).
Vérifier le HTML généré
Le moteur produit de vraies balises sémantiques — header, nav, main, footer, aside, article, section — déduites des noms de vos calques, avec des niveaux de titres déduits de la taille et de la graisse de la police. Les boutons contenant uniquement une icône reçoivent de vrais libellés ARIA, les images de contenu reçoivent un texte alternatif descriptif, et les images décoratives ou vectorielles reçoivent correctement un attribut alt vide avec aria-hidden.
Vérifier le CSS
Les frames en Auto Layout deviennent du Flexbox avec un gap, un padding et un alignement correspondants. Les frames sans Auto Layout conservent les dimensions et la position en pixels fixes de votre fichier Figma.
Comportement responsive
La conversion de base reproduit votre frame Figma à une taille fixe unique — elle n'est pas automatiquement responsive. Pour une mise en page qui s'adapte selon les appareils, choisissez le mode de sortie Responsive ou utilisez le Générateur de mise en page responsive par IA (directions mobile et desktop).
Typographie, couleurs, espacement, images et icônes
Les niveaux de titres sont déduits de la taille et de la graisse de la police. Les couleurs sont lues directement à partir de vos remplissages Figma. L'espacement suit le gap, le padding et l'alignement de l'Auto Layout, ou les positions fixes lorsque l'Auto Layout n'est pas utilisé. Les images sont exportées dans le format choisi ; les icônes sont extraites en vrai SVG dans la mesure du possible, les remplissages ou masques complexes étant rendus sous forme de compositions PNG.
Composants, mise en page et contraintes
Les composants et ensembles de composants Figma sont lus lors de l'export, mais MarkupGen ne reconstruit pas actuellement une définition de composant partagée et réutilisable par composant Figma — chaque conversion est une page ou un fragment autonome. La mise en page provient de l'Auto Layout et des boîtes englobantes absolues ; les réglages de contraintes de Figma (ancrage gauche/droite, mise à l'échelle) ne sont actuellement ni lus ni reproduits.
HTML sémantique, accessibilité et SEO
Le HTML sémantique et l'accessibilité sont des fonctionnalités réelles et implémentées, décrites ci-dessus et dans Fonctionnalités principales. La sortie SEO n'est pas incluse — MarkupGen n'ajoute pas de titre de page, de meta description, de balises Open Graph, ni de données structurées au code qu'il génère. Ajoutez cela vous-même une fois le résultat intégré à votre projet.
Ce qui influence la précision, et comment obtenir le meilleur résultat
La qualité du nommage des calques Figma est le levier le plus important pour un résultat sémantique et accessible, suivi de l'usage de l'Auto Layout, de la complexité du frame, et du fait que votre design utilise ou non des effets que le mode de sortie choisi peut reproduire (le mode Modèle d'e-mail en particulier ne peut pas reproduire la rotation, les modes de fusion ou les ombres).
Qualité du résultat
Ce que MarkupGen contrôle, ce qui dépend de votre design source, et ce qui est mesuré.
Ce que MarkupGen contrôle
- Le moteur de conversion et les heuristiques de balises sémantiques
- La génération de libellés accessibles et de textes alternatifs
- Les couches IA de notation, correction, responsive et JS (forfaits payants)
Ce que votre design source contrôle
- La qualité du nommage des calques Figma
- L'usage de l'Auto Layout
- La complexité du frame et l'usage d'effets
Précision et fidélité visuelle
Mesurée automatiquement par le score qualité IA (forfaits payants) : de 0 à 10 sur les critères Mise en page, Espacement, Typographie, Couleur, Contenu et Détails. Il n'existe pas de pourcentage de précision global distinct — la qualité dépend du design.
Structure et sémantique HTML
De véritables balises sémantiques et niveaux de titres, en fonction du caractère descriptif du nommage de vos calques Figma.
Qualité et maintenabilité du CSS
Basé sur Flexbox pour les frames en Auto Layout, en position fixe pour le reste. La maintenabilité dépend du framework CSS choisi, du style de nommage des classes, et du nommage des calques.
Comportement responsive, accessibilité et préparation SEO
La mise en page responsive s'active via le mode de sortie Responsive. L'accessibilité inclut de vrais libellés ARIA et textes alternatifs générés automatiquement. Les métadonnées SEO ne sont pas incluses — ajoutez les vôtres après l'export.
Langues prises en charge
L'interface est disponible en dix langues.
English, Tiếng Việt, Français, 中文 (简体), 日本語, हिन्दी, Italiano, Español, ไทย, et Русский. L'anglais est la langue par défaut ; l'application ne change pas automatiquement de langue selon celle de votre navigateur, de sorte qu'un lien partagé s'ouvre toujours dans la langue prévue.
Changez de langue depuis Réglages → Langue. MarkupGen convertit tel quel le texte présent dans vos calques Figma — la disponibilité des fonctionnalités est entièrement régie par votre forfait, pas par la langue de votre interface.
Forfaits & Tarifs
Tous les chiffres ci-dessous proviennent directement de la configuration de facturation.
| Fonctionnalité | Free | Starter | Pro | Business |
|---|---|---|---|---|
| Prix | $0 | $10 / mois | $20 / mois | $100 / mois |
| Générations de code | 5 / mois | 50 / jour | 150 / jour | 1 000 / jour |
| Nouveaux projets | 10 / mois | 100 / jour | 300 / jour | 2 000 / jour |
| Limite de vitesse de génération | 2 req/min | 10 req/min | 20 req/min | 60 req/min, modèle IA plus rapide |
| Frameworks CSS | Vanilla, Tailwind, Bootstrap | Les 6 frameworks | Les 6 frameworks | Les 6 frameworks |
| Visual Editor | Non inclus | Inclus | Inclus | Inclus |
| Notation qualité & corrections par IA | Non inclus | Inclus | Inclus | Inclus |
| Export de composant | HTML / CSS uniquement | 1 framework à la fois | Tous les frameworks + Export Studio | Tous les frameworks + Export Studio |
| Assistance | Communauté | Assistance par e-mail | Assistance par e-mail prioritaire | Assistance dédiée en tête-à-tête |
Tous les forfaits payants sont facturés mensuellement uniquement — il n'y a pas d'option annuelle. Les frais ne sont pas remboursables, sauf disposition légale contraire. Payez par carte via Stripe ou Lemon Squeezy, ou par QR code de virement bancaire instantané vietnamien via SePay.
Forfait Free
Idéal pour essayer le produit ou une conversion occasionnelle : 5 conversions assistées par IA par mois, téléchargement HTML/CSS brut, et CSS Vanilla, Tailwind ou Bootstrap. Le Visual Editor, la notation qualité par IA et l'export de framework ne sont pas inclus.
Forfaits payants
Starter convient aux créateurs solo et aux projets freelance. Pro ajoute le pack Export Studio complet pour les professionnels et les petites agences gérant plusieurs projets clients. Business offre le volume le plus élevé et le traitement le plus rapide pour les équipes. Passez à un forfait supérieur lorsque vous atteignez votre plafond de génération, avez besoin du Visual Editor ou de la notation qualité, ou avez besoin d'un vrai composant de framework plutôt que du HTML brut.
Crédits, usage & limites
MarkupGen n'utilise pas un système de crédits par points — il utilise un simple compteur de générations par forfait.
- Comment c'est comptabilisé — une action « Generate Code » équivaut à une unité de votre quota de générations.
- Cadence de réinitialisation — Free se réinitialise au mois calendaire ; chaque forfait payant se réinitialise quotidiennement.
- Report — aucun ; le quota inutilisé ne se reporte pas sur la période suivante.
- Expiration — le quota se réinitialise simplement à chaque période ; il n'expire pas en cours de période.
Quota de création de projets
Distinct du quota de générations, et toujours exactement le double de la limite de générations de votre forfait pour la même période (par exemple, Free : 10 projets/mois ; Pro : 300 projets/jour). Si vous êtes exactement à votre limite, un projet supplémentaire peut tout de même être enregistré afin que vous ne perdiez jamais votre travail — mais il est placé dans un état Quota Locked et ne peut pas générer de code tant que vous ne passez pas à un forfait supérieur ou que la période ne se réinitialise. Supprimer un projet ne libère pas de quota pour cette période.
| Limites par export | |
|---|---|
| Nombre de calques par frame Figma | ~2 000 calques par export |
| Surface d'export du frame Figma | ~120 mégapixels |
| Taille totale d'upload par export | 50 Mo |
| Délai d'expiration de l'upload du plugin | 3 minutes |
| Longueur des instructions IA personnalisées | 3 000 caractères |
Compte & abonnement
Ce que vous pouvez modifier vous-même, et comment fonctionne la facturation.
Réglages du compte
Depuis Réglages, vous pouvez modifier votre profil, changer votre mot de passe (cela fonctionne même si vous vous êtes inscrit avec Google — vous pouvez y définir un mot de passe pour la première fois), gérer votre forfait et votre facturation, et changer de langue.
Passer à un forfait supérieur
Effectuez la mise à niveau depuis la page Tarifs. Les mises à niveau s'appliquent immédiatement avec une facturation au prorata.
Rétrograder
Depuis Réglages → Facturation, planifiez un passage vers un forfait payant inférieur, qui prend effet à la fin de votre période de facturation en cours, sans remboursement partiel. Starter n'a pas de forfait payant inférieur vers lequel rétrograder.
Annuler
Pour annuler votre abonnement, contactez support@markupgen.com. Si vous êtes sur Pro ou Business, vous pouvez aussi, en attendant, planifier une rétrogradation vers un forfait payant inférieur depuis Réglages → Facturation.
Facturation & paiement
Payez par carte via Stripe ou Lemon Squeezy, ou par QR code de virement bancaire instantané vietnamien via SePay (fenêtre de 15 minutes).
Remboursements
Tous les frais ne sont pas remboursables, sauf disposition légale contraire. Il n'existe pas de garantie de remboursement distincte.
Suppression de compte
Il n'existe pas encore de bouton en libre-service « Supprimer mon compte ». Vous pouvez demander la suppression de votre compte et de ses données à tout moment en écrivant à support@markupgen.com.
Sécurité & confidentialité
Résumé de la politique de confidentialité, des conditions d'utilisation et de la conception de l'authentification de MarkupGen.
Quelles données sont collectées
Votre nom, votre e-mail et vos identifiants de compte, ainsi que uniquement les frames Figma spécifiques que vous exportez explicitement — MarkupGen n'a pas d'accès permanent à l'ensemble de votre compte Figma. Des données techniques de base (IP, navigateur, appareil) sont collectées via des cookies.
Vos designs et votre code généré
Vous conservez les droits sur les designs Figma et le contenu que vous importez. MarkupGen n'utilise pas vos designs privés pour entraîner des modèles d'IA destinés à d'autres clients.
Conservation et suppression des données
Les données sont conservées tant que votre compte est actif, ou selon les besoins légaux, comptables ou de sécurité. Vous pouvez demander leur suppression à tout moment via support@markupgen.com.
Sécurité du compte
Les mots de passe sont hachés ; la connexion et l'inscription nécessitent toutes deux une vérification CAPTCHA ; cinq tentatives de connexion échouées verrouillent un compte pendant 15 minutes ; la vérification par e-mail est requise pour les comptes créés par mot de passe. L'authentification à deux facteurs et la gestion des sessions actives ne sont pas encore disponibles.
Services tiers
Stripe et Lemon Squeezy pour les paiements par carte, SePay pour les virements bancaires vietnamiens, et Google Analytics pour l'analyse d'usage.
Dépannage
Problème, cause probable et solution — organisés par catégorie.
Problèmes de conversion
Generate Code est grisé ou refusé.
→ Vous avez atteint la limite de générations ou de création de projets de votre forfait, ou le projet est en Quota Locked suite à un dépassement antérieur.
Attendez votre prochaine réinitialisation, ou passez à un forfait supérieur — la mise à niveau débloque immédiatement les projets verrouillés.
L'export depuis le plugin Figma échoue ou expire.
→ Le frame dépasse environ 2 000 calques ou 120 mégapixels, ou l'upload a dépassé la limite de 3 minutes.
Découpez le frame en morceaux plus petits et exportez-les séparément.
Le résultat semble générique, avec de simples div et des textes alternatifs peu utiles.
→ Vos calques Figma utilisent encore des noms par défaut comme « Rectangle 4 » ou « Group ».
Renommez les calques de façon descriptive et réexportez.
Problèmes de sortie
La rotation, les ombres ou les effets de fusion sont absents d'un export Email.
→ Les clients e-mail ne peuvent pas restituer ces effets de façon fiable, donc le mode Modèle d'e-mail les simplifie ou les rend sous forme d'image.
Utilisez le mode Standard ou Responsive si vous avez besoin de ces effets en vrai CSS.
La mise en page ne s'adapte pas à la taille de l'écran.
→ La conversion de base reproduit une taille fixe unique.
Choisissez plutôt le mode de sortie Responsive.
Problèmes d'authentification
Impossible de se connecter.
→ Cinq tentatives échouées verrouillent le compte pendant 15 minutes, ou votre e-mail n'est pas encore vérifié.
Attendez 15 minutes, ou vérifiez votre boîte de réception (et vos spams) pour l'e-mail de vérification.
Mot de passe oublié.
Utilisez « Mot de passe oublié » sur la page de connexion ; le lien de réinitialisation est valable une heure.
Problèmes de paiement
Un paiement par virement bancaire SePay reste bloqué « en attente ».
→ Le QR code expire après 15 minutes.
Consultez la page de statut de la commande, ou relancez le paiement s'il a expiré.
Un paiement par carte échoue.
→ La carte a été refusée ou les informations ont été saisies incorrectement.
Vérifiez les informations de votre carte auprès de votre banque, ou essayez l'autre fournisseur de paiement. Contactez l'assistance si vous avez été débité mais que votre forfait n'a pas été mis à jour.
Problèmes d'abonnement
Aucun bouton « Annuler l'abonnement ».
→ Ce n'est pas encore un contrôle en libre-service.
Écrivez à support@markupgen.com pour annuler.
Aucune option de rétrogradation sur le forfait Starter.
→ Starter est le forfait payant le plus bas.
C'est normal — il n'y a rien de plus bas vers lequel rétrograder dans l'application.
Problèmes de téléchargement & d'export
L'export de framework (React/Vue/Svelte/Angular) est verrouillé.
→ L'export d'un framework unique nécessite n'importe quel forfait payant.
Passez à Starter ou un forfait supérieur.
Export Studio est verrouillé, même sur Starter.
→ Le pack tous-frameworks nécessite spécifiquement Pro ou Business.
Passez à Pro.
Bonnes pratiques
Des habitudes concrètes qui améliorent mesurablement la qualité de conversion.
- Utilisez l'Auto Layout partout où c'est possible — c'est le facteur le plus déterminant entre un CSS fluide et des blocs en position fixe.
- Nommez les calques en langage clair — « Header », « Bouton Ajouter au panier », « Image Hero » — le moteur lit ces noms pour choisir les balises HTML, les libellés ARIA et les textes alternatifs.
- Regroupez les éléments liés dans un seul frame en Auto Layout plutôt que de les laisser en formes flottantes, positionnées de façon absolue.
- Utilisez des tailles de police cohérentes et intentionnelles pour distinguer les titres du texte courant — les niveaux de titres en sont déduits.
- Gardez les images de contenu et les éléments décoratifs visuellement distincts — MarkupGen les traite déjà différemment dans le résultat.
- Choisissez votre mode de sortie en amont. Ne comptez pas sur le fait qu'une conversion en mode Standard devienne responsive après coup — démarrez avec le mode Responsive si la destination doit fonctionner sur mobile.
- Évitez de vous reposer sur les contraintes Figma pour le comportement de redimensionnement — elles ne sont pas reproduites ; reconstruisez ce comportement avec l'Auto Layout à la place.
- Pour une sortie e-mail, évitez la rotation, les modes de fusion, et les effets d'ombre ou de flou — ils ne survivront pas au rendu des clients e-mail.
- Vérifiez toujours les vues Desktop, Tablet et Mobile dans Preview avant d'exporter, et lancez le score qualité IA (forfaits payants) pour une lecture précise et pondérée de ce qu'il faut corriger.
- Prévoyez d'ajouter vos propres métadonnées SEO après l'export — MarkupGen ne génère pas de balises title, de meta descriptions, ni de données structurées.
FAQ
Basée sur le comportement réel et vérifié du produit.
Limites du produit
Ce que MarkupGen fait bien, et ce qu'il ne fait pas encore.
Ce que MarkupGen fait bien
Convertit un frame Figma bien structuré et basé sur l'Auto Layout en HTML/CSS propre et sémantiquement balisé, rapidement et de façon prévisible, avec des couches IA optionnelles pour l'interactivité, la réactivité, la notation qualité et les corrections en un clic.
Ce qu'il ne fait pas
Reconstruire automatiquement les données de prototype ou d'interaction Figma ; respecter le redimensionnement basé sur les contraintes Figma (ancrage, mise à l'échelle) ; importer plusieurs frames ou une page entière en une seule action ; ajouter des métadonnées SEO au code généré ; ou exporter une définition de composant partagée et réutilisable par composant Figma.
Où le résultat peut nécessiter une édition manuelle
Des calques Figma génériques ou non nommés produisant un balisage générique ; des effets visuels complexes en mode Modèle d'e-mail ; une interactivité allant au-delà des schémas reconnus par la fonctionnalité de suggestion JS par IA.
Limites techniques
Consultez Crédits, usage & limites pour les chiffres exacts — environ 2 000 calques, 120 mégapixels et 50 Mo par export, un délai d'expiration d'upload de 3 minutes, et un plafond de 3 000 caractères pour les instructions IA personnalisées.
Glossaire
Le vocabulaire utilisé tout au long de ce guide.
- Frame
- Un conteneur de premier niveau dans Figma — à peu près un écran ou une section. MarkupGen exporte un frame, composant ou groupe à la fois.
- Auto Layout
- La fonctionnalité intégrée de Figma pour l'empilement responsive ; MarkupGen la fait correspondre directement au CSS Flexbox.
- Contraintes
- Les règles de redimensionnement par ancrage et mise à l'échelle de Figma, antérieures à l'Auto Layout ; non lues actuellement par MarkupGen.
- Conversion / Génération
- Une exécution de « Generate Code » sur un projet — l'unité dans laquelle le quota de votre forfait est mesuré.
- Projet
- Un unique export Figma suivi dans votre tableau de bord, dont vous êtes propriétaire au sein d'un Workspace.
- Workspace
- Un espace d'équipe partagé auquel appartiennent les projets ; l'adhésion comporte un rôle qui contrôle les permissions.
- Template
- N'importe lequel de vos propres projets marqué pour réutilisation dans la galerie Templates de votre workspace.
- Export
- Le téléchargement du code généré en HTML/CSS brut, en composant pour un seul framework, ou en pack multi-frameworks complet.
- Abonnement
- Votre forfait payant mensuel récurrent — Starter, Pro ou Business.
- Quota Locked
- Un projet créé après que vous avez déjà atteint la limite de création de votre forfait — enregistré, mais incapable de générer du code tant que vous ne passez pas à un forfait supérieur ou que la période ne se réinitialise.
Aide-mémoire de démarrage rapide
De Figma au code prêt pour la production.
- 1Installez le plugin MarkupGen depuis la Figma Community.
- 2Sélectionnez un frame Figma propre, bien nommé, en Auto Layout.
- 3Export & Send depuis le plugin (connectez-vous une fois via le navigateur).
- 4Ouvrez le nouveau projet sur votre tableau de bord.
- 5Choisissez votre mode de sortie et votre framework CSS, puis cliquez sur Generate Code.
- 6Examinez le résultat dans Preview et vérifiez le score qualité IA (forfaits payants).
- 7Corrigez manuellement dans le Code Editor, ou passez à un forfait supérieur pour le Visual Editor et la correction intelligente en 1 clic.
- 8Exportez en HTML/CSS, ou en composant de framework sur un forfait payant, puis intégrez-le à votre projet.
Prêt à accélérer votre flux de travail design-vers-code ?
Démarrez gratuitement dès aujourd'hui, ou passez à un forfait supérieur pour le Visual Editor, la notation qualité par IA et l'export complet des frameworks.