Token Inspector: Extract Tailwind & Figma Tokens

Yes, a token inspector is a tool or workflow that extracts design tokens—such as colors, spacing, typography, and shadows—from a live website or a Figma file, converting them into structured data like Tailwind CSS configuration or JSON. You typically enter a URL or connect a Figma file, and the tool scans the CSS or design layers to output a token set you can use directly in your project.

What Are Design Tokens?

Design tokens are the atomic values that define a design system: colors, font sizes, spacing scales, border radii, shadows, and more. In Figma, tokens are often stored as variables or styles (e.g., a color style named “primary/500”). On a website, tokens appear as CSS custom properties (like --color-primary) or as hardcoded values in compiled CSS. A token inspector bridges the gap between design and code by extracting these values and formatting them for a specific framework—Tailwind being the most common.

For Tailwind, tokens map to the tailwind.config.js file, where you extend the default theme with custom colors, spacing, fonts, and more. For example, a Figma color variable Brand/Primary with value #2563EB becomes colors: { brand: { primary: '#2563EB' } } in the config.

How Token Extraction Works

There are two main extraction paths: from a website (CSS) and from Figma (design file).

From a Website (CSS)

When you point a token inspector at a URL, it fetches the site’s CSS files (including those generated by Tailwind, styled-components, or plain CSS) and parses them. It looks for:

CSS custom properties (variables) defined in :root or other selectors.
Hardcoded hex, rgb, hsl, or named colors.
Numeric values for spacing (padding, margin), font sizes, line heights, border radii, and shadows.

The tool then deduplicates values, groups them by type (color, spacing, etc.), and generates a JSON or Tailwind config snippet. Some tools also detect Tailwind-specific classes (like bg-blue-500) and infer the underlying palette.

From Figma

Figma token extraction uses the Figma REST API or plugins. The inspector connects to your file and reads:

Local variables (if you use Figma Variables).
Text styles (font family, size, weight, line height).
Color styles (solid fills, gradients).
Effect styles (shadows, blurs).
Grid and spacing values from frames and auto-layout.

The output is a structured token file, often in the W3C Design Tokens format (JSON), which can then be converted to Tailwind config using tools like tailwindcss-token-importer or Style Dictionary.

Choosing a Token Inspector

When selecting a token inspector, consider the following:

Source type: Does it support both website URLs and Figma files? Some only do one.
Output format: Does it output Tailwind config, plain JSON, CSS variables, or SCSS? Make sure it matches your workflow.
Real-time vs. static: Some tools scan a live site and update as you browse; others require a one-time upload.
Handling of dynamic values: Can it resolve CSS calc() expressions or CSS variables that reference other variables?
Cost and limits: Free tiers often limit the number of scans or file size.

Popular options include Tokens Studio (Figma plugin), Supernova (full design system management), and CSS Stats (for CSS analysis). For a quick one-off, a browser extension like CSS Peeper can extract colors and fonts manually, but it doesn’t export Tailwind config.

Common Problems and Limitations

Token extraction is not always perfect. Here are typical issues:

Purged CSS: If the website uses Tailwind with purge (now “content”), only the classes actually used in the HTML are present in the CSS. The inspector only sees those, so you might miss the full palette.
Dynamic values: CSS variables that are set via JavaScript (e.g., theme switching) may appear as empty or unresolved.
Duplicate values: The same hex might appear under different names; the inspector might merge them or keep both, depending on its logic.
Figma variables vs. styles: If a design uses styles (older method) instead of variables, extraction is harder because styles don’t have a consistent naming structure.
Naming conflicts: Token names like “primary” might map to different colors in different contexts (e.g., dark mode). The inspector may not handle context automatically.

To mitigate these, manually review the output and adjust for your project’s needs.

Comparing Token Inspectors

Here’s a comparison of common approaches:

Figma plugins (Tokens Studio, Figma Tokens): Best for design-to-code handoff. They sync with your Figma file and can push tokens to GitHub via a build script. They output W3C format or Tailwind config directly.
Browser extensions (CSS Peeper, WhatFont): Quick inspection of a single page, but no batch export or config generation.
Web services (Style Dictionary, Theo): These are not extractors but converters. You feed them a token JSON, and they generate multiple formats (CSS, SCSS, Tailwind, etc.). You still need to extract the tokens from Figma or CSS first.
All-in-one platforms (Supernova, Specify): They integrate with Figma and can also import from CSS. They offer a full design system workflow but come with a learning curve and cost.

For a single project, a Figma plugin plus a converter is often sufficient. For larger teams, a platform might be worth the investment.

Costs and Free Options

Many token inspectors have free tiers:

Tokens Studio: Free for personal use, with paid plans for teams (around $6/user/month).
Figma Tokens (now part of Tokens Studio): Free plugin.
CSS Peeper: Free browser extension.
Style Dictionary: Open-source (free).

Web-based extractors like tailwind-inspector (a hypothetical tool) may offer a free scan with limited pages or require a subscription for unlimited use. Always check the pricing page for current rates.

Security and Privacy Considerations

When using an online token inspector, you are sending your website’s CSS or your Figma file’s data to a third-party server. Consider:

Figma files: Ensure the plugin only reads the file you select and doesn’t have access to other files. Read the plugin’s permissions.
Website CSS: Public CSS is already visible to anyone, so sending a URL is low-risk. However, if your site has admin-only pages with sensitive styles, don’t scan those.
Data retention: Check if the service stores your tokens or logs. For sensitive projects, prefer local tools or self-hosted converters.

For maximum privacy, use a local script that parses CSS files directly (e.g., with Node.js and PostCSS) or a Figma plugin that runs locally without sending data to a server (though most plugins do send data to their own backend for processing).

Alternatives to Automated Extraction

If automated extraction isn’t giving you clean results, consider:

Manual collection: Use the browser’s DevTools to inspect CSS custom properties and copy them into a JSON file. This is tedious but gives you full control.
Design system documentation: If the site or design has a style guide (like Storybook or a Notion page), extract tokens from there instead of scraping.
Using Tailwind’s built-in theme: If the site uses default Tailwind colors, you can just use the default config and skip extraction.

Frequently Asked Questions

Can I extract tokens from a website that uses CSS-in-JS (like styled-components)?

Yes, but it’s trickier. CSS-in-JS often generates dynamic class names, but the styles are still in the CSS bundle. The inspector can parse the CSS, but it may not recognize the semantic token names. You might get raw values instead of meaningful names.

Does the token inspector work for dark mode tokens?

It depends. If dark mode tokens are defined as CSS variables under a prefers-color-scheme media query, the inspector might only see the default (light) values. Some tools let you specify a user agent or viewport to trigger dark mode, but not all do. For Figma, dark mode tokens are usually separate variables, so they extract fine.

Can I use the extracted tokens directly in my Tailwind project?

Usually yes, but you may need to adjust the format. For example, if the inspector outputs a flat JSON, you might need to nest it under the correct keys (colors, spacing, etc.) in tailwind.config.js. Many tools offer a “Tailwind config” export that does this for you.

What if the website uses a CDN for Tailwind (like the Play CDN)?

The Play CDN generates CSS on the fly in the browser, so the CSS is not in a static file. A token inspector that fetches the HTML won’t see the generated styles. You would need to use a browser extension that runs after the page loads, or manually copy the styles from DevTools.

Is there a way to extract tokens from a Figma file without a plugin?

You can use the Figma REST API to fetch file data, but you’ll need to write a script to parse the JSON for styles and variables. This is more technical but gives you full control. There are also community scripts that do this.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →