tokens-bruecke 2.11.3 → 2.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/release.yml +0 -5
- package/README.md +59 -10
- package/bin/cli.js +1 -1
- package/declaration.d.ts +5 -0
- package/global.d.ts +2 -8
- package/package.json +11 -10
- package/tsconfig.base.json +11 -6
- package/tsconfig.cli.json +1 -0
- package/tsconfig.json +0 -0
- package/webpack.config.cli.js +6 -0
- package/webpack.config.js +6 -0
|
@@ -46,8 +46,3 @@ jobs:
|
|
|
46
46
|
run: gh release create ${{ github.ref_name }} ./dist/figma-plugin.zip --title "${{ github.ref_name }}" --generate-notes
|
|
47
47
|
env:
|
|
48
48
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
49
|
-
|
|
50
|
-
- name: Publish to npm
|
|
51
|
-
run: pnpm publish --no-git-checks --access public
|
|
52
|
-
env:
|
|
53
|
-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
package/README.md
CHANGED
|
@@ -30,6 +30,7 @@ The plugin converts Figma variables into design-tokens JSON that are compatible
|
|
|
30
30
|
- [Include `.value` string for aliases](#include-value-string-for-aliases)
|
|
31
31
|
- [Include Figma metadata](#include-figma-metadata)
|
|
32
32
|
- [Split collections into separate files](#split-collections-into-separate-files)
|
|
33
|
+
- [Omit collection names](#omit-collection-names)
|
|
33
34
|
- [Use as cli tool](#use-as-cli-tool)
|
|
34
35
|
- [Installation](#installation)
|
|
35
36
|
- [Usage](#usage)
|
|
@@ -42,6 +43,7 @@ The plugin converts Figma variables into design-tokens JSON that are compatible
|
|
|
42
43
|
- [GitLab](#gitlab)
|
|
43
44
|
- [Custom server](#custom-server)
|
|
44
45
|
- [Show output](#show-output)
|
|
46
|
+
- [Plugin window height](#plugin-window-height)
|
|
45
47
|
- [Config autosaving](#config-autosaving)
|
|
46
48
|
- [Styles support](#styles-support)
|
|
47
49
|
- [Typography](#typography)
|
|
@@ -256,6 +258,41 @@ Is `off` by default. When enabled, each Figma variable collection is exported as
|
|
|
256
258
|
|
|
257
259
|
This is useful when you want to keep component-level token files separate (e.g. `button.tokens.json`, `card.tokens.json`).
|
|
258
260
|
|
|
261
|
+
### Omit collection names
|
|
262
|
+
|
|
263
|
+
Is `off` by default. When enabled, the plugin drops the top-level collection name from the output and merges all variables into a single flat namespace (variables are still grouped by the `/` separator in their names).
|
|
264
|
+
|
|
265
|
+
```json
|
|
266
|
+
// Without "Omit collection names" (default)
|
|
267
|
+
{
|
|
268
|
+
"Primitives": {
|
|
269
|
+
"color": {
|
|
270
|
+
"primary": { "type": "color", "value": "#000000" }
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
"Semantic": {
|
|
274
|
+
"button": {
|
|
275
|
+
"background": { "type": "color", "value": "{color.primary}" }
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
// With "Omit collection names"
|
|
281
|
+
{
|
|
282
|
+
"color": {
|
|
283
|
+
"primary": { "type": "color", "value": "#000000" }
|
|
284
|
+
},
|
|
285
|
+
"button": {
|
|
286
|
+
"background": { "type": "color", "value": "{color.primary}" }
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
Alias references are also rewritten so they point to the flat path (the collection prefix is removed).
|
|
292
|
+
|
|
293
|
+
> [!WARNING]
|
|
294
|
+
> If two variables in different collections share the same name, the last one wins and a collision warning is logged to the console. Rename conflicting variables (or keep this option off) to avoid losing values.
|
|
295
|
+
|
|
259
296
|
---
|
|
260
297
|
|
|
261
298
|
## Use as cli tool
|
|
@@ -296,14 +333,15 @@ This will fetch figma variables and export them in `out/tokens.json`
|
|
|
296
333
|
|
|
297
334
|
### Options
|
|
298
335
|
|
|
299
|
-
| Option
|
|
300
|
-
|
|
|
301
|
-
| `--api-key`
|
|
302
|
-
| `--oauth-token`
|
|
303
|
-
| `--file-key`
|
|
304
|
-
| `--output`
|
|
305
|
-
| `--config`
|
|
306
|
-
| `--split-by-collection`
|
|
336
|
+
| Option | Alias | Description | Required |
|
|
337
|
+
| ------------------------- | ----- | ------------------------------------------------------------------------------- | ------------------------------------------------- |
|
|
338
|
+
| `--api-key` | `-a` | Figma personal access token (PAT) | One of `--api-key` or `--oauth-token` is required |
|
|
339
|
+
| `--oauth-token` | `-t` | Figma OAuth token | One of `--api-key` or `--oauth-token` is required |
|
|
340
|
+
| `--file-key` | `-f` | Figma file key | Yes |
|
|
341
|
+
| `--output` | `-o` | Path to output file, or output directory when `--split-by-collection` | Yes |
|
|
342
|
+
| `--config` | `-c` | Path to configuration file | No |
|
|
343
|
+
| `--split-by-collection` | `-s` | Write each collection as a separate `.tokens.json` file in `--output` | No |
|
|
344
|
+
| `--omit-collection-names` | | Drop top-level collection names and merge all variables into one flat namespace | No |
|
|
307
345
|
|
|
308
346
|
> [!TIP]
|
|
309
347
|
> For automated pipelines, `--oauth-token` is preferred over `--api-key`. Personal Access Tokens expire every 90 days and require manual renewal, while OAuth tokens support programmatic refresh for indefinite access.
|
|
@@ -329,7 +367,8 @@ You can use a JSON configuration file to specify the export options for the CLI.
|
|
|
329
367
|
"usePercentageOpacity": false, // Export opacity as percentage (10%) instead of decimal (0.1)
|
|
330
368
|
"colorMode": "hex", // "hex" | "rgba-object" | "rgba-css" | "hsla-object" | "hsla-css";
|
|
331
369
|
"storeStyleInCollection": "none", // Name of one of your collection or "none" to keep them separated
|
|
332
|
-
"splitByCollection": false // Write each collection as a separate .tokens.json file
|
|
370
|
+
"splitByCollection": false, // Write each collection as a separate .tokens.json file
|
|
371
|
+
"omitCollectionNames": false // Drop top-level collection names and merge all variables into one flat namespace
|
|
333
372
|
}
|
|
334
373
|
```
|
|
335
374
|
|
|
@@ -401,6 +440,16 @@ If you want to see the generated JSON, you can enable the `Show output` option.
|
|
|
401
440
|
|
|
402
441
|
---
|
|
403
442
|
|
|
443
|
+
## Plugin window height
|
|
444
|
+
|
|
445
|
+
The plugin window auto-fits the height of its content, but you can adjust it manually using the resizer handle at the bottom of the settings view.
|
|
446
|
+
|
|
447
|
+
- **Drag** the handle up or down to set a custom height. The minimum is `360px` and the maximum is the current content height — you can't grow the window beyond what's actually there.
|
|
448
|
+
- **Double-click** the handle to reset back to auto-fit. The window snaps to match the content height again.
|
|
449
|
+
- Your manual height is preserved while the output preview is open, so you can resize both with and without the preview showing.
|
|
450
|
+
|
|
451
|
+
---
|
|
452
|
+
|
|
404
453
|
## Config autosaving
|
|
405
454
|
|
|
406
455
|
The plugin saves the config automatically. So, you don't need to set it up every time you run the plugin.
|
|
@@ -709,7 +758,7 @@ Unlike design tokens, Figma variables now [support only 4 types](https://www.fig
|
|
|
709
758
|
|
|
710
759
|
## Design tokens types
|
|
711
760
|
|
|
712
|
-
In order to validate types, the plugin uses the [Design Tokens types](https://github.com/
|
|
761
|
+
In order to validate types, the plugin uses the [Design Tokens types](https://github.com/tokens-bruecke/figma-plugin/blob/main/plugin-types.d.ts).
|
|
713
762
|
|
|
714
763
|
---
|
|
715
764
|
|