Back to Plugins
Design Tokens Manager

Design Tokens Manager

Import variables from JSON files, Google Sheets, CSS files, Export variables to JSON files.

variables to jsondesign tokenstokensvariablescss variablesexport variablesimport variablesdtcgspreadsheetstylesjsongoogle sheets

Plugin Preview

Design Tokens Manager preview

About this plugin

Export Variables to JSON files


  1. The exported JSON file format follows the technical specifications of the Design Tokens Format Module
  2. Each Mode in the Collection exports an independent JSON file.
  3. Use the Manifest.json file to describe the relationship between JSON files.


Export Styles to JSON files

  1. Text styles
  2. Effect styles (Support variables)
  3. Color styles: Solid color(Not recommended ), Gradient(linear, radial, angular, diamond).
  4. Grid Styles


Import Tokens from JSON files

  1. Variables: Color, Number, String, Boolean.
  2. Styles: coming soon


------

The import feature is developed based on the open source project figma-variables-import, thanks to the author's contribution. I will add the ability to import styles.


Import Tokens from Google Sheets

  1. Variables: Color, Number, String, Boolean.


Please ensure that the share settings of the spreadsheet are set to "Anyone on the internet with the link can view".

Try this template.


Supports importing variables from multiple css files

  1. Supports multi-level reference of variables
  2. Infer the appropriate Token type based on the variable value (may be wrong)
  3. Support using calc function in variables, such as:


"--base-unit":"0.25rem";
"--base-half-unit": calc(var(--base-unit) / 2);
"--font-base-unit": "var(--base-unit)";
"--font-size-12":"calc(var(--font-base-unit) * 3)"

Plugin Details

Version38
CreatedJuly 20, 2023
Last UpdatedJuly 23, 2024
Categorydesign-tools-other
CreatorWenju Li
Stats1536 installs, 251 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:build/ui.js
  • main:build/main.js
  • Network Access:

    No restrictions required

  • Editor Types:
    figma
  • Allowed Domains:
    • *