De Figma à Bulma CSS : guide pratique de conversion

Bulma occupe une position particulière face à Bootstrap ou Tailwind : c'est un framework de composants complet, mais entièrement piloté par classes — sans JavaScript embarqué, sans étape de build. Cela en fait une cible propre pour un export depuis Figma, mais convertir une maquette à la main vers le vocabulaire de classes spécifique de Bulma demande toujours de bien connaître sa grille, son espacement et ses modificateurs pour choisir la bonne classe à chaque fois.

Pourquoi la conversion manuelle de Figma vers Bulma est lente

La grille de Bulma basée sur flexbox (columns, column, modificateurs de taille is-*) se lit simplement une fois écrite, mais y arriver à la main depuis un frame Figma implique le même travail de traduction répétitif qu'avec n'importe quel autre framework :

• Faire correspondre l'Auto Layout au système de colonnes de Bulma. Une rangée d'éléments espacés régulièrement dans Figma doit devenir la bonne combinaison de columns, column is-half/is-one-third et de gestion du gap — décidée à l'œil, frame par frame.
• Choisir les bonnes classes modificatrices. Bulma exprime la majorité du style via des modificateurs (is-primary, is-rounded, is-large), il faut donc traduire une couleur de remplissage ou un rayon de coin dans Figma vers "le modificateur Bulma le plus proche", et cette correspondance n'est pas toujours parfaite.
• Reconstruire typographie et espacement avec l'échelle propre à Bulma (title, subtitle, helpers mb-*/mt-*) plutôt qu'en copiant directement des valeurs en pixels.
• Tout répéter à chaque breakpoint, puisque les helpers responsive de Bulma (is-hidden-mobile, changements de largeur de colonne) doivent être ajoutés à la main pour chaque taille d'écran de la maquette.

Rien de tout cela n'est conceptuellement difficile, mais c'est exactement le genre de travail répétitif et chargé en jugement qui génère de petites incohérences sur une vraie maquette multi-pages.

Comment MarkupGen génère la sortie Bulma à partir d'une vraie maquette

MarkupGen supprime l'étape de traduction au lieu de simplement l'accélérer. Le workflow est le même quel que soit le format de sortie :

1. Exportez le frame depuis Figma avec le plugin MarkupGen, qui capture structure, styles et images ensemble.
2. L'IA construit le markup à partir de la structure réelle de la maquette, pas d'une approximation.
3. Affinez contenu, polices et mise en page visuellement dans l'éditeur intégré avant de finaliser quoi que ce soit.
4. Exportez le package de code final en Bulma 1.0.2.

Au moment de l'export, l'Auto Layout et les valeurs d'espacement de Figma sont mappés vers les vraies classes de grille et helpers de Bulma plutôt que devinés — une rangée d'éléments en Auto Layout devient une structure columns/column dimensionnée en conséquence, et le padding, le gap et l'alignement se résolvent en helpers d'espacement Bulma plutôt qu'en styles inline. La sortie reste sans aucune dépendance JavaScript, conformément à la philosophie de Bulma, donc rien d'autre à câbler pour que le CSS s'affiche correctement.

Où se situe Bulma parmi les formats de sortie de MarkupGen

Bulma est l'un des six formats CSS pris en charge par MarkupGen, aux côtés de CSS pur, Tailwind, Bootstrap, Materialize et Pico — choisi par projet depuis le panneau de configuration plutôt que fixé à l'avance. C'est le bon choix quand vous voulez une esthétique moderne et propre par défaut sans adopter une bibliothèque de composants complète comme l'exigeraient Bootstrap ou Materialize. Pour une comparaison côte à côte des six, voir 6 frameworks CSS pour le Figma-to-Code.

Vérifier le markup généré avant de publier

La conversion automatique produit une structure de classes correcte pour la majorité de la maquette, mais ça vaut le coup de vérifier avant de merger :

• Vérifiez les largeurs de colonnes à chaque breakpoint — la grille de Bulma est flexible, donc confirmez que les tailles is-* générées correspondent toujours à l'intention sur mobile, pas seulement sur desktop.
• Repérez les modificateurs répétés, surtout là où un même composant (une card, un style de bouton) apparaît plusieurs fois — il devrait se résoudre aux mêmes classes modificatrices partout.
• Confirmez le HTML sémantique sous les classes Bulma — la sortie privilégie par défaut des balises porteuses de sens plutôt que des <div> imbriqués.
• Utilisez l'éditeur intégré pour les ajustements de contenu ou de mise en page plutôt que d'éditer les classes exportées à la main, puis réexportez.

Chaque export reçoit aussi un score de qualité IA automatique, pour un signal rapide sur son état de préparation avant d'aller plus loin.

Essayez-le sur votre propre maquette

Si vous choisissez encore à la main les classes modificatrices de Bulma pour coller à un fichier Figma, ça vaut le coup de voir combien de ce travail disparaît quand les classes proviennent des vraies valeurs de la maquette. Essayez MarkupGen gratuitement sur l'un de vos frames, ou consultez la page du convertisseur Figma vers Bulma pour voir ce que vous obtenez d'office.