Back to Plugins
Token Collector
Convert styles and variables to JSON tokens
variables to jsondesign tokensstyle tokensvariable bindingsstyles to variablestypography design tokenstypography tokensfigma-to-codevariable collectionstyle dictionaryexport variablesstyles to jsonvariables to tokens
Plugin Preview
About this plugin
- Creates variable collections from local color styles (only solid fill styles for now), with the option to bind the variables to the styles
- Shows variable bindings for local color styles
- Builds design tokens JSON from both local styles and local collection variables -- Local styles JSON output includes composite typography tokens
- JSON view has options for showing font sizes in either
pxorrem(1rem defaults to 16px for now) and replacing raw values with variable alias - LATEST UPDATE: JSON view now follows DTCG format
Example JSON tokens built from local styles:
{
"color": {
"app": {
"primary": {
"$description": "App primary color",
"$type": "color",
"$value": "#041c2c"
},
"secondary": {
"$description": "",
"$type": "color",
"$value": "#041c2c"
},
"accent": {
"$description": "",
"$type": "color",
"$value": "#3169bb"
}
}
},
"typography": {
"body": {
"$description": "Default body text",
"$type": "text",
"$value": {
"font-size": "0.75rem",
"font-family": "Inter",
"font-style": "Regular",
"text-decoration": "none",
"letter-spacing": "0%",
"line-height": "auto",
"text-transform": "none"
}
}
}
}
Color tokens with option selected to replace value with alias:
{
"color": {
"app": {
"primary": {
"$description": "App primary color",
"$type": "color",
"$value": "{color.app.primary}"
},
"secondary": {
"$description": "",
"$type": "color",
"$value": "{color.app.secondary}"
},
"accent": {
"$description": "",
"$type": "color",
"$value": "{color.app.accent}"
}
}
}
}
Plugin Details
| Version | 8 |
|---|---|
| Created | June 28, 2023 |
| Last Updated | July 1, 2025 |
| Category | Import & export plugins |
| Creator | Jessica Lynch |
| Stats | 96 installs, 12 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML