CSS to Figma Variables

CSS to Figma Variables converts your CSS custom propertiesinto native Figma variablesno manual re-entry, no copy-paste-per-token.

Paste a block of CSS custom properties, hit Create variables, and eachdeclaration becomes a matching Figma variable inside an "Imported CSS"collection:• Colors — HEX, RGB, and RGBA values become COLOR variables• Numbers — px values become FLOAT variablesVariable names mirror your CSS structure: --color-primary becomescolor/primary, so related tokens group into folders automatically.

Re-run it anytime — existing variables are updated in place instead ofduplicated, so your CSS stays the source of truth.

How to use1. Run the plugin2. Paste your :root { --… } CSS (or edit the built-in sample)3. Click Create variables4. Find them in the "Imported CSS" collection in the Variables panelGreat for bringing an existing web design system's tokens into Figma,or keeping code and design in sync.