Back to Plugins
Design Tokens to Variables

Design Tokens to Variables

Convert W3C Design Tokens, Leonardo, Huetone, Primer Prism to Variables.

color generatorleonardofigma variablesvariablesvariable collectionprismjson to variablesconverterhuetone

Plugin Preview

Design Tokens to Variables preview

About this plugin

Convert JSON data using W3C Design Tokens specs or formats generated by generators into Figma Variables, supporting multiple modes.


🔑 Key Features


  1. Effortless JSON conversion: Quickly transform W3C-compliant JSON design tokens into Figma Variables.
  2. Multi-mode support: Easily manage light and dark for versatile design systems.
  3. Intelligent grouping: Automatically organize your variables into logical groups for better management.
  4. Wide compatibility: Works with W3C design tokens specs, Leonardo, Huetone, and Primer Prism formats.


✅ Perfect for


  1. Design system managers streamlining their workflow.
  2. Designers working on multi-themed applications.
  3. Teams transitioning from traditional design tokens to Figma variables.


🟡 Supported tokens


  1. Tested only for colors at the moment.


🐞 Got ideas or found a bug?


Comment or contact me in Threads. Your feedback helps make this plugin even better for everyone!

Plugin Details

Version12
CreatedAugust 27, 2024
Last UpdatedSeptember 16, 2024
CategoryImport & export plugins
CreatorAfnizar Nur Ghifari
Stats26 installs, 6 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:build/ui.js
  • main:build/main.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none