Design Tokens Manager
by Wenju Li
Import variables from JSON files, Google Sheets, CSS files, Export variables to JSON files.
Installs
2,765
Likes
465
Users
19,912
Views
27,488
Preview
About this plugin
Export Variables to JSON filesThe exported JSON file format follows the technical specifications of the Design Tokens Format ModuleEach Mode in the Collection exports an independent JSON file.
Use the Manifest.json file to describe the relationship between JSON files.
Export Styles to JSON filesText stylesEffect styles (Support variables)Color styles: Solid color(Not recommended ), Gradient(linear, radial, angular, diamond).
Grid StylesImport Tokens from JSON filesVariables: Color, Number, String, Boolean.
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 SheetsVariables: 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 filesSupports multi-level reference of variablesInfer the appropriate Token type based on the variable value (may be wrong)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)"
More design tools other plugins
View allLorem Ipsum — by ‹div›RIOTS
by divRIOTS
Fill your designs with placeholders in a click: text, images and even data!
Breakpoints
Paidby Arthur
Preview responsive/adaptive layouts right inside Figma design for free. Horizontal/vertical points
SPELLL - Spelling & Grammar Checking for Figma & FigJam
Paidby Tekeste Kidanu
Spelling & Grammar Checking for Figma & FigJam
Tokens Studio for Figma
Paidby Jan Six
The scalable design tokens solution for Figma