From 58e86a545a55b54871fdfc0fbd6e7ac9edeaeecc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?andr=C3=A9s=20gonz=C3=A1lez?= Date: Tue, 3 Mar 2026 09:01:48 +0100 Subject: [PATCH] :books: Add info about grouping tokens (#8508) --- docs/img/design-tokens/40-tokens-groups.webp | Bin 0 -> 14806 bytes .../design-systems/design-tokens.njk | 44 ++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 docs/img/design-tokens/40-tokens-groups.webp diff --git a/docs/img/design-tokens/40-tokens-groups.webp b/docs/img/design-tokens/40-tokens-groups.webp new file mode 100644 index 0000000000000000000000000000000000000000..3e482f1c26780eb1ec43c28e288425ba7ad95ee2 GIT binary patch literal 14806 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 literal 0 HcmV?d00001 diff --git a/docs/user-guide/design-systems/design-tokens.njk b/docs/user-guide/design-systems/design-tokens.njk index b259a4bff0..b83b984a63 100644 --- a/docs/user-guide/design-systems/design-tokens.njk +++ b/docs/user-guide/design-systems/design-tokens.njk @@ -690,6 +690,50 @@ ExtraBold Italic
Exporting tokens as a single file.
+

Token groups

+

Token names are rarely short and simple. They often contain multiple sections that represent token type, state, property, variant, and more. To help manage this complexity, Penpot automatically organizes tokens into groups based on the structure of their names.

+ +

How token groups work

+

When Penpot encounters a dot (.) in a token name, it breaks down the name and structures it as nested groups. For example, a token named button.primary.default.background-color is organized into groups like this:

+
    +
  • button (group)
  • +
  • primary (group)
  • +
  • → → default (group)
  • +
  • → → → background-color (token)
  • +
+

If you have another token like button.primary.hover.background-color, it shares the same group structure (button.primary) and appears nested within those groups.

+

This structure matches how tokens are organized in JSON format. When you export tokens, a token like button.primary.default.background-color is structured like this:

+
{
+  "button": {
+    "primary": {
+      "default": {
+        "background-color": {
+          "$value": "#f00",
+          "$type": "color"
+        }
+      }
+    }
+  }
+}
+ +

Visual appearance

+

In the Tokens panel, token groups appear as nested, collapsible folders. Only the last segment of the token name (the actual token) appears as a pill. The segments before it appear as group folders that you can expand or collapse.

+

When you create a new token, Penpot automatically unfolds the required path so you can see your newly created token. If you manually unfold a group path, it stays open even when you navigate to other areas of the app (this state resets if you reload the page).

+
+ Design Tokens Grouping +
+ +

Working with token groups

+

Token pills keep the same actions as before: you can delete, edit, and duplicate tokens from the context menu. When editing a token name, you'll see the full token path including all group segments.

+ +

Moving tokens between groups

+

When you edit a token name and change the group segments, the token moves to its new group automatically. If the new group doesn't exist, Penpot creates it. If the group already exists, the token is moved there.

+

For example, if you rename color.background.secondary to c.bg.sec, the token moves from the color.background group to a new c.bg group.

+ +

Deleting token groups

+

When you delete a token, if it's the last token in its group, the empty group is automatically removed as well. You can also delete entire token groups directly, which removes all tokens within that group.

+

Deleting a token group removes all tokens it contains. Make sure you want to delete all tokens in a group before removing it.

+