Hi there! I'm Juan, a front-end developer and product designer with over 9 years of experience. I love to create engaging experiences and tools that merge design and development. Here's some information about the plugin: 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 - Dev mode support. - Syntax 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. Variables - The 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)`. - String values are disregarded. Styles - Type: Includes font family, size, weight, style, letter spacing, and line height. - Colors: Utilizes `rgb()` functional 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. Let me know what you think!

CSS Variables Generator

Transform Figma variables and styles to CSS

Do you use CSS Variables Generator?

Review CSS Variables Generator?