Token Forge - Variables Tokens Builder | Figma 🚀 Key features Easily export your Figma variables (colors, typography, spacing, etc.) to JavaScript - TypeScript (.ts) / CSS (.css) / SCSS (.scss) / JSON / ARB (for Flutter) / Swift IOS / CSV.GitHub /...

I suggest you try the Token Forge plugin for this. It might be useful for this topic ;)

www.figma.com/community/pl...

Aujourd'hui, le plugin est adopté par de plus en plus de monde, c'est motivant. Comme eux, n'hésitez pas à le tester pour vos projets (c'est gratuit) ! 👉

www.figma.com/community/pl...

4 évolutions récentes du plugin Figma “Token Forge - Variables Tokens Builder” pour simplifier le handoff 👇

- Conversion px → REM/EM/% + couleurs HSL/OKLCH/RGBA
- Wrap auto en CSS/SCSS
- Export W3C optimisé Penpot
- Sync GitLab (en + de GitHub & Sheets)

Objectif :
– éviter les erreurs
– préserver la structure des variables
– fluidifier le handoff
– réduire la friction entre équipes

Si vous testez, je suis curieux d’avoir vos retours 👇
www.figma.com/community/pl...

Dans certains contextes, la source de vérité n’est pas toujours dans un repo ou dans Figma…

Elle est parfois dans une Spreadsheet partagée entre design, produit et dev.

L’idée : connecter ces mondes proprement, simplement, sans copier-coller manuel.

Concrètement, il est maintenant possible de synchroniser une Google Spreadsheet dans les deux sens directement depuis Figma :

- Export : envoyer vos variables / tokens Figma vers une Sheet
- Import : synchroniser vos variables Figma depuis une Sheet existante

Petite update sur Token Forge
(le plugin Figma que je construis pour simplifier le handoff design ↔ développement)

Après le support GitLab, la nouvelle version intègre désormais le support de Google Spreadsheet 🚀

If you ever reconsider a token layer, I built Token Forge, a Figma plugin that syncs variables <> code (CSS/SCSS/JSON/W3C/CS...), preserves aliases, and handles color conversions (including OKLCH).

Might fit nicely into your workflow without heavy automation.

www.figma.com/community/pl...

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! 🙏