Robin Lopez

Branches, structure des fichiers, commit ou pull request : tout se fait sans quitter le plugin. Idéal pour sync vos tokens sans CI/CD complexe.

Le plugin Token Forme est gratuit : www.figma.com/community/pl...

⬆️ Export : transformez vos variables Figma en tokens, au format de votre choix, et synchronisez-les vers un repo GitHub.

⬇️ Import : fetch & merge de tokens GitHub directement dans Figma pour rester parfaitement alignés.

Le v2 de TokenForge – Variables Token Builder est là !

Le plugin Figma intègre désormais la synchro bi-directionnelle avec GitHub. Que votre source de vérité soit côté design ou dev, le flux est enfin fluide ✨

#figma #designsystem #token #handoff #dev #variables

Felt that 😅

I built TokenForge exactly for this mess, a free Figma plugin to turn Variables into code-ready tokens (CSS / SCSS / TS / JSON W3C…) and optionally sync them with GitHub.

Available here, feel free to try it and let me know if it helps ;)
www.figma.com/community/pl...

Voici une courte vidéo de démo.
Vos retours, idées ou suggestions d’amélioration sont plus que bienvenus 🙌

Le plugin est dispo dès maintenant sur Figma (Dev Mode) :
👉 www.figma.com/community/pl...

Et aussi pouvoir copier instantanément les tokens dans le format adapté à chaque stack.

Plus besoin de fouiller dans les variables ou de deviner les alias : tout est là, prêt à être utilisé côté code.

C’est ce constat qui m’a donné envie de créer un plugin dédié au Dev Mode : Token Inspect.

Le plugin permet d'afficher en un coup d’œil tous les tokens appliqués à un élément
couleurs, typo, espacements, radius, shadows…

Dans la continuité de TokenForge, j’ai voulu aller encore plus loin dans le lien entre Figma & le dev.

En explorant le Dev Mode, je me suis vite rendu compte que l’inspection native montre ses limites dès qu’on veut récupérer une valeur directement exploitable côté code

Voici une petite démo en vidéo.
Je serais ravi d’avoir vos retours pour améliorer tout ça 🙏

Lien du plugin :
www.figma.com/community/pl...

Considérez-le comme un assistant pour accélérer votre transition, qui demandera une vérification de votre part. L’objectif n’est pas d’être magique, mais de faire gagner du temps dans certain contexte.

C’est une BETA, donc étant donné la grande diversité des conventions de nommage et d'écriture du code, le résultat peut varier.

C'est notamment assez utilise dans un context ou l'on récupères un vieux projet déjà en production sur lequel il n’y a jamais vraiment eu de travail UX / UI, pas de maquettes Figma, juste du code et des styles bricolés au fil du temps.

Tu importes tes fichiers CSS / SCSS / TypeScript, et TokenForge reconstruit ton système de variables dans Figma : couleurs (même en OKLCH), modes, collections, etc... Bref, il fait le sale boulot pour toi et dégrossi la chose pour partir rapidement sur de bonnes bases.

Toutes les variables existent dans le code, mais il faut quand même tout refaire à la main côté design ou s'amuser à bien formater les variables en JSON via des scripts ou autre.

C’est exactement pour automatiser ça que j’ai créé cette feature.

Si tu as déjà essayé de reconstruire des variables d'un design system dans Figma à partir d’un projet déjà en prod… tu sais à quel point c’est pénible.

La version 2.4 du plugin Figma TokenForge vient de sortir et embarque une nouveauté : un nouvel utilitaire, "Token extractor" (en BETA).

Voici une petite démo en vidéo.
Je serais ravi d’avoir vos retours pour améliorer tout ça 🙏
Lien du plugin :
www.figma.com/community/pl...

Étant donné la grande diversité des conventions de nommage et d'écriture du code, le résultat peut varier. Considérez-le comme un assistant pour accélérer votre transition, qui demandera une vérification de votre part.

C'est notamment assez utilise dans un context ou l'on récupères un vieux projet déjà en production sur lequel il n’y a jamais vraiment eu de travail UX / UI, pas de maquettes Figma, juste du code et des styles bricolés au fil du temps.

Tu importes tes fichiers CSS / SCSS / TypeScript, et TokenForge reconstruit ton système de variables dans Figma : couleurs (même en OKLCH), modes, collections, etc... Bref, il fait le sale boulot pour toi et dégrossi la chose pour partir rapidement sur de bonnes bases.

Toutes les variables existent dans le code, mais il faut quand même tout refaire à la main côté design ou s'amuser à bien formater les variables en JSON via des scripts ou autre.

C’est exactement pour automatiser ça que j’ai créé cette feature.

I created a plugin for this: TokenForge.

It directly exports your variables as tokens to CSS, SCSS, JS, TS, JSON, etc. It also handles import and much more.

To try it: www.figma.com/community/pl...

Your feedback is welcome! 🙏

Super interesting process! 👌
If you want to simplify converting your Figma styles/variables into ready-to-use tokens, I've created a plugin for that: TokenForge.

It exports directly to CSS, JS, TS, JSON, etc.

If you'd like to try it: www.figma.com/community/pl...

Your feedback is welcome! 🙏

Voici un carrousel qui vous donne un bon aperçu du plugin.

Découvrez et adopter Token Forge ici :
www.figma.com/community/pl...

#DesignSystem #DesignTokens #Figma #Frontend #Tokens #Plugin

Concrètement, TokenForge gère :
• Export multi-format : TS, CSS, SCSS, JSON, JSON W3C, ARB (Flutter)…
• Standardisation W3C : fini les écosystèmes fermés
• Préservation des Alias & Modes (bye bye les hex en dur 👋)
• Import pour migrer / dupliquer un DS en quelques clics

J’ai créé TokenForge avec une idée simple :
simplifier toute la “plomberie” du Design System.

Pour les équipes qui veulent un workflow fluide, sans friction, sans outils de synchro complexes et coûteux.

Le “Design Handoff” ne devrait pas être une étape où l’on transpire 😅

Si vous réécrivez encore vos variables à la main ou vous battez avec des scripts maison pour transformer vos variables Figma en tokens… j’ai quelque chose pour vous.

TokenForge génère vos variables Figma en tokens structurés (JS/TS, JSON, CSS, SCSS), avec alias, modes et préfixes personnalisables, afin de les consommer facilement dans votre code.

Conçu pour les équipes design et dev qui cherchent à unifier leur design system sans passer par des pipelines et outils complexes.

Gratuit, il vient tout juste d'être publié sur le store Figma 🎉
👉https://lnkd.in/d-rDVPAk