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

Transform Figma variables and styles to CSS