Export Figma variables

About this plugin

Plugin exports variables to ts-code or css-code. Ts-code is especially useful if you use css-in-js libraries.

The plugin implies that you have base, semantic and component layers of variables. Component layer can use variables from other layers and reference on variables from its own layer. Semantic layer should only use variables from the base layer.

For example, base layer can have variables like color/blue/100, color/blue/200, color/red/100 for colors and space/100, space/100 for spacings and so on.

Semantic layer can have variables like color/primary, color/on-primary and so on. All variables should use variables from base layer.

Component layer must have variables grouped by components like button/color/text, button/color/bg, button/color/bg-hover, tooltip/color/text and so on. Top-level groups must be named by component names. These ones will be used for generating corresponding file names.

Usage

If you want to generate code for semantic layer you should specify only base collection. The component collection must be empty. The plugin generates two files: variables.css and variables.ts.

If you want to generate code for component layer you should specify base collection and component collection as well. In this case, plugin generates files only with ts-code.