CSS to Variables

About this plugin

Import CSS variables directly into Figma Variables and keep your design tokens consistent across design and code.

This plugin lets you paste or upload your existing CSS variable definitions and automatically converts them into structured Figma variables — including colors, typography values, spacing, radii, shadows, and more.

You can create new collections and modes, or feed existing collections by updating and expanding what you already have. That means: no more manual copy/paste chaos, no duplicate tokens, and no broken naming systems.

To keep things scalable and meaningful, you can also define the semantic scope (usage) of each variable, for example:

•Text (e.g. text-primary, text-muted)

•Background (e.g. bg-default, bg-surface)

•Border (e.g. border-default, border-focus)

Whether you’re building a full design system or just syncing tokens from a real project, this plugin keeps everything aligned: one source of truth, from CSS to Figma

Update:

Multi-Mode Import Support:

Added :modeName { } syntax for targeting specific modes (e.g.,

The plugin automatically creates modes by name when they don't exist

Variables without mode selectors use the fallback mode from settings

Grouping Syntax:

Added -- grouping syntax that converts to / in Figma (e.g.,

becomes colors/primary in Figma)

Works with both import and export

Enhanced Export:

"All Modes" option exports all modes with :modeName { } selectors

"Use -- for groups" option converts Figma folder structure (/) back to -- syntax