Our team is using the Tokens Studio plugin, and looking to shift to Figma Variables as our starting point. Part of this is being able to start with Figma Variables, and use the “Import Variables” feature of the Tokens Studio plugin. The limitation is on the Figma side, namely with the types supported, and what’s available via the API. I will elaborate.
I have a beautifully crafted set of Figma Variables that I need to automate getting into Tokens Studio so we can sync tokens to our code repository and transform into various export formats. Because of the limitation of only 4 types available in Figma Variables, any token values with units (i.e. “5px”) have to be of type “String”, which, when imported in Tokens Studio, sets them all as “Text”.
In my testing, all the following tokens that have proper types in Tokens Studio land as “Text”:
- border radius
- border width
- font family
- line height
- font size
- text case
- space
If we look at the w3c spec, the types that should be used for these primitive values are:
- border radius (dimension)
- border width (dimension)
- font family (font family)
- line height (dimension)
- font size (dimension)
- text case (no explicit spec definition, so “string”)
- space (dimension)
It would be great if Figma Variables supported types to the degree of Tokens Studio, but minimally it should support the w3c spec so that going from Figma Variables > Tokens Studio doesn’t require a whole bunch of manual work.
I raised this first in the Tokens Studio Slack #feature-requests channel, and they indeed confirmed its not something that can be addressed on the plugin side, but something the Figma team needs to address.
This gets exponentially more complex with themes, so getting the fundamental types right feels like a foundational piece that should have prime priority.