Exporter des classes Tailwind depuis Figma

Quand je veux transformer une maquette Figma en code, j’utilise souvent le plugin « Figma to Code (HTML, Tailwind, Flutter, SwiftUI) ». Il me permet de générer rapidement et facilement des classes Tailwind CSS pour ma maquette. Cela fait gagner du temps et facilite grandement la mise en œuvre. Dans ce guide, je t’explique la marche à suivre étape par étape.

1. Installer le plugin

Il faut d’abord installer le plugin dans Figma. Voici comment je procède – et comment tu peux faire de même :

Ouvre ton projet Figma.
Clique sur l’icône « Resources » en haut (les trois cubes) ou appuie sur Shift + I.
Cherche « Figma to Code » dans le champ de recherche.
Sélectionne le plugin « Figma to Code (HTML, Tailwind, Flutter, SwiftUI) » et clique sur « Install ».

Le plugin est maintenant prêt à l’emploi !

2. Sélectionner la maquette

Ensuite, je sélectionne l’élément de design ou le frame pour lequel je veux générer des classes Tailwind. Tu peux procéder exactement de la même façon :

Ouvre ton document Figma.
Clique sur l’élément que tu veux exporter – cela peut être un bouton, un conteneur ou même un frame complet.

Une maquette clairement structurée est importante ici, car le plugin la traite mieux.

3. Lancer le plugin

Je lance maintenant le plugin. Voici comment :

Fais un clic droit sur l’élément de design sélectionné.
Dans le menu, va dans « Plugins » > « Figma to Code ».
Le plugin s’ouvre dans un panneau sur le côté droit.

Lance le plugin de la même manière et tu peux démarrer directement.

4. Choisir les options d’export

Dans le plugin, je vois plusieurs options d’export, dont HTML, Tailwind CSS, Flutter et SwiftUI. Comme je travaille avec Tailwind, je choisis « Tailwind CSS ». Tu peux également sélectionner cette option si tu veux utiliser Tailwind.

5. Générer les classes Tailwind

Une fois l’option Tailwind CSS choisie, le plugin analyse ma maquette et m’affiche les classes Tailwind correspondantes. Voici un exemple obtenu pour un bouton :

<div class="rounded bg-blue-500 p-4 text-white shadow-md">Button Text</div>

[Haut]