tokens-bruecke 2.8.1 → 2.11.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 +24 -5
- package/.release-please-manifest.json +3 -0
- package/CHANGELOG.md +40 -7
- package/README.md +74 -2
- package/bin/cli.js +1 -1
- package/global.d.ts +10 -3
- package/package.json +1 -2
- package/plugin-types.d.ts +340 -0
- package/release-please-config.json +15 -0
|
@@ -19,29 +19,48 @@ jobs:
|
|
|
19
19
|
id: release
|
|
20
20
|
with:
|
|
21
21
|
token: ${{ secrets.GITHUB_TOKEN }}
|
|
22
|
-
|
|
22
|
+
|
|
23
23
|
- name: Checkout
|
|
24
|
-
uses: actions/checkout@
|
|
24
|
+
uses: actions/checkout@v4
|
|
25
|
+
if: ${{ steps.release.outputs.release_created }}
|
|
25
26
|
|
|
26
27
|
- name: Install pnpm
|
|
27
28
|
uses: pnpm/action-setup@v4
|
|
29
|
+
if: ${{ steps.release.outputs.release_created }}
|
|
30
|
+
|
|
31
|
+
- name: Get pnpm store directory
|
|
32
|
+
if: ${{ steps.release.outputs.release_created }}
|
|
33
|
+
shell: bash
|
|
34
|
+
run: |
|
|
35
|
+
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
|
|
36
|
+
|
|
37
|
+
- name: Setup pnpm cache
|
|
38
|
+
uses: actions/cache@v4
|
|
39
|
+
if: ${{ steps.release.outputs.release_created }}
|
|
28
40
|
with:
|
|
29
|
-
|
|
41
|
+
path: ${{ env.STORE_PATH }}
|
|
42
|
+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
|
43
|
+
restore-keys: |
|
|
44
|
+
${{ runner.os }}-pnpm-store-
|
|
30
45
|
|
|
31
46
|
- name: Install Node.js
|
|
32
47
|
uses: actions/setup-node@v4
|
|
48
|
+
if: ${{ steps.release.outputs.release_created }}
|
|
33
49
|
with:
|
|
34
50
|
node-version: 'lts/*'
|
|
35
|
-
cache: 'pnpm'
|
|
36
51
|
registry-url: 'https://npm.pkg.github.com'
|
|
37
52
|
|
|
38
53
|
- name: Build package
|
|
39
54
|
run: pnpm install && pnpm run build
|
|
40
55
|
if: ${{ steps.release.outputs.release_created }}
|
|
41
56
|
|
|
57
|
+
- name: Check if zip exists
|
|
58
|
+
if: ${{ steps.release.outputs.release_created }}
|
|
59
|
+
run: ls -la ./dist/
|
|
60
|
+
|
|
42
61
|
- name: Upload Release Artifact
|
|
43
62
|
if: ${{ steps.release.outputs.release_created }}
|
|
44
|
-
run: gh release upload ${{ steps.release.outputs.tag_name }} ./dist/figma-plugin.zip
|
|
63
|
+
run: gh release upload ${{ steps.release.outputs.tag_name }} ./dist/figma-plugin.zip --clobber
|
|
45
64
|
env:
|
|
46
65
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
47
66
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,25 +1,58 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## [2.
|
|
3
|
+
## [2.11.1](https://github.com/tokens-bruecke/figma-plugin/compare/v2.11.0...v2.11.1) (2026-03-28)
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
- **normilizeType:** return `string` instead of `dimension` for percentage opacity
|
|
4
8
|
|
|
9
|
+
## [2.11.0](https://github.com/tokens-bruecke/figma-plugin/compare/v2.10.0...v2.11.0) (2026-03-28)
|
|
5
10
|
|
|
6
11
|
### Features
|
|
7
12
|
|
|
8
|
-
|
|
9
|
-
* Add direct new GitHub token URL with "repo" scope ([aea4d98](https://github.com/tokens-bruecke/figma-plugin/commit/aea4d983b99892f28040b919bc79b161fe4e4aa2))
|
|
13
|
+
- **cli:** add `--oauth-token` flag to support OAuth authentication ([#65](https://github.com/tokens-bruecke/figma-plugin/issues/65))
|
|
10
14
|
|
|
15
|
+
## [2.9.4](https://github.com/tokens-bruecke/figma-plugin/compare/v2.9.3...v2.9.4) (2026-01-13)
|
|
11
16
|
|
|
12
17
|
### Bug Fixes
|
|
13
18
|
|
|
14
|
-
|
|
15
|
-
* URL encode file path for Gitlab API ([6a590b1](https://github.com/tokens-bruecke/figma-plugin/commit/6a590b15966d4b4188d210d6d8a7dcd4ab07884f))
|
|
19
|
+
- hardcoded style colors into variables ([403c4a5](https://github.com/tokens-bruecke/figma-plugin/commit/403c4a582da3cd7f1d3a4af3654660b84275c9dc))
|
|
16
20
|
|
|
17
|
-
## [2.
|
|
21
|
+
## [2.9.3](https://github.com/tokens-bruecke/figma-plugin/compare/v2.9.2...v2.9.3) (2025-12-06)
|
|
22
|
+
|
|
23
|
+
### Bug Fixes
|
|
24
|
+
|
|
25
|
+
- Remove pnpm version and install options in release workflow ([62ea535](https://github.com/tokens-bruecke/figma-plugin/commit/62ea535c12639ab21b056eb08209fa1115d33920))
|
|
26
|
+
|
|
27
|
+
## [2.9.2](https://github.com/tokens-bruecke/figma-plugin/compare/v2.9.1...v2.9.2) (2025-12-06)
|
|
28
|
+
|
|
29
|
+
### Bug Fixes
|
|
30
|
+
|
|
31
|
+
- Add zip existence check and force artifact upload ([f9d9b4b](https://github.com/tokens-bruecke/figma-plugin/commit/f9d9b4b8aa7b79cb858140fc0fed2e24eca1faca))
|
|
32
|
+
|
|
33
|
+
## [2.9.1](https://github.com/tokens-bruecke/figma-plugin/compare/v2.9.0...v2.9.1) (2025-12-06)
|
|
18
34
|
|
|
35
|
+
### Bug Fixes
|
|
36
|
+
|
|
37
|
+
- Add Release Please configuration files ([dcedd19](https://github.com/tokens-bruecke/figma-plugin/commit/dcedd19dc186bb97bb770af7701be5c8f821f861))
|
|
38
|
+
|
|
39
|
+
## [2.7.0](https://github.com/tokens-bruecke/figma-plugin/compare/v2.6.2...v2.7.0) (2025-09-21)
|
|
40
|
+
|
|
41
|
+
### Features
|
|
42
|
+
|
|
43
|
+
- Add direct new GitHub token URL with "repo" scope ([f2f68f9](https://github.com/tokens-bruecke/figma-plugin/commit/f2f68f91bb20ded52cb193391bf4eeaca0e6d303))
|
|
44
|
+
- Add direct new GitHub token URL with "repo" scope ([aea4d98](https://github.com/tokens-bruecke/figma-plugin/commit/aea4d983b99892f28040b919bc79b161fe4e4aa2))
|
|
45
|
+
|
|
46
|
+
### Bug Fixes
|
|
47
|
+
|
|
48
|
+
- file path must be URL-encoded for Gitlab API ([369d43f](https://github.com/tokens-bruecke/figma-plugin/commit/369d43fd01d04ea44a810ebcada07a97c5924072))
|
|
49
|
+
- URL encode file path for Gitlab API ([6a590b1](https://github.com/tokens-bruecke/figma-plugin/commit/6a590b15966d4b4188d210d6d8a7dcd4ab07884f))
|
|
50
|
+
|
|
51
|
+
## [2.6.2](https://github.com/tokens-bruecke/figma-plugin/compare/v2.6.1...v2.6.2) (2025-06-01)
|
|
19
52
|
|
|
20
53
|
### Bug Fixes
|
|
21
54
|
|
|
22
|
-
|
|
55
|
+
- prettier and file formatting ([43bbca5](https://github.com/tokens-bruecke/figma-plugin/commit/43bbca5a922a2d5653704c56b0c2d6e1060855d2))
|
|
23
56
|
|
|
24
57
|
## [2.6.1](https://github.com/tokens-bruecke/figma-plugin/compare/v2.6.0...v2.6.1) (2025-04-17)
|
|
25
58
|
|
package/README.md
CHANGED
|
@@ -17,11 +17,15 @@ The plugin converts Figma variables into design-tokens JSON that are compatible
|
|
|
17
17
|
- [Table of contents](#table-of-contents)
|
|
18
18
|
- [New version 2.0.0](#new-version-200)
|
|
19
19
|
- [How to use](#how-to-use)
|
|
20
|
+
- [Export and Import](#export-and-import)
|
|
21
|
+
- [Export (Variables → JSON)](#export-variables--json)
|
|
22
|
+
- [Import (JSON → Variables)](#import-json--variables)
|
|
20
23
|
- [General settings](#general-settings)
|
|
21
24
|
- [Color mode](#color-mode)
|
|
22
25
|
- [Include styles](#include-styles)
|
|
23
26
|
- [Add styles to](#add-styles-to)
|
|
24
27
|
- [Include variable scopes](#include-variable-scopes)
|
|
28
|
+
- [Use percentage for opacity](#use-percentage-for-opacity)
|
|
25
29
|
- [Use DTCG keys format](#use-dtcg-keys-format)
|
|
26
30
|
- [Include `.value` string for aliases](#include-value-string-for-aliases)
|
|
27
31
|
- [Include Figma metadata](#include-figma-metadata)
|
|
@@ -74,6 +78,36 @@ You can download and install previos version `1.6.1` here — [github.com/tokens
|
|
|
74
78
|
4. Adjust the settings.
|
|
75
79
|
5. Then you can download the JSON file or push it to on of the [supported services](#link).
|
|
76
80
|
|
|
81
|
+
### Export and Import
|
|
82
|
+
|
|
83
|
+
The plugin supports both **exporting** and **importing** design tokens:
|
|
84
|
+
|
|
85
|
+
#### Export (Variables → JSON)
|
|
86
|
+
|
|
87
|
+
- Click **"Download JSON"** to export your Figma variables as a design tokens JSON file
|
|
88
|
+
- The exported file is compatible with the [Design Tokens specification](https://design-tokens.github.io/community-group/format/)
|
|
89
|
+
- You can also push directly to supported services (JSONBin, GitHub, GitLab, etc.)
|
|
90
|
+
|
|
91
|
+
#### Import (JSON → Variables)
|
|
92
|
+
|
|
93
|
+
- Click **"Import JSON"** to import design tokens from a JSON file back into Figma
|
|
94
|
+
- The plugin will create variable collections, modes, and variables based on the JSON structure
|
|
95
|
+
- Supports both DTCG format (`$value`, `$type`) and standard format (`value`, `type`)
|
|
96
|
+
- Handles alias references between variables
|
|
97
|
+
- Creates new collections and variables as needed, or updates existing ones
|
|
98
|
+
|
|
99
|
+
**Import Features:**
|
|
100
|
+
|
|
101
|
+
- ✅ Creates variable collections from top-level objects
|
|
102
|
+
- ✅ Supports multiple modes (from `$extensions.mode` or `extensions.mode`)
|
|
103
|
+
- ✅ Handles all variable types (color, number, string, boolean)
|
|
104
|
+
- ✅ Resolves alias references between variables
|
|
105
|
+
- ✅ Supports various color formats (HEX, RGBA CSS, RGBA Object)
|
|
106
|
+
- ✅ Preserves variable descriptions and metadata
|
|
107
|
+
|
|
108
|
+
> [!WARNING]
|
|
109
|
+
> **Styles Export Limitation**: If you exported tokens with styles included (typography, grids, shadows, or blur), these cannot be imported back as Figma styles or variables. Figma's variable API currently only supports basic types: `color`, `number`, `string`, `boolean`, and `dimension`. Complex style types will be imported as `STRING` variables without proper value conversion. This is a temporary limitation until Figma supports these types natively in their API.
|
|
110
|
+
|
|
77
111
|
---
|
|
78
112
|
|
|
79
113
|
## General settings
|
|
@@ -118,6 +152,28 @@ Each Figma variable has a [scope property](https://www.figma.com/plugin-docs/api
|
|
|
118
152
|
}
|
|
119
153
|
```
|
|
120
154
|
|
|
155
|
+
### Use percentage for opacity
|
|
156
|
+
|
|
157
|
+
Is `off` by default. When enabled, opacity values will be exported as percentages instead of normalized decimal values. This affects variables with the `OPACITY` scope.
|
|
158
|
+
|
|
159
|
+
```json
|
|
160
|
+
// Without percentage format (default)
|
|
161
|
+
{
|
|
162
|
+
"opacity": {
|
|
163
|
+
"type": "number",
|
|
164
|
+
"value": 0.1
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// With percentage format
|
|
169
|
+
{
|
|
170
|
+
"opacity": {
|
|
171
|
+
"type": "string",
|
|
172
|
+
"value": "10%"
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
121
177
|
### Use DTCG keys format
|
|
122
178
|
|
|
123
179
|
Is `off` by default. Currently many design tokens tools doesn't support [DTCG keys format](https://design-tokens.github.io/community-group/format/#character-restrictions). All DTCG keys are prefixed with `$` symbol.
|
|
@@ -219,14 +275,29 @@ tokens-bruecke [options]
|
|
|
219
275
|
For example:
|
|
220
276
|
|
|
221
277
|
```bash
|
|
278
|
+
# Using a Personal Access Token (PAT)
|
|
222
279
|
tokens-bruecke --api-key $FIGMA_TOKEN --file-key $FIGMA_FILE --config config.json --output out/tokens.json
|
|
280
|
+
|
|
281
|
+
# Using an OAuth token
|
|
282
|
+
tokens-bruecke --oauth-token $FIGMA_OAUTH_TOKEN --file-key $FIGMA_FILE --config config.json --output out/tokens.json
|
|
223
283
|
```
|
|
224
284
|
|
|
225
285
|
This will fetch figma variables and export them in `out/tokens.json`
|
|
226
286
|
|
|
227
287
|
### Options
|
|
228
288
|
|
|
229
|
-
|
|
289
|
+
| Option | Alias | Description | Required |
|
|
290
|
+
| --------------- | ----- | --------------------------------- | ------------------------------------------------- |
|
|
291
|
+
| `--api-key` | `-a` | Figma personal access token (PAT) | One of `--api-key` or `--oauth-token` is required |
|
|
292
|
+
| `--oauth-token` | `-t` | Figma OAuth token | One of `--api-key` or `--oauth-token` is required |
|
|
293
|
+
| `--file-key` | `-f` | Figma file key | Yes |
|
|
294
|
+
| `--output` | `-o` | Path to output file | Yes |
|
|
295
|
+
| `--config` | `-c` | Path to configuration file | No |
|
|
296
|
+
|
|
297
|
+
> [!TIP]
|
|
298
|
+
> 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.
|
|
299
|
+
|
|
300
|
+
Other export settings are available through a JSON configuration file (see [CLI Configuration File](#cli-configuration-file) below).
|
|
230
301
|
|
|
231
302
|
### CLI Configuration File
|
|
232
303
|
|
|
@@ -244,6 +315,7 @@ You can use a JSON configuration file to specify the export options for the CLI.
|
|
|
244
315
|
"useDTCGKeys": false,
|
|
245
316
|
"includeValueStringKeyToAlias": true,
|
|
246
317
|
"includeFigmaMetaData": false, // Include Figma metadata like styleId, variableId, etc.
|
|
318
|
+
"usePercentageOpacity": false, // Export opacity as percentage (10%) instead of decimal (0.1)
|
|
247
319
|
"colorMode": "hex", // "hex" | "rgba-object" | "rgba-css" | "hsla-object" | "hsla-css";
|
|
248
320
|
"storeStyleInCollection": "none" // Name of one of your collection or "none" to keep them separated
|
|
249
321
|
}
|
|
@@ -634,7 +706,7 @@ In order to validate types, the plugin uses the [Design Tokens types](https://gi
|
|
|
634
706
|
In order to convert `FONT-WEIGHT` and `OPACITY` types into valid values you should specify thme as scopes in the Figma variables. The plugin will read the first scope and convert it into the valid value. If there are multiple scopes, the plugin will take the first one.
|
|
635
707
|
|
|
636
708
|
- `FONT_WEIGHT` scope will be converted into `string` type.
|
|
637
|
-
- `OPACITY` scope will be converted into `number` type.
|
|
709
|
+
- `OPACITY` scope will be converted into `number` type (or `string` with `%` if "Use percentage for opacity" is enabled).
|
|
638
710
|
|
|
639
711
|
---
|
|
640
712
|
|