Skip to content

Group Token Array

What It Does

The Group token array node adds a namespace prefix to all token names in an array, organizing them into a logical group. It prepends the specified name followed by a dot to each token's existing name.

Inputs

NameDescriptionTypeRequired
NameThe namespace to add to all token namesTextYes
TokensThe array of tokens to groupListYes

Outputs

NameDescriptionType
TokensThe array of tokens with modified namesList

How to Use It

  1. Drag the Group token array node into your graph.
  2. Connect a string to the "Name" input (e.g., "colors" or "spacing").
  3. Connect an array of tokens to the "Tokens" input.
  4. The node will output the same tokens but with each name prefixed by the namespace and a dot.

Tips

  • Use this to create hierarchical organization in your token sets.
  • The grouping only affects the token names, not their values or other properties.

See Also

  • Ungroup token array: For removing namespace prefixes from token names.
  • Flatten Token Sets: For flattening hierarchical token structures.

Use Cases

  • Category Organization: Group related tokens under categories like "color", "spacing", or "typography".
  • Component Tokens: Organize component-specific tokens under component names.
  • Theme Variants: Create theme-specific groupings like "dark" or "light".