Hey designers and developers!
Tired of wasting time exporting your Figma variables and rebuilding your tokens in code? I've created a little plugin to make your life easier. With it, you can export your colors, fonts, and spacing while keeping their aliases and hierarchy, easily manage light/dark modes, and even generate ready-to-use W3C Design Tokens.
You can choose the format that suits you best: JavaScript, TypeScript, CSS, SCSS, or JSON, and everything can be previewed in real time. The plugin allows you to quickly copy or download your exports, while keeping your collections organized and your references intact.
In addition, it provides a detailed analysis of your variables: number of tokens, types, modes used, and other useful statistics to give you a clear overview of your design system even before exporting. No more hours spent checking that everything is consistent between Figma and the code.
The plugin is available here: https://www.figma.com/community/plugin/1566133735926608173/tokenforge
We are interested in receiving your feedback, opinions, and advice. 🙏
