drwpow
Exporting to Figma
Summary
It's not clear to me what's the workflow for using the tokens generated by Terrazzo in Figma in a way that is compatible with Figma modes.
Proposal & prior art
I've seen recommendations of using https://github.com/tokens-bruecke/figma-plugin while Figma integration is underway in Terrazzo itself, but it's still not clear to me how to setup a workflow where:
- JSON tokens are the source of truth
- Terrazzo creates code output
- the same tokens (or a transformed version) are imported to Figma
Could anyone clarify this aspect?
Extra
- [ ] I’m willing to open a PR (see CONTRIBUTING.md)
cc @drwpow @drwpow-figma , as I believe you're the best suited to provide an answer 🙏 Thank you!
Yeah this is a big open question currently, and there’s currently not a way to import into Figma. Figma right now wants to be “the source of truth,” and what most folks do is export out of Figma using Tokens Brücke, etc. and save as JSON. Of course, there are additional token types outside of Figma like animation (duration, cubicBezier, etc.), so there’s usually some workflow where tokens exported from Figma simply update/overwrite some values in the tokens JSON, but not all.
By most accounts, most design systems are primarily color, and this is something Figma handles fairly well. So I think in practical terms, many design systems operate off a working split of “colors are imported out of Figma, everything else is simply declared in Tokens JSON because it doesn’t update all that much.”
I think as the Design Token Spec nears a stable version, Figma will have better native first-party support! We’re just waiting on the Design Token spec to set that milestone to improve support. But yeah many folks are in a similar boat right now and just “figuring it out.”
Gotcha.
Relying on Figma being the source of truth is not ideal, as it's proprietary, and I also believe that code is better suited to be the source of truth (as explained well here).
In other words, the only solution to enable this kind of workflow is to write custom code to push variables to Figma via their APIs.
Thank you 🙏
Figma now supports some basic functionality for importing and exporting DTCG JSON files.
Video overview from Schema 2025: https://youtu.be/XI8cjfw8rt8?t=237 Recap blog post details: https://www.figma.com/blog/schema-2025-design-systems-recap/#importing-and-exporting-variables
Documentation is pretty sparse at the moment since it seems very freshly available, but there's some details here:
https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01KAGYPSFC984XDB4YWBCNRZJ7
To the original issue, Modes support is pretty minimal. It looks like Figma exports modes as separate JSON files. Inversely, you can import mode values from separate individual JSON files in the Variables panel.
Given that DTCG Resolvers are an evolving space, perhaps we can expect support for that at some point in the future.
