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
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.json 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"
+ }
+ }
+ }
+ }
+
+
+
+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
+
+
+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:
+ +
+
+