Skip to content
Token Collector

Token Collector

by Jessica McCune

Convert styles and variables to JSON tokens

FreeFigma

Installs

117

Likes

14

Users

1,078

Views

1,500

Preview

Token Collector 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 stylesShows variable bindings for local color stylesBuilds design tokens JSON from both local styles and local collection variables -- Local styles JSON output includes composite typography tokensJSON view has options for showing font sizes in either px or rem (1rem defaults to 16px for now) and replacing raw values with variable aliasLATEST UPDATE: JSON view now follows DTCG formatExample 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}"   }  } }}

More import & export plugins plugins

View all