What it does
The import-variables skill reads design tokens from a Figma file and writes them into your project's CSS file as custom properties. It handles colors, border radius, font families, and shadows. The output follows shadcn/ui's CSS variable conventions, including the @theme inline block for Tailwind v4 and separate :root / .dark sections for light and dark mode.
Instead of manually copying hex values from Figma into your CSS, you copy a link, run one command, and your entire theme is updated.
The skill preserves everything else in your CSS file — font-face declarations, animations, keyframes, utility classes, and any custom rules you have written. Only the variable sections are touched.
Usage
- Open the Figma file that contains your Style Guide (or any frame with your design tokens).
- Select the section that contains the color swatches, typography, and spacing definitions.
- Right-click and choose Copy link to selection.
- In your AI tool, run:
/import-variables https://figma.com/design/abc123/Kit?node-id=200-1
The agent reads the variables from Figma, detects your existing color format, converts values, and updates your CSS file.
What gets synced
Colors
Every color variable from your Figma file is mapped to a CSS custom property. If you use the ShadcnFigma.io Figma Kit, the mapping is automatic and guaranteed to be accurate.
The agent detects the color format already in use in your CSS (oklch, hsl, or hex) and converts all Figma colors to match. If your file uses oklch, the imported colors will also be oklch. No format mixing.
Example output:
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.468 0.272 279.601);
--primary-foreground: oklch(1 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.55 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--primary: oklch(0.832 0.169 279.601);
--primary-foreground: oklch(0.145 0 0);
--muted: oklch(0.22 0 0);
--muted-foreground: oklch(0.65 0 0);
}
Border radius
Figma stores radius values as plain numbers in pixels. The skill converts each value to rem (dividing by 16) and writes them as individual --radius-* variables.
:root {
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
The @theme inline block then references these variables to register them as Tailwind tokens:
@theme inline {
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
--radius-xl: var(--radius-xl);
}
Font families
Font variables from Figma are mapped to --font-* custom properties. The skill strips font fallbacks from the Figma value and re-appends the correct CSS fallback based on the variable name — sans-serif for --font-sans, monospace for --font-mono, and serif for --font-serif.
:root {
--font-sans: "Inter", sans-serif;
}
Shadows
Shadow definitions are mapped to --shadow-* custom properties, preserving the full CSS box-shadow syntax (offset, blur, spread, color).
Dark mode handling
Figma does not have a built-in concept of light and dark mode the way CSS does. The ShadcnFigma.io Figma Kit includes both light and dark values for every color variable, so the skill can split them into :root and .dark blocks in a single import.
What happens with generic Figma files?
When you use a Figma file that was not built with the Kit, Figma returns the variable values for whichever mode is active on the selected frame. If your frame is set to dark mode, you get dark values. If it is set to light mode, you get light values — but not both at once.
The skill detects which theme the values belong to (based on whether backgrounds are light or dark) and writes them into the correct CSS block. If dark values are detected, only the .dark block is updated. If light values are detected, only :root is updated. The other block is left untouched.
To import both themes from a generic Figma file, run the command twice — once with a frame set to light mode, once with a frame set to dark mode.
Tailwind v4 theme registration
For projects using Tailwind v4, the skill generates a @theme inline block that registers your CSS variables as Tailwind theme tokens. This is what makes classes like bg-primary, text-muted-foreground, and rounded-lg work with your custom values.
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--font-sans: var(--font-sans);
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
--radius-xl: var(--radius-xl);
}
If your project uses Tailwind v3, this block is skipped — the theme config handles token registration instead.
ShadcnFigma.io Figma Kit vs. generic Figma files
The skill supports two modes for reading variables:
ShadcnFigma.io Figma Kit (recommended) — variables in the Kit are structured specifically for this workflow. Both light and dark values are available in a single import, every variable maps 1:1 to a shadcn/ui CSS variable, and the result is guaranteed accurate with zero manual adjustment.
Generic Figma files (fallback) — for any other Figma file, the skill inspects variable names and types and does its best to map them to shadcn/ui conventions. Color variables are matched by name similarity, and types are inferred from the variable kind. Because Figma only returns the values for whichever mode is active on the frame, you get one theme per import. Run the command twice (once per mode) to fill both :root and .dark.
Generic format works, but results may need manual adjustment. The agent will flag any variables it could not map confidently.
A note on library variables. Your design tokens may live in a separate Figma file that was published as a library and used in other files. This is fully supported — the skill reads the resolved variable values as they appear on the selected frame, regardless of which file originally defines them.
What the skill does NOT do
The skill updates CSS custom properties. It does not modify your React components, your Tailwind config, or your component library. If you add a new color variable that did not exist before, you may need to use it in your components manually.
It also does not delete variables from your CSS that are not present in the Figma file. Existing variables that are not part of the import stay untouched.
Tips for best results
Use the ShadcnFigma.io Figma Kit. The Kit is designed specifically for this workflow and gives you guaranteed accuracy with zero guesswork. Generic Figma files work, but results may need manual adjustment.
You can link to any frame. The skill works whether you select the full Style Guide or a single section with just a few variables. With the ShadcnFigma.io Figma Kit, even a small frame will import both light and dark values for the variables it uses. For a complete theme import, select the full Style Guide page.
Keep your CSS file organized. The skill looks for :root, .dark, and @theme inline blocks to know where to insert or replace variables. If your CSS has an unusual structure, the agent may add new blocks instead of updating existing ones.
Check the summary. After the import is done, the agent prints a summary of what was added, updated, and what could not be mapped. Read it — it takes five seconds and saves you from surprises.
FAQ
Does this overwrite my entire CSS file?
No. The skill only modifies the variable declaration sections (:root, .dark, @theme inline). Everything else — font-face rules, animations, custom utilities, base styles — is preserved exactly as it was.
What if I already have variables in my CSS that are not in the Figma file? They stay. The skill does not remove existing variables. It adds new ones and updates values for variables that exist in both the CSS and the Figma file.
Can I run the import multiple times? Yes. Every time you run it, the skill reads the current state of your CSS file and the current state of the Figma variables, then reconciles them. It is safe to run repeatedly — for example, after a designer updates the token values in Figma.
What color format should I use? The skill auto-detects the format from your existing CSS. If your file already uses oklch, the imported colors will be oklch. If you are starting from scratch, oklch is recommended — it is what shadcn/ui uses by default and it has the best perceptual uniformity.
Does it support CSS-in-JS or other styling approaches?
No. The skill writes standard CSS custom properties in a .css file. This is the approach shadcn/ui uses, and it works with any React framework.
What happens if I use Tailwind v3 instead of v4?
The @theme inline block is skipped. The :root and .dark blocks are still generated normally. You may need to update your tailwind.config.js theme section to reference the new variables.
Why did the import only update .dark (or only :root)?
This happens with generic Figma files (not built with the ShadcnFigma.io Figma Kit). Figma returns values for whichever mode is active on the selected frame, so the skill can only write one theme at a time. To import the other theme, select a frame that uses the other mode and run the command again. With the ShadcnFigma.io Figma Kit, both themes are always imported together regardless of which frame you select.
My variables are defined in a separate Figma library file. Does that work? Yes. The skill reads the resolved values as they appear on the selected frame. It does not matter whether the variables were defined in the same file or in a published library — the result is the same.
Can I choose a different color format for the import? The skill matches whatever format is already in your CSS. If you want to switch formats (e.g., from hsl to oklch), change a few existing variables in your CSS to the new format before running the import — the skill will detect the new format and use it.