Technical Tutorials

Dans le paysage frontend moderne, l'écart entre le design et le développement est souvent la principale source d'inefficacité. Pendant des années, le processus de remise en main impliquait une traduction manuelle des spécifications visuelles en code, entraînant une « dérive du design » et des cauchemars de maintenance. La solution ? Les Design Tokens. En traitant les attributs de design tels que les couleurs, l'espacement et la typographie comme des structures de données partageables entre les plateformes, nous créons une source unique de vérité. Cet article explore comment combler cet écart en utilisant la fonctionnalité native Variables de Figma, les Propriétés CSS Personnalisées standard et les composants React.

Pourquoi les Design Tokens sont importants

Au cœur des Design Tokens se trouvent des valeurs atomiques — spécifiquement les couleurs, l'espacement et les tailles de police utilisés dans votre interface utilisateur. Ils agissent comme les blocs de construction des systèmes de design. Au lieu de coder en dur #0055ff dans vos composants, vous faites référence à un jeton sémantique tel que primary-action-bg. Cette abstraction permet un thème facile, la cohérence et un flux de travail rationalisé où les modifications dans l'outil de design se reflètent automatiquement dans la base de code.

Exploiter les Variables Figma

Les récentes mises à jour de Figma ont introduit des capacités puissantes de Variables. Contrairement aux styles hérités, les variables prennent en charge des types de données tels que la couleur, le nombre, la chaîne de caractères et le booléen, et elles permettent des modes locaux et de collection. Cela signifie que vous pouvez définir un mode theme-light et un mode theme-dark directement dans Figma. Lors de l'exportation de ces jetons, vous utilisez généralement des plugins ou des scripts manuels pour générer une représentation JSON qui mappe les noms des variables Figma aux jetons sémantiques.

Par exemple, une variable Figma nommée Color/Primary/Default pourrait être mappée à un jeton sémantique nommé brand-primary. Cette cartographie est cruciale pour maintenir le contexte lors du passage du design au développement.

Connexion aux Propriétés CSS Personnalisées

Les Propriétés CSS Personnalisées (Variables CSS) sont le pont idéal pour l'implémentation web. Elles sont natives au navigateur, permettent l'héritage et peuvent être remplacées dynamiquement. Pour mettre cela en œuvre, nous mappons nos Design Tokens directement aux variables CSS au sein du sélecteur :root.

Voici un exemple de à quoi pourrait ressembler votre CSS après l'exportation des jetons :

:root {
  /* Jetons de couleur sémantiques */
  --color-brand-primary: #0055ff;
  --color-brand-primary-hover: #0044cc;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;

  /* Jetons d'espacement */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* Jetons de typographie */
  --font-family-base: 'Inter', sans-serif;
  --font-size-lg: 1.25rem;
  --font-weight-bold: 700;
}

En utilisant des noms sémantiques (par exemple, --color-text-primary plutôt que --color-grey-500), vous découplez le code des détails d'implémentation spécifiques. Si votre équipe de design décide de passer du gris au bleu foncé pour le texte secondaire, vous ne mettez à jour que la définition de la variable, et non chaque composant qui l'utilise.

Intégration avec les composants React

Dans une application React, vous pouvez consommer ces variables CSS directement dans vos composants sans avoir besoin de fournisseurs de contexte complexes pour un thème de base, grâce à l'héritage de cascade CSS. Cependant, pour un thème dynamique, vous pourriez basculer des classes sur body ou un conteneur racine.

import React from 'react';

const PrimaryButton = ({ children }) => {
  return (
    <button
      style={{
        backgroundColor: 'var(--color-brand-primary)',
        color: '#ffffff',
        padding: 'var(--space-sm) var(--space-md)',
        borderRadius: '4px',
        fontWeight: 'var(--font-weight-bold)',
        cursor: 'pointer',
        transition: 'background-color 0.2s ease'
      }}
      onMouseEnter={(e) => {
        e.target.style.backgroundColor = 'var(--color-brand-primary-hover)';
      }}
    >
      {children}
    </button>
  );
};

export default PrimaryButton;

Cette approche garantit que vos composants React restent conscients du thème et cohérents avec le reste de votre interface utilisateur. Pour une logique plus complexe, vous pouvez également extraire ces valeurs dans des objets JavaScript pour un accès programmatique, garantissant la sécurité des types et une meilleure expérience développeur.

Conclusion

Implémenter des Design Tokens ne consiste pas seulement à gagner du temps ; il s'agit de construire un système de design évolutif et maintenable. En connectant les Variables Figma aux Propriétés CSS Personnalisées et à React, vous créez un pipeline fluide où le design et le code parlent le même langage. Commencez petit en standardisant vos couleurs et votre espacement, et étendez progressivement votre bibliothèque de jetons pour inclure la typographie et les effets. Le résultat est un produit plus cohérent et une équipe de développement plus heureuse.