Token Collector

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}"   }  } }}