Skip to content

Group tokens

What It Does

The Group tokens node adds a namespace to a token set, placing all tokens under a new group name. It creates a hierarchical structure by nesting the entire token set under the specified name.

Inputs

NameDescriptionTypeRequired
NameThe name to use as the new group namespaceStringYes
Token SetThe token set to be grouped under the new namespaceObjectYes

Outputs

NameDescriptionType
Token SetThe resulting token set with all tokens grouped under the new namespaceObject

How to Use It

  1. Drag the Group tokens node into your graph.
  2. Connect a token set to the "Token Set" input.
  3. Set the "Name" input to the desired namespace (e.g., "colors").
  4. The node will create a new token set with all tokens nested under the specified name.

Tips

  • This node is useful for organizing tokens into logical categories.
  • You can create deeper nesting by using dot notation in the name (e.g., "theme.dark").
  • Group multiple token sets separately and then merge them to create a comprehensive token structure.

See Also

  • Ungroup tokens: For removing a namespace from tokens.
  • Array to Set: For converting a flat array of tokens to a hierarchical structure.

Use Cases

  • Token Organization: Organize tokens into logical categories like colors, typography, or spacing.
  • Theme Creation: Create theme-specific token sets by grouping tokens under theme names.
  • Token Merging: Prepare token sets for merging by grouping them under different namespaces.