Importing tokens

Import design tokens from your existing design system into Subframe. The theme importer supports Tailwind CSS (v3 and v4), CSS variables, and JSON files — including Figma design token exports.

Import review screen showing token preview with status indicators for new and updated tokens, with supported source format logos for Tailwind CSS, Figma, Design Tokens, and shadcn/ui

Supported formats

Subframe supports the following theme formats for import:

Tailwind CSS (v4)
Tailwind config (v3)
CSS variables
Design Tokens (JSON)

Paste or upload .css files containing @theme blocks with CSS custom properties:

@theme {
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-neutral-100: #f5f5f5;
}

.dark {
  --color-brand-500: #60a5fa;
  --color-brand-600: #3b82f6;
  --color-neutral-100: #1f1f1f;
}

Subframe detects Tailwind v4 syntax automatically from .css, .scss, or .less files. Tokens declared inside a .dark { } block are imported as dark-mode values for their matching light tokens. Importing dark-mode tokens enables dark mode on your current theme automatically — see Dark mode. Files with only a .dark { } block are also supported.

Paste or upload .js, .ts, .mjs, or .cjs config files:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#3b82f6',
          600: '#2563eb',
        },
      },
    },
  },
}

Subframe parses the theme.extend.colors object from your config.

Paste CSS custom properties directly:

--color-primary-100: #eeeeee;
--color-primary-200: #dddddd;
--color-primary-300: #cccccc;

Color values can be hex, rgb, hsl, or modern CSS color syntax like oklch(), lab(), and color(). Wide-gamut colors (such as Display P3) are converted to the closest sRGB value.

Upload a .json file containing design tokens, following the W3C Design Tokens Format. This works with Figma’s variables export.Subframe reads color values and token structure from the JSON.

Import your theme

Upload your tokens

On the Theme page, click Import and select Upload from file….Add your tokens by uploading or pasting:

Upload files: Drag and drop or browse for files. Multiple files supported.
Code editor: Click Tailwind CSS (v4) or Tailwind CSS (v3) to paste CSS or JavaScript directly. The editor provides syntax highlighting and detects the format automatically.

Review tokens

Subframe parses your input and shows a preview of detected tokens. Each token shows its status:

New — token will be added to your theme
Updated — token matches an existing token name and will update its value
Unchanged — token already exists with the same value

When your imported tokens reference other variables (e.g. var(--color-brand-500)), Subframe automatically maps these as aliases — references to other tokens rather than hard-coded values. Aliases can reference other tokens in the same import or existing tokens in your theme. If a referenced variable can’t be resolved, it’s converted to a direct color value.If your input includes dark-mode tokens, the preview shows the light and dark palettes side by side so you can review both before importing.To leave a new or updated token out, click it and select Skip import. Select Add to import to bring it back.Above the tokens, the preview notes the default font the import sets and any font it couldn’t find. Declarations Subframe can’t import are listed under the tokens as Not imported, with the reason.

Import

Click Import to update your theme. New tokens appear immediately in your theme, organized into folders matching the structure of your import. Use Version History to revert your import.

Importing from Figma

You can export your Figma variables as design tokens and import them directly into Subframe:

Open Variables in your Figma file
Right-click on a collection and select Export modes
Open the ZIP file to see the JSON files for each mode’s tokens
Upload the JSON file in the theme import dialog in Subframe

You can upload multiple JSON files from different collections at once.

Limitations:

Subframe currently supports a single mode. Import one mode (e.g. light OR dark), not both.
Figma does not export text styles as variables. Use a Figma plugin to export text tokens separately, or add text styles manually in your theme.

Troubleshooting

No tokens detected

Verify your file format:

CSS files should contain -- prefixed custom properties with valid color values — hex, rgb, hsl, or modern syntax like oklch() and color()
Tailwind configs should export a theme.extend.colors object
JSON files should contain color values in a supported design token format
Remove preprocessor-specific syntax (Sass variables, Less mixins) before importing

Tokens showing as 'Updated' unexpectedly

Tokens with the same name as existing tokens in your theme are marked as updates. To keep the existing value, click the token and select Skip import. To add it as a new token instead, rename it in your source and import again.

Import is blocked

If a token can’t be applied, the preview says which one and why, and Import stays disabled. Nothing is imported until you fix the source or skip that token. If skipping tokens caused the problem, click Restore skipped.

Aliases not resolving

Alias references (e.g. var(--color-brand-500)) only resolve against other imported tokens or existing tokens in your theme. If the target token doesn’t exist in either, the alias is converted to a direct color value.

Design

Browser

Agent

Building from scratch

Admin and billing

Supported formats

Import your theme

Importing from Figma

Limitations:

Troubleshooting

​Supported formats

​Import your theme

​Importing from Figma

​Limitations:

​Troubleshooting

Supported formats

Import your theme

Importing from Figma

Limitations:

Troubleshooting