tokens-studio
Add support for variable scopes and code syntax
Add Figma Variable Scopes and Code Syntax Support
This feature gives token designers full control over how their design tokens translate to Figma variables. Users can now define variable scopes to control which UI elements can use each token (text, fills, effects, etc.) and specify custom code syntax for different platforms in developer handoff.
Key improvements:
- New Figma section in token editor with scope selection (checkboxes) and code syntax inputs for Web, Android, and iOS platforms
- Bi-directional sync: scopes and code syntax are preserved when importing variables from Figma and applied when creating variables from tokens
- Opt-in behavior: only tokens with explicitly defined scopes will have them applied, maintaining backward compatibility
- This enhancement bridges the gap between design system specifications and Figma's variable capabilities, ensuring tokens work exactly as intended across design and development workflows.
🦋 Changeset detected
Latest commit: 6b5e7a4df2e938cd9b87795b7b1fd27203e98a4b
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| @tokens-studio/figma-plugin | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@copilot got some linting errors. Also, the variable scopes in the edit token form modal - lets make it so only the right ones show up for each token type - eg color doesnt need stroke radius scopes etc
@six7 I've opened a new pull request, #3537, to work on those changes. Once the pull request is ready, I'll request review from you.
Commit SHA:ead34bd3c314be3295652b766e08acf9397f44ef
Test coverage results :test_tube:
Code coverage diff between base branch:main and head branch: add-figma-variable-scopes-and-syntax
| Status | File | % Stmts | % Branch | % Funcs | % Lines |
|---|---|---|---|---|---|
| :red_circle: | total | 65.22 (-0.14) | 56.85 (-0.22) | 62.25 (-0.25) | 65.59 (-0.12) |
| :red_circle: | packages/tokens-studio-for-figma/src/app/components/EditTokenForm.tsx | 50.44 (-0.71) | 33.9 (-0.9) | 41.5 (-1.63) | 52.07 (-0.78) |
| :sparkles: :new: | packages/tokens-studio-for-figma/src/app/components/FigmaVariableForm.tsx | 44.82 | 31.25 | 30.43 | 45.83 |
| :red_circle: | packages/tokens-studio-for-figma/src/app/store/models/tokenState.tsx | 63.24 (-0.37) | 50.5 (-1.29) | 76.52 (0) | 63.88 (-0.38) |
| :green_circle: | packages/tokens-studio-for-figma/src/plugin/pullVariables.ts | 79.14 (0.13) | 60.33 (-1.6) | 83.33 (0.73) | 81.03 (1.43) |
| :red_circle: | packages/tokens-studio-for-figma/src/plugin/setValuesOnVariable.ts | 69.84 (-21.46) | 67.6 (-15.41) | 75 (-25) | 69.35 (-21.76) |
Commit SHA:ead34bd3c314be3295652b766e08acf9397f44ef Current PR reduces the test coverage percentage by 1 for some tests
@copilot lets add some tests for this new functionality. both on import and on create. and cypress tests. also.. pls add support for figma's hiddenFromPublishing metadata on a token, which should have three states: undefined, true, false. absence = undefined so we dont change anything. if false, set to false, if true, to true.
@six7 I've opened a new pull request, #3590, to work on those changes. Once the pull request is ready, I'll request review from you.