Skip to main content

​
Overview

Design Tokens Explorer supports loading any number of token sources in parallel. Each source appears as a separate panel in the sidebar, switchable via a dropdown. This is useful when your design system is split across multiple packages, themes, or token categories.

​
Basic multi-source setup

settings.json
"designTokensExplorer.sources": [
  {
    "name": "Brand Tokens",
    "path": "./tokens/brand.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "radius", "type": "radius" }
    ]
  },
  {
    "name": "Semantic Tokens",
    "path": "./tokens/semantic.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "shadow", "type": "shadow" }
    ]
  }
]
In the sidebar, a dropdown at the top of the panel lets you switch between sources. Only one source is shown at a time. Searching filters tokens within the active source.

​
Common use cases

​
Design system packages

When consuming a published design system alongside local overrides:
settings.json
"designTokensExplorer.sources": [
  {
    "name": "Acme Design System",
    "path": "node_modules/@acme/tokens/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "text", "type": "font-size" }
    ]
  },
  {
    "name": "Local Overrides",
    "path": "./src/tokens/overrides.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  }
]

​
Theming (light / dark)

When you maintain separate token files for themes:
settings.json
"designTokensExplorer.sources": [
  {
    "name": "Theme: Light",
    "path": "./tokens/theme-light.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "surface", "type": "color" }
    ]
  },
  {
    "name": "Theme: Dark",
    "path": "./tokens/theme-dark.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "surface", "type": "color" }
    ]
  }
]

​
Remote + local

Combining tokens from a remote design tool export with local additions:
settings.json
"designTokensExplorer.sources": [
  {
    "name": "Figma Export",
    "path": "https://tokens.example.com/figma-tokens.json",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "spacing", "type": "size" }
    ]
  },
  {
    "name": "Component Tokens",
    "path": "./src/tokens/components.css",
    "groups": [
      { "name": "button", "type": "color" },
      { "name": "input", "type": "color" }
    ]
  }
]

​
Monorepo

In a monorepo with tokens in multiple packages:
settings.json
"designTokensExplorer.sources": [
  {
    "name": "Core",
    "path": "./packages/tokens-core/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "radius", "type": "radius" }
    ]
  },
  {
    "name": "Brand A",
    "path": "./packages/tokens-brand-a/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  },
  {
    "name": "Brand B",
    "path": "./packages/tokens-brand-b/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  }
]

​
Sharing settings across a team

Token source configuration is typically kept in workspace settings (.vscode/settings.json) so it is shared with the team:
.vscode/settings.json
{
  "designTokensExplorer.sources": [
    {
      "name": "Design System",
      "path": "./tokens/tokens.css",
      "groups": [
        { "name": "color", "type": "color" },
        { "name": "space", "type": "size" }
      ]
    }
  ]
}
Commit this file to version control so that every team member gets the same token sources without manual setup.

​
Reload behavior

  • Local sources are watched for file changes. When any source file is saved, only that source is reloaded — other sources remain cached.
  • Remote sources are fetched once on activation. To re-fetch, run Design Tokens: Refresh Sources.
  • When any source changes (file or config), the adoption audit re-runs in the background automatically.

​
Search across sources

The search box in the sidebar filters tokens within the currently selected source. To search across all sources, use the Command Palette: 
Design Tokens: Search
This opens a QuickPick that searches all loaded tokens from all sources simultaneously.