CSS Variables to Figma

Import css variables into Figma variablesThis 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.

Update:

AttachExample: .light {--color-primary: #000;}.dark {--color-primary: #fff;}How it works: Paste your CSS variables in the text area below.

Click "Export to JSON" to generate a Figma-compatible variables file.

Import the JSON file into Figma using the Figma Variables by Honza TomanWatch video→ how it works.

Currently supported: Color variablesAttach oklch, p3 colors and HCT values to variable syntaxNext updates: Border radius variablesSpacing variablesShadows...Feedback and supportLet us know your feedback and suggestions! @sans_sherifSupport the development of this plugin buy us a coffee ☕