Handoffer

About this plugin

Generate multiple files containing all the local variables/tokens 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) Adjust the settings according to your needs;

Step 4) Click "Export" to generate the code files.

-----

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 or RGBA (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?

By default, all color variables will be exported in hexadecimal format (e.g., #000000). You can change this setting to export the colors in RGBA format if you wish.

-----

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.