Generating a Token Set

How to export a design token.

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

1

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.

There are of course many ways to generate the value of a token, and creating a design token may happen elsewhere in the flow, but the intention is the same.

Defining a design token using the Create Design Token node.

2

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.

3

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.

4

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.

An output node with an input set to "tokenSet" and the type set to "any".

Next, connect the output of the Array To Set node to your new tokenSet input

Our entire graph where we create design tokens, group them in an array, turn the array into a set and then output them.

You'll now see your tokens presented with their resolved values in the table view of the set.

Our outputted tokens in the table view of a Graph-Based set.