Exporting to Figma

[ciampo]

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)

[ciampo]

cc @drwpow @drwpow-figma , as I believe you're the best suited to provide an answer 🙏 Thank you!

[drwpow]

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.”

[ciampo]

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 🙏