Generating a Token Set
How to export a design token set through the Graph Editor.
Similar to static token sets, a graph-based set needs to define what tokens to be included, and what their values are.
To define the tokens of the token set, we need to generate a token set and set it as the output of the graph.
What is a token set?
A token set is an object that contains the definitions of a single, or multiple design tokens. For example, a set of tokens that contain hex values, or font-size values.
Basic Example
Create a design token
To create a design token that will be included in a token set, use the Create Design Token node. Here, you can give your token a name, set the type and apply a value to it. You can set the values of each input manually, or use other nodes such as Interpolation or Constant.
Create an array of design tokens
To turn a token, or many, into a token set, first we need to build an array with them. Using the Arrify node, you can build an array by defining your design tokens as the input.
Convert Array to Token Set
Now that you have an array of tokens, we need to turn it into a Token Set that we can output. Use the Array To Set node to turn the output of the Arrify node (currently an array of tokens), into a Token Set. You'll see that the output of the node is an object in the token format.
Output your Token Set
To capture the output of the graph and generate a tokenset, add an input named "tokenSet" and set the type to any . This will allow you to generate a token set, and export it directly.
Next, connect the output of the Array To Set node to your new tokenSet input
You'll now see your tokens presented with their resolved values in the table view of the set.
Last updated