Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
117 commits
Select commit Hold shift + click to select a range
46b675d
Update tokens from Figma
misykvg Jul 15, 2025
b314771
Merge pull request #1 from misykvg/update-tokens
misykvg Jul 15, 2025
9a3a640
Update tokens from Figma
misykvg Jul 15, 2025
d0c3133
Merge pull request #2 from misykvg/update-tokens
misykvg Jul 15, 2025
310fadd
Update tokens from Figma
misykvg Jul 15, 2025
60ffcc8
Merge pull request #3 from misykvg/update-tokens
misykvg Jul 15, 2025
f23d38d
Update tokens from Figma
misykvg Jul 15, 2025
d5dd4db
Merge pull request #4 from misykvg/update-tokens
misykvg Jul 15, 2025
d25e3df
Update tokens from Figma
misykvg Jul 16, 2025
0e893d8
Merge pull request #5 from misykvg/update-tokens
misykvg Jul 16, 2025
d76e657
Update brand.vg.json
misykvg Jul 16, 2025
6b13c93
Update primitives-vg-b2c.primitives.json
misykvg Jul 16, 2025
762aee0
Update primitives-vg-b2c.Mode 1.json
misykvg Jul 16, 2025
4c9fcaa
Update primitives-vg-b2b.primitives.json
misykvg Jul 16, 2025
16efeb8
Update primitives-vg-b2b.Mode 1.json
misykvg Jul 16, 2025
04c3bd0
Update Tokens — Completed.Light.json
misykvg Jul 16, 2025
9c4dbfe
Update Tokens — Completed.Dark.json
misykvg Jul 16, 2025
5639868
Update Product interactions — Completed.Default.json
misykvg Jul 16, 2025
4a8a41d
Update Primitives — Completed.Modern Theme.json
misykvg Jul 16, 2025
d32850c
Update Primitives — Completed.Brutal Theme.json
misykvg Jul 16, 2025
3e6bc2f
Delete tokens/primitives-vg-b2b.primitives.json
misykvg Jul 16, 2025
67998c0
Delete tokens/primitives-vg-b2c.primitives.json
misykvg Jul 16, 2025
29dc7c4
Delete tokens/primitives-vg-b2b.Mode 1.json
misykvg Jul 16, 2025
56b06f0
Delete tokens/primitives-vg-b2c.Mode 1.json
misykvg Jul 16, 2025
17758fa
Delete tokens/Primitives — Completed.Brutal Theme.json
misykvg Jul 16, 2025
b184f76
Delete tokens/Primitives — Completed.Modern Theme.json
misykvg Jul 16, 2025
585a3b2
Delete tokens/Product interactions — Completed.Default.json
misykvg Jul 16, 2025
686b2b2
Delete tokens/Tokens — Completed.Dark.json
misykvg Jul 16, 2025
1efa580
Delete tokens/Tokens — Completed.Light.json
misykvg Jul 16, 2025
d856cca
Update tokens from Figma
misykvg Jul 16, 2025
9181c7f
Merge pull request #6 from misykvg/update-tokens
misykvg Jul 16, 2025
a452f45
Update tokens from Figma
misykvg Jul 16, 2025
f5772bc
Merge pull request #7 from misykvg/update-tokens
misykvg Jul 16, 2025
00b86c1
Update tokens from Figma
misykvg Jul 16, 2025
a340381
Merge pull request #8 from misykvg/update-tokens
misykvg Jul 16, 2025
21b4496
Update tokens from Figma
misykvg Jul 16, 2025
68183d2
Merge pull request #9 from misykvg/update-tokens
misykvg Jul 16, 2025
2d0853d
Update vg-b2c.primitives.json
misykvg Jul 16, 2025
bad98ac
Create detect_duplicate_collections.ts
misykvg Jul 16, 2025
225e19d
Rename tokens/script/detect_duplicate_collections.ts to scripts/detec…
misykvg Jul 16, 2025
4abc109
Rename detectDuplicateCollections.ts to detect_duplicate_collections.ts
misykvg Jul 16, 2025
271878a
Update package.json
misykvg Jul 16, 2025
03eea8b
Update sync-tokens-to-figma.yml
misykvg Jul 16, 2025
2a0b6bd
Update package.json
misykvg Jul 16, 2025
32b3236
Update package.json
misykvg Jul 16, 2025
bb2a17d
Update detect_duplicate_collections.ts
misykvg Jul 16, 2025
f4ebbed
Update tokens from Figma
misykvg Jul 17, 2025
cc49bab
Merge pull request #10 from misykvg/update-tokens
misykvg Jul 17, 2025
d807183
Delete tokens/context.b2b.json
misykvg Jul 17, 2025
a0f2c6c
Delete tokens/context.b2c.json
misykvg Jul 17, 2025
166ed17
Update context-biz.b2b.json
misykvg Jul 17, 2025
a07e7d4
Update context-biz.b2c.json
misykvg Jul 17, 2025
4cb820f
Update context-biz.b2b.json
misykvg Jul 17, 2025
a34b2fc
Update context-biz.b2b.json
misykvg Jul 17, 2025
15a1f12
Update context-biz.b2b.json
misykvg Jul 17, 2025
2c9e5df
Update context-biz.b2b.json
misykvg Jul 17, 2025
ba0d52b
Update tokens from Figma
misykvg Jul 17, 2025
1776d0f
Merge pull request #11 from misykvg/update-tokens
misykvg Jul 17, 2025
3029338
Update tokens from Figma
misykvg Jul 17, 2025
bb387b9
Merge pull request #12 from misykvg/update-tokens
misykvg Jul 17, 2025
c1acd7b
Update tokens from Figma
misykvg Jul 17, 2025
8699b63
Merge pull request #13 from misykvg/update-tokens
misykvg Jul 17, 2025
6e34247
Update context-colors.b2b.json
misykvg Jul 17, 2025
8a2c52f
Update context-colors.b2b.json
misykvg Jul 17, 2025
f4a7c12
Update tokens from Figma
misykvg Jul 17, 2025
fea2785
Merge pull request #14 from misykvg/update-tokens
misykvg Jul 17, 2025
e500fec
Update context-colors.b2b.json
misykvg Jul 17, 2025
99ad983
Update tokens from Figma
misykvg Jul 17, 2025
b434088
Merge pull request #15 from misykvg/update-tokens
misykvg Jul 17, 2025
282af3d
Update tokens from Figma
misykvg Jul 17, 2025
7fcdfb4
Merge pull request #16 from misykvg/update-tokens
misykvg Jul 17, 2025
bed770a
Update tokens from Figma
misykvg Jul 17, 2025
1606e37
Merge pull request #17 from misykvg/update-tokens
misykvg Jul 17, 2025
5109619
Update tokens from Figma
misykvg Jul 17, 2025
2915093
Merge pull request #18 from misykvg/update-tokens
misykvg Jul 17, 2025
31af111
Update tokens from Figma
misykvg Jul 18, 2025
7130a3e
Merge pull request #19 from misykvg/update-tokens
misykvg Jul 18, 2025
a26e3cd
Update tokens from Figma
misykvg Jul 18, 2025
727db32
Merge pull request #20 from misykvg/update-tokens
misykvg Jul 18, 2025
dedd216
Update tokens from Figma
misykvg Jul 18, 2025
bd3bd51
Merge pull request #21 from misykvg/update-tokens
misykvg Jul 18, 2025
041ad67
Update brand-colors.vg.json
misykvg Jul 18, 2025
05144cd
Delete tokens/context-biz.b2b.json
misykvg Jul 18, 2025
9be8a0e
Delete tokens/context-biz.b2c.json
misykvg Jul 18, 2025
d3b5554
Delete tokens/brand.vg.json
misykvg Jul 18, 2025
ec06db9
Update brand-colors.vg.json
misykvg Jul 18, 2025
6f73e1e
Update tokens from Figma
misykvg Jul 18, 2025
53869a7
Merge pull request #22 from misykvg/update-tokens
misykvg Jul 18, 2025
ca82917
Update tokens from Figma
misykvg Jul 18, 2025
8f5cf1d
Merge pull request #23 from misykvg/update-tokens
misykvg Jul 18, 2025
1afadc7
Update tokens from Figma
misykvg Jul 18, 2025
eb14ae3
Merge pull request #24 from misykvg/update-tokens
misykvg Jul 18, 2025
595aafb
Update tokens from Figma
misykvg Jul 18, 2025
f5aac54
Merge pull request #25 from misykvg/update-tokens
misykvg Jul 18, 2025
ebec2c5
Update tokens from Figma
misykvg Jul 18, 2025
b164845
Merge pull request #26 from misykvg/update-tokens
misykvg Jul 18, 2025
c39a9b9
Delete tokens/brand-colors.test.json
misykvg Jul 18, 2025
a9c04ef
Delete tokens/brand-colors.vg.json
misykvg Jul 18, 2025
0cc440a
Delete tokens/brand-globals.test.json
misykvg Jul 18, 2025
a746a6e
Delete tokens/brand-globals.vg.json
misykvg Jul 18, 2025
78aee13
Delete tokens/context-colors.b2b.json
misykvg Jul 18, 2025
07095e2
Delete tokens/context-colors.b2c.json
misykvg Jul 18, 2025
d3e9a18
Delete tokens/context-globals.b2b.json
misykvg Jul 18, 2025
ae9a0e9
Delete tokens/context-globals.b2c.json
misykvg Jul 18, 2025
9752347
Delete tokens/ds-colors.tokens.json
misykvg Jul 18, 2025
ab3dd72
Delete tokens/ds-globals.Mode 1.json
misykvg Jul 18, 2025
2958e38
Delete tokens/mode-colors.dark.json
misykvg Jul 18, 2025
6bd7657
Delete tokens/mode-colors.light.json
misykvg Jul 18, 2025
e2d0b19
Delete tokens/mode-globals.default.json
misykvg Jul 18, 2025
44bda3b
Delete tokens/vg-b2b.primitives.json
misykvg Jul 18, 2025
36c47fe
Delete tokens/vg-b2c.primitives.json
misykvg Jul 18, 2025
ebceaa9
Update tokens from Figma
misykvg Jul 21, 2025
7e1461c
docs: add basic README
misykvg Oct 8, 2025
9a95d7a
change in readme.md
misykvg Oct 8, 2025
ec999aa
feat: add multi-context token system with watch mode and test app
misykvg Oct 8, 2025
f17a1ae
Build design tokens and clean up token-test-app
misykvg Oct 10, 2025
a449bfd
1.0.4
misykvg Oct 10, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion .github/workflows/sync-tokens-to-figma.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Sync tokens to Figma

on:
workflow_dispatch:
inputs:
Expand All @@ -24,7 +25,10 @@ jobs:
- name: Install dependencies
run: npm install

- name: Sync tokens to Figma file
- name: 🔍 Check for duplicate token collections
run: npm run check-duplicates

- name: 🚀 Sync tokens to Figma file
run: npm run sync-tokens-to-figma
env:
FILE_KEY: ${{ github.event.inputs.file_key }}
Expand Down
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
node_modules
.env
dist/
*.tgz
.npmrc
.DS_Store
11 changes: 11 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
src/
scripts/
node_modules/
*.test.ts
*.test.json
tsconfig*.json
jest.config.ts
.env*
.github/
tokens/
style-dictionary.config.js
88 changes: 2 additions & 86 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,87 +1,3 @@
# variables-github-action-example
# Design Tokens Project

This repository contains a couple of GitHub Actions workflows:

- Sync tokens to Figma
- Sync Figma variables to tokens

These workflows demonstrate bi-directional syncing between variables in Figma and design tokens in a codebase using Figma's [Variables REST API](https://www.figma.com/developers/api#variables). For more background and a graphical representation of what these workflows do, see our [Syncing design systems using Variables REST API](https://www.figma.com/community/file/1270821372236564565) FigJam file.

To use these workflows, you should copy the code in this repository into your organization and modify it to suit the needs of your design processes.

## Prerequisites

To use the "Sync Figma variables to tokens" workflow, you must be a full member of an Enterprise org in Figma. To use the "Sync tokens to Figma" workflow, you must also have an editor seat.

Both workflows assume that you have a single Figma file with local variable collections, along with one or more tokens json files in the `tokens/` directory that adhere\* to the [draft W3C spec for Design Tokens](https://tr.designtokens.org/format/). For demonstration purposes, this directory contains the tokens exported from the [Get started with variables](https://www.figma.com/community/file/1253086684245880517/Get-started-with-variables) Community file. Have a copy of this file ready if you want to try out the workflow with these existing tokens.

> \*See `src/token_types.ts` for more details on the format of the expected tokens json files, including the deviations from the draft design tokens spec we've had to make. **We expect there to be one tokens file per variable collection and mode.**

In addition, you must also have a [personal access token](https://www.figma.com/developers/api#access-tokens) for the Figma API to allow these workflows to authenticate with the API. For the "Sync Figma variables to tokens" workflow, the token must have at least the Read-only Variables scope selected. For the "Sync tokens to Figma" workflow, the token must have the Read and write Variables scope selected.

## Usage

Before running either of these workflows, you'll need to create an [encrypted secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) in your repository named `GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN` containing your personal access token.

Both workflows are configured to [run manually](https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow) for demonstration purposes, and are designed to be as conservative as possible in their functionality (see details below).

### Sync Figma variables to tokens

To run the "Sync Figma variables to tokens" workflow:

- Open the workflow under the **Actions** tab in your repository and click **Run workflow**
- You will be asked to provide the file key of the Figma file. The file key can be obtained from any Figma file URL: `https://www.figma.com/file/{file_key}/{title}`.
- After the workflow finishes, you should see a new pull request if there are changes to be made to the tokens files in the `tokens/` directory. If there are no changes to be made, then a pull request will not be created.

This workflow has some key behaviors to note:

- After generating the new tokens json files, this workflow creates a pull request for someone on the team to review. If you prefer, you can modify the workflow to commit directly to a designated branch without creating a pull request.
- If a variable collection or mode is removed from the Figma file, the corresponding tokens file will not be removed from the codebase.

### Sync tokens to Figma

To run the "Sync tokens to Figma" workflow:

- Open the workflow under the **Actions** tab in your repository and click **Run workflow**
- You will be asked to provide the file key of the Figma file. The file key can be obtained from any Figma file URL: `https://www.figma.com/file/{file_key}/{title}`. Note: if you are trying out this workflow for the first time, use a file that is separate from your design system to avoid any unintended changes.
- After the workflow finishes, open the file in Figma and observe that the variables should be updated to reflect the tokens in your tokens files.

This workflow has some key behaviors to note:

- Though this workflow is configured to run manually, you're free to modify it to run on code push to a specified branch once you are comfortable with its behavior.
- When syncing to a Figma file that does not have any variable collections, this workflow will add brand-new collections and variables. When syncing to a Figma file that has existing variable collections, this workflow will modify collections and variables **in-place** using name matching. That is, it will look for existing collections and variables by name, modify their properties and values if names match, and create new variables if names do not match.
- The workflow will not remove variables or variable collections that have been removed in your tokens files.
- When mapping aliases to existing local variables, we assume that variable names are unique _across all collections_ in the Figma file. Figma allows duplicate variable names across collections, so you should make sure that aliases don't have naming conflicts in your file.
- For optional Figma variable properties like scopes and code syntax, the workflow will not modify these properties in Figma if the tokens json files do not contain those properties.
- If a string variable is bound to a text node content in the same file, and the text node uses a [shared font in the organization](https://help.figma.com/hc/en-us/articles/360039956774), that variable cannot be updated and will result in a 400 response.

## Local development

You can run the GitHub actions locally by running `npm install` and creating a `.env` file with the following contents:

```
FILE_KEY="your_file_key"
PERSONAL_ACCESS_TOKEN="your_personal_access_token"
```

and then running:

```sh
npm run sync-tokens-to-figma

# or

# Defaults to writing to the tokens_new directory
npm run sync-figma-to-tokens

# Writes to the specified directory
npm run sync-figma-to-tokens -- --output directory_name
```

### Testing

Run the Jest tests:

```sh
npm run test
```
Test?
Loading