Handoffer

About this plugin

Generate a stylesheet code (.css) containing all the local variables of your Figma file.

1. How to use?

Step 1) Open the file that contains your variables (e.g., your Design System file);

Step 2) Run the plugin;

Step 3) Copy the generated code to your .css file

2. What types of variables are supported?

The plugin can handle all variable types supported by Figma files:

1. Color variables will be printed as HEX codes (containing alpha channel if color opacity isn't 100%);
2. Number variables will be loaded with "px" measure;
3. String variables will be printed between quotes;
4. Boolean variables will also be printed between quotes - but only if you don't add a ternary operator to variable description (see topic 5).

3. Can I change the unity measure for number variables?

At this time, number variables can just be loaded with "px" measure.

4. Which formats can color variables be printed?

At this time, all color variables can just be loaded in Hexadecimal format (e.g., #000000).

5. How to personalize output of boolean variables?

You can personalize the output of bool variables by writing a ternary operator directly in variable description. The first text after "?" will be printed if variable is true, while de second text (after ":") will be printed if variable is false.

For example, if you want to use a variable to control the display property in CSS, you can do that by setting the following code line to variable description:

* This plugin is a Work In Progress, which means that the features are under development and can be improved or modified in a next update.