CSS Variables Generator

About this plugin

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

How to use

1. Explore the pre-generated CSS output, tailored to your selected categories.
2. Review the console feedback to ensure everything is in order.
3. When you're ready, copy or download the content.

Key features

1. Syntax highlighting: Allows seamless code review.
2. Style names processing: Ensures valid CSS property names.
3. Relative length units: Pixel values are provided alongside their rem equivalents.
4. Real-time collaboration: Updates in real time, no need for re-runs.
5. Console: Errors and exceptions are handled by the plugin and reported to the user.
6. Light and dark themes supported.

Variables

1. The content structure is based on local collections.
2. If a given collection has more than one mode, the mode name is included as a suffix in the following format --{name}-{mode}.
3. 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).
4. All variable types are supported.

Styles

1. Type: Includes font family, size, weight, style, letter spacing, and line height.
2. Colors: Displayed in hex format or rgba() notation.
3. Gradients: Individual {name}-stop-n rules for seamless integration. This includes both color and position along the gradient's axis.
4. Shadows: Allows drop and inner shadows, including support for composite styles.
5. Grids: Includes size (when applicable), column/row count, and gutter size.

Feedback Welcome

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