Group and filter tokens
Organize your token list using grouping and token sets.
Grouping tokens
The Design Tokens panel can display your tokens in two views:
| View | When to use |
|---|---|
| Group by type | When you have a large set and want to browse color tokens, font tokens, and number tokens separately |
| Flat list | When you want to scan all token names at once in alphabetical order |
Switch between views using the toggle in the panel header.
Tokens named with / separators (e.g., color/primary/500) are displayed hierarchically — nested under their parent group. This makes deep token structures much easier to navigate.
Using token sets to scope the view
Switching the active token set in the panel changes which tokens are displayed. Only tokens belonging to the active set are shown. This helps you focus on one theme or style variant without seeing the full combined list.
Tips
- Use consistent naming prefixes (
color/,spacing/,font/) so that grouping by type produces clean, readable groups. - Keep the total number of tokens in a set manageable — if a set has hundreds of tokens with inconsistent naming, browsing becomes difficult even with grouping.