Que sont les variables Figma ?
Les variables Figma sont des valeurs nommées stockées dans un fichier Figma pour les couleurs, les nombres, les chaînes et les booléens, avec des modes pour des cas comme les thèmes clair et sombre. C'est la forme native des jetons de design dans Figma, mais les lire via l'API REST de Figma exige un plan Enterprise.
Ce qu'elles font
Les variables permettent à un fichier Figma de contenir des valeurs nommées au lieu de répéter des valeurs brutes. Quatre types sont pris en charge : couleur, nombre, chaîne et booléen.
Elles s'organisent en collections, et chaque collection peut avoir des modes — le plus souvent clair et sombre, mais aussi densité, marque ou plateforme. Un calque lié à une variable se met à jour au changement de mode, ce qui fait que le theming à l'intérieur de Figma fonctionne comme il le devrait.
Les variables peuvent aussi être des alias d'autres variables, et c'est ainsi qu'on construit une couche sémantique : text/danger pointant vers red/600.
Où est la difficulté
Les variables règlent le problème à l'intérieur de Figma. Le problème à l'extérieur reste entier, et c'est là que les équipes sont surprises.
Lire les variables via l'API REST de Figma exige une offre Enterprise. Le point d'accès existe, et il renvoie 403 sur les offres Professional et Organization.
La conséquence pratique est importante au moment d'évaluer des outils. Tout ce qui promet une synchronisation des jetons Figma via l'API REST fonctionne sur un compte Enterprise et ne fait strictement rien sur l'offre qu'ont la plupart des équipes. Cela vaut la peine de poser la question directement avant d'acheter, car cela n'apparaît généralement pas dans les documents commerciaux.
Les plugins ne sont pas concernés. L'API plugin lit les variables depuis l'intérieur du fichier, et un plugin s'exécute sur n'importe quelle offre. Un outil dont le transport est un plugin fonctionne quel que soit votre niveau Figma.
Variables et jetons de design
Les variables Figma sont une forme de jeton de design, limitée à Figma. Elles ne sont pas portables en elles-mêmes : il n'existe pas d'export intégré vers CSS, vers Tailwind ou vers le format JSON de jetons du W3C.
Combler cet écart, c'est précisément le rôle de l'outillage de jetons. Le choix se fait entre un plugin, qui fonctionne partout, et l'API REST, qui ne fonctionne pas partout.
Ce que Flash DSM apporte ici
Flash DSM utilise un plugin Figma comme transport exactement pour cette raison. Il lit les variables sur n'importe quelle offre Figma, transforme une publication en diff de jetons relisible, et exporte vers CSS, Tailwind, Tokens Studio JSON ou une pull request GitHub.