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 styles
• Shows variable bindings for local color styles
• Builds design tokens JSON from both local styles and local collection variables -- Local styles JSON output now includes composite typography tokens
• JSON view has options for showing font sizes in either px or rem (1rem defaults to 16px for now) and replacing raw values with variable alias

Example JSON tokens built from local styles:

{
  "color": {
    "app": {
      "primary": {
        "name": "color/app/primary",
        "description": "App primary color",
        "type": "color",
        "value": "#041c2c"
      },
      "secondary": {
        "name": "color/app/secondary",
        "description": "",
        "type": "color",
        "value": "#041c2c"
      },
      "accent": {
        "name": "color/app/accent",
        "description": "",
        "type": "color",
        "value": "#3169bb"
      }
    }
  },
  "typography": {
    "body": {
      "name": "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": {
        "name": "color/app/primary",
        "description": "App primary color",
        "type": "color",
        "value": "{color.app.primary}"
      },
      "secondary": {
        "name": "color/app/secondary",
        "description": "",
        "type": "color",
        "value": "{color.app.secondary}"
      },
      "accent": {
        "name": "color/app/accent",
        "description": "",
        "type": "color",
        "value": "{color.app.accent}"
      }
    }
  }
}