.png)
.png)
{
+ "version": "2",
+ "org": "7xxxxxx1-3xx5-4xxx-xxx6-xxxx4axxxxf2",
+ "project": "xxxxfa7d-xxxx-4xxx-xxx2-xxxx0126xxxx",
+ "branch": "main",
+ "release": "",
+ "output": "tokens"
+}
+
.png)
.png)
Base Font Scale
.png)
Table Output
Stringify
Numeric Scale
Inside the subgraph explorer
Output
.png)
.png)
.png)
 (1) (1).png)
.png)
Subgraph explorer
.png)
.png)
.png)
.png)
.png)
Defining a design token using the Create Design Token node.
An output node with an input set to "tokenSet" and the type set to "any".
Our entire graph where we create design tokens, group them in an array, turn the array into a set and then output them.
Our outputted tokens in the table view of a Graph-Based set.
| Name | Description | Example |
|---|---|---|
| Number | Integers or decimals | 5, 3.14, 0.025 |
| String | Text strings, special characters or text with spaces. | "bold", "#FF5733" |
| Color | Color objects such as RGB, HSL etc. formats. | rgb(76, 190, 66), hsl(67, 96, 65) |
| Array | Lists of values (contains multiple items of the same type) | [10, 20, 30], ["#263724", "#ED8DF0"] |
| Object | Collections of related values with names in the format of "key" : "value". | { "foreground": "#177BF7"} |
| Boolean | True or False. Useful for decisions to your logic with the logic node. | true, false |
| Curve | A | |
| Token | A design token that meets the DTCG format. | |
| Token Set | A special type for design token collections | |
| Any | An agnostic type value that you probably don't want to use. |
.png)
.png)
 (1).png)
.png)
.png)
.png)
.png)
.png)
Opening Token Flow to understand token relationships.
.gif)
.png)
.gif)
.png)
.gif)
