Scopes support for Figma variables

This version was released on November 7, 2024.

We’re excited to share that our Figma Variables Sync plugin just got even better! We’ve added a new setting that lets you assign token types based on the scope of your variables.

Plugin settings - Assign to scope

Assign token types based on number and string variable scopes

Now when you import Figma variables as design tokens using our plugin, Supernova will automatically detect appropriate design token types based on the scopes of Figma variables, ensuring correct classification of number and string variables.

Tokens - Scope to token type

Mapping scopes to design token types

If variable has a unique scope selected in Figma, it will be assigned to the corresponding token type in Supernova.

If variable has more than one scope selected in Figma, it will be treated as a generic (string or dimension) token in Supernova.

Variable type in Figma

Unique scope in Figma

Token type in Supernova

Color variable

-

Color token

String variable

-

Generic string token

 

Text content

Generic string token

 

Font family

Font family

 

Font weight or style

Font weight

Number variable

-

Generic dimension token

 

Corner radius

Border radius

 

Width and height

Size

 

Gap

Spacing

 

Text content

Generic string

 

Stroke

Border width

 

Layer opacity

Opacity

 

Effects

Generic dimension

 

Font weight

Generic dimension

 

Font size

Font size

 

Line height

Line height

 

Letter spacing

Letter spacing

 

Paragraph spacing

Paragraph spacing

 

Paragraph indent

Generic dimension

Boolean variable

-

Not imported to Supernova

Setup

To set up a variable scope in Figma, open the Scope tab in the variable Details, and use the checkboxes to select where you want the variable to be available.


For a list of smaller improvements and bug fixes, visit our Bug fixes page here: