React + Figma : du design token au composant codé en 5 étapes

Le fossé persistant entre design et développement

Malgre les progres considerables des outils modernes, le passage du design au code reste une source de friction dans la plupart des équipes produit. Les designers créent des maquettes pixel-perfect dans Figma, les développeurs les interprètent à leur manière, et le résultat final diverge inévitablement de l'intention originale. Ce décalage n'est pas un problème de compétence individuelle, c'est un problème de processus et d'absence de contrat formel entre les deux disciplines.

Les design tokens sont la réponse structurelle à ce défi. En définissant un vocabulaire partagé entre Figma et le code, on crée un contrat explicite qui ne laisse pas de place à l'interprétation. Quand un designer utilise le token color-primary dans Figma, le développeur sait exactement quelle variable CSS ou constante JavaScript utiliser. Cette correspondance directe élimine les erreurs humaines et les allers-retours chronophages.

Dans cet article, je détaille les cinq étapes precises que j'utilise pour transformer des design tokens Figma en composants React fonctionnels. Ce pipeline, que j'ai affiné au fil de dizaines de projets, s'appuie sur Figma Variables, le format W3C Design Tokens, Style Dictionary v4, des composants React et Figma Code Connect. Le résultat est une réduction moyenne de quarante pour cent du temps d'intégration.

Etape 1 : définir les tokens dans Figma avec les Variables

Tout commence par une structure de variables rigoureuse dans Figma. Je crée trois collections de variables distinctes : primitives pour les valeurs brutes comme les codes hexadecimaux et les valeurs en pixels, sémantiques pour les alias contextuels comme surface-primary ou text-on-primary, et composants pour les tokens spécifiques comme button-padding-md ou card-border-radius. Cette hiérarchie a trois niveaux permet de changer un thème complet en modifiant uniquement la couche primitive.

Les variable modes de Figma permettent de définir les variantes light et dark des le depart, ainsi que des variantes de marque pour les produits multi-tenants. Chaque variable suit une convention de nommage qui se traduit directement en chemin CSS : color/surface/primary deviendra --color-surface-primary dans le code. Les scoping controls restreignent chaque variable aux propriétés pertinentes. J'utilise les quatre types supportes — color, number, string et boolean — selon la nature du token.

Le plugin Tokens Studio for Figma est un complement indispensable pour les équipes qui ont besoin de types de tokens plus avances que ceux supportes nativement par Figma, comme les ombres composites, les typographies complètes où les transitions. Il permet d'exporter directement au format JSON conforme à la spécification W3C DTCG, avec la syntaxe $value et $type requise par Style Dictionary v4.

Etape 2 : exporter les tokens au format W3C DTCG

L'export des tokens Figma vers le code nécessite un format intermediaire standardisé. La spécification W3C Design Tokens Community Group, en Second Editor's Draft, définit ce format avec les propriétés $value, $type, $description et $extensions. Le système de références utilise la syntaxe {group.token} pour les alias, ce qui préserve la chaîne de dépendances entre tokens primitifs et sémantiques.

Deux options d'export s'offrent a vous : Tokens Studio pour un export visuel avec synchronisation Git intégrée, où l'API REST Figma Variables pour un export programmatique integrable dans un pipeline CI/CD. Je privilégie la seconde option pour les projets matures car elle élimine toute dépendance à un plugin tiers. Le fichier JSON resultant est versionné dans le repository du projet, ce qui permet de suivre l'évolution des tokens avec le même rigor que le code source.

Le format DTCG supporte des types riches : color, dimension, fontFamily, fontWeight, duration, cubicBezier, number, strokeStyle, border, transition, shadow, gradient et typography. Cette richesse permet de modéliser la totalité d'un système de design dans un seul fichier de tokens, ce qui simplifie considérablement la maintenance et garantit la cohérence entre Figma et le code.

Etape 3 : transformer avec Style Dictionary v4

Style Dictionary v4 est le moteur de transformation qui convertit vos tokens JSON en variables CSS, constantes JavaScript, ou tout autre format requis par votre stack. Cette version majeure apporte des changements architecturaux significatifs : une API entièrement asynchrone, un système de hooks qui remplace les anciennes méthodes register, le support natif du format W3C DTCG et une architecture ESM-first qui s'intègre nativement dans les toolchains modernes.

La fonctionnalité expand est particulièrement precieuse pour les tokens composites. Un token de type typography qui contient fontFamily, fontSize, fontWeight et lineHeight est automatiquement décomposé en sous-tokens individuels lors de la transformation. Chaque sous-token génère sa propre variable CSS, ce qui permet une granularité fine dans les composants. Les preprocessors permettent de manipuler les tokens avant la transformation, par exemple pour résoudre des calculs mathématiques ou appliquer des conversions d'unites.

En sortie, je génère trois fichiers : un fichier CSS avec les custom properties pour le theming global, un fichier JavaScript avec les constantes typees pour les composants qui ont besoin d'accès programmatique aux tokens, et un fichier de documentation automatique qui liste chaque token avec sa valeur résolue et son contexte d'utilisation. Ce dernier fichier alimente la documentation vivante du design system.

Etapes 4 et 5 : composants React et Figma Code Connect

Les composants React sont construits en utilisant exclusivement les variables CSS et constantes JavaScript générées par Style Dictionary. Aucune valeur codee en dur n'est autorisee. Chaque propriété visuelle référence un token, ce qui garantit que tout changement de token se répercute instantanément dans l'interface. Le thème provider React encapsule la logique de basculement entre les modes clair et sombre via les custom properties CSS, avec detection des préférences système et persistance du choix utilisateur.

La cinquieme étape ferme la boucle avec Figma Code Connect. Les fichiers .figma.tsx vivent aux côtés de vos composants React dans le repository. L'API figma.connect() mappe chaque composant Figma à son équivalent JSX. Les prop mappings utilisent figma.string() pour les textes, figma.boolean() pour les toggles, figma.enum() pour les variantes, figma.instance() pour les sous-composants et figma.children() pour le contenu dynamique. La méthode figma.className() permet même de mapper directement des classes Tailwind CSS.

Le workflow complet est orchestré par des commandes CLI : figma connect create génère le squelette du fichier de connexion, figma connect publish le pousse vers Figma. Quand un développeur inspecte un composant dans Dev Mode, il voit le code reel du projet avec les props correctement mappees. Des outils comme Anima, Locofy.ai, Builder.io Visual Copilot et Plasmic peuvent completer ce workflow en generant un premier jet de code à partir des maquettes, mais Code Connect reste la solution la plus fiable pour maintenir la synchronisation dans la durée.