CSS Variables to Figma

About this plugin

Import css variables into Figma variables

This plugin enables you import color variables from CSS into Figma, supporting both single-mode and dual Light/Dark mode setups. It maps your CSS variables to Figma's variable modes, converting formats like OKLCH (Tailwind), HEX, RGBA, and RGB into Figma-compatible HEX values. OKLCH, P3, and HCT color values are also preserved and attached to each variable for reference.

Example:

How it works:

1. Paste your CSS variables in the text area below.
2. Click "Export to JSON" to generate a Figma-compatible variables file.
3. Import the JSON file into Figma using the Figma Variables by Honza Toman

Watch video→ how it works.

Currently supported:

1. Color variables
2. Attach oklch, p3 colors and HCT values to variable syntax

Next updates:

1. Border radius variables
2. Spacing variables
3. Shadows
4. ...

Feedback and support

1. Let us know your feedback and suggestions! @sans_sherif
2. Support the development of this plugin buy us a coffee ☕