Back to Plugins
CSS Variables

CSS Variables

A utility tool for importing and exporting variables between CSS and Figma.

importcssvariablescss variablesexport variablesimport variablesexport

Plugin Preview

CSS Variables preview

About this plugin

CSS VariablesImportVariables can be imported into Figma either as a new collection or existing collection can be updated.Almost all the CSS color units are supported.Only px, in, cm, mm, pt, pc and rem length units are supported. And for the rem unit, the default font size 16px is used for conversion.The variables other than color and length units are silently ignored.ExportMultiple modes can be exported at once from Figma.The color units can be exported in one of the following spaces, sRGB(hex, rgb, hsl, hwb), CIELAB(lab, lch), Oklab, Oklch, display-p3.Number unit can be exported either as pixel(px) or rem.Also there's an option to preserve the alias.

Plugin Details

Version6
CreatedAugust 8, 2023
Last UpdatedMay 7, 2024
Categorydesign-tools-other
Creatormohan vadivel
Stats485 installs, 55 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/index.html
  • main:dist/code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • none