diff --git a/docs/img/design-tokens/22-tokens-export-multiple.webp b/docs/img/design-tokens/22-tokens-export-multiple.webp new file mode 100644 index 0000000000..9daef9166c Binary files /dev/null and b/docs/img/design-tokens/22-tokens-export-multiple.webp differ diff --git a/docs/img/design-tokens/23-tokens-export-single.webp b/docs/img/design-tokens/23-tokens-export-single.webp new file mode 100644 index 0000000000..acefbd41f9 Binary files /dev/null and b/docs/img/design-tokens/23-tokens-export-single.webp differ diff --git a/docs/user-guide/design-tokens/index.njk b/docs/user-guide/design-tokens/index.njk index 75b13ffea2..3de6a9dbae 100644 --- a/docs/user-guide/design-tokens/index.njk +++ b/docs/user-guide/design-tokens/index.njk @@ -367,12 +367,97 @@ title: 10· Design Tokens

Importing and Exporting Tokens

You can export Tokens from Penpot and import them from your computer to a Penpot file. Tokens can be imported from the Tools option at the bottom of the Tokens tab.

-

The Import functionality allows you to upload and replace the global token set using a single file, while the Export functionality lets you download the current global token set using a single file to your system.

+

The Import functionality allows you to upload and replace the global token set using a single file or a folder with multiple files in it.

These features support JSON files formatted according to specific guidelines and preserve the ability to undo changes if needed.

Tokens import export
    -
  1. Import: At the Tools option, select Import, then select your tokens.json file.
  2. -
  3. Export: At the Tools option, select Export. This will export all the tokens, including token sets and themes.
  4. +
  5. Import: Click Tools, then select Import to view import options.
  6. +
  7. Export: Click Tools, then select Export to view export options.
+ +

Import Options

+

Single file

+ +

You can import a JSON file comprising all tokens, token sets and token themes.

+

When importing a single file, the first-level keys of the json file will be interpreted as the set name.

+ +
+
+  {
+    "Global": {
+      // first-level key will be interpreted as set name
+      "color": {
+        "300": {
+          "$value": "red",
+          "$type": "color",
+          "$description": "my token description"
+        }
+      }
+    },
+    "Brands/A": {
+      // first-level key will be interpreted as set name
+      "color": {
+        "accent": {
+          "$value": "{red}",
+          "$type": "color",
+          "$description": "my token description"
+        }
+      }
+    },
+    "Brands/B": {
+      // first-level key will be interpreted as set name
+      "color": {
+        "accent": {
+          "$value": "#fabada",
+          "$type": "color",
+          "$description": "my token description"
+        }
+      }
+    }
+  }
+
+
+ +

Multifile

+

Imports a folder containing multiple JSON files (one per Token Set) and additional files like $themes.json or $metadata.json configurations. When importing multiple files, the name and path of the individual json files inside the folder will be interpreted as set names. These files should only contain tokens.

+

Multifile folder structure example:

+ +
+    folder/
+    ├── global/
+    │   ├── colors.json		  // can only contain tokens
+    │   └── dimension.json	// can only contain tokens
+    ├── mode/
+    │   ├── dark.json       // can only contain tokens
+    │   └── light.json      // can only contain tokens
+    ├── $themes.json        // themes config
+    └── $metadata.json      // other metadata config
+  
+
+
The main folder name won’t be used to build token set names, so in this example, folder will be ignored in the set names.
+ +

Export Options

+

Just like with importing, you can export tokens, themes and sets either in a single JSON file or in multiple files. There is no difference in the content being exported; the choice depends on your team's preferences for file organization: a single file with all the tokens, sets and themes, or a folder structure with separated JSON files organized by sets.

+

In both cases you can preview the result of the export options:

+ +
+ Tokens export with multiple files +
Exporting tokens as multiple files.
+
+ +
+ Tokens export with single file +
Exporting tokens as a single file.
+
+ + + + + + + + + +