variables2css

About this plugin

Convert Figma design variables, including colors and numbers, into CSS, Sass, Tailwind, Stylus, Json, Less or Javascript (Styled-Components) variables to save time and ensure accuracy. Use it in Figma: Design and Development mode.

How to use it:

1. Select your collection and now also choose specific modes within that collection.
2. Choose your output language: CSS, Sass, Tailwind, Stylus, Json, Less, or Javascript (Styled-Components).
3. Select your preferred conversion: Hex, RGB, or HSL for colors and PX or Rem for units.
4. Include all themes if you've created themes in your collection, such as dark/light mode.
5. Ignore aliases to export base values or use the root alias as the variable name instead of the semantic alias.
6. Choose whether to add fallback for variables.
7. Generate your variables

What's New:

1. Saved export settings: Your last export settings are saved and automatically selected when you reopen the plugin.
2. Font Weight Scope: When the variable is scoped exclusively by font weight, the number is now output without a unit.
3. String Export: Now, you can also export your string variables easily.
4. Mode Selection: You can now select not just a collection but also specific modes within that collection, giving you greater flexibility and control over your design exports.
5. New Design: Enjoy a completely redesigned interface that enhances usability and streamlines your workflow.

Notice:

1. RGB Output Update: We've updated the RGB format to the new CSS standard: use rgb(255 0 0) for opaque colors and rgb(255 0 0 / 0.5) for transparent colors.
2. In the JSON export, the attribute previously known as "color" has been renamed to "value" within the color array objects. This change affects how colors are represented in the exported JSON. Please update your integrations accordingly.