CSS Variables to Figma

About this plugin

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 ☕