CSS Variables Generator

Elevate the design-to-development workflow by instantly converting Figma variables and styles into CSS custom properties.

How to useExplore the pre-generated CSS output, tailored to your selected categories.

Review the console feedback to ensure everything is in order.

When you're ready, copy or download the content.

Key featuresSyntax highlighting: Allows seamless code review.

Style names processing: Ensures valid CSS property names.

Relative length units: Pixel values are provided alongside their rem equivalents.

Real-time collaboration: Updates in real time, no need for re-runs.

Console: Errors and exceptions are handled by the plugin and reported to the user.

Light and dark themes supported.

VariablesThe content structure is based on local collections.

If a given collection has more than one mode, the mode name is included as a suffix in the following format --{name}-{mode}.If a value is aliased to another variable, it includes the root variable name, not the value itself. For example: --my-variable: var(--my-alias).

All variable types are supported.

StylesType: Includes font family, size, weight, style, letter spacing, and line height.

Colors: Displayed in hex format or rgba() notation.

Gradients: Individual {name}-stop-n rules for seamless integration. This includes both color and position along the gradient's axis.

Shadows: Allows drop and inner shadows, including support for composite styles.

Grids: Includes size (when applicable), column/row count, and gutter size.

Feedback WelcomeFeel free to share your feedback and ideas to enhance the plugin's functionality.