Syncing color tokens from Figma to a GitHub PR with a workflow orchestrator — a designer's writeup
I'm the founding designer at Kestra, and for years our design token workflow was painfully manual: tweak color variables in Figma, export JSON with a plugin, paste it into VS Code, then DM a frontend dev to run the generation script and open a PR. A one-line color change could take an hour and always depended on someone else's availability.
I finally automated the whole path. Now a small Figma plugin POSTs the tokens to a webhook, and a flow clones the repo, regenerates the SCSS themes, and opens (or refreshes) a single bot-managed PR, then notifies the team on Slack. If nothing changed, it does nothing.
The part that actually took the longest wasn't the automation, it was the diffs. The webhook re-serialized the JSON with arbitrary key order every time, so Git showed 400-line diffs when I'd changed one gray by 2%. Reviews were impossible. The fix was normalizing the JSON before regenerating: rebuild each object in canonical key order, sort colors by name, pretty-print. After that, one color change = one line in the diff.
Full writeup here if useful: https://medium.com/kestra-engineering/from-pixel-to-pipeline-shipping-my-figma-color-tokens-to-github-with-kestra-8fe865f85733?sharedUserId=ncallens
Curious how others handle the Figma-to-code token handoff. Do you keep a designer in the loop for the PR, or is it fully automated on your side? And for those doing it automatically, how do you deal with the noisy-diff problem?