Imported Variable Types and Token Types
Figma has 4 types of Variables, and Tokens Studio supports 24 unique Token Types.
When you import Variables into the Plugin, it does not know the correct Token Type to assign to the new Token outside of those 4 Token Types.
This means you might have to manually change the type of the Token created when you import your Variables. The fastest way to do this is to edit the code files.
Change Token Type in Code
Here's a list of the common names of our Token Types, and how they should be written in the code files. For example, a Variable set for Font Family will be imported with the text Token Type, because its created as a string variable in Figma.
| Token Type | Variable Type | Technical Type in Code |
|---|---|---|
| Color | Color | color |
| Font Family | String | fontFamilies |
| Font Weight | String / Number | fontWeights |
| Font Size | Number |
|
| Line Height | Number |
|
| Letter Spacing | Number |
|
| Paragraph Spacing | Number |
|
| Border Radius | Number | borderRadius |
| Border Width | Number | borderWidth |
| Dimension | Number | dimension |
| Spacing | Number | spacing |
| Sizing | Number | sizing |
Number | Number | number |
| Opacity | Number | opacity |
| Text | String | textCase |
| Boolean | Boolean | color |