Revisit Figma import/export using Variables

[Drew Powers]

Proposal

Cobalt CLI should be able to natively export Figma Variables → tokens.json, and sync tokens.json → Figma Variables (with auth, of course).

Context

Cobalt CLI needs an update to its Figma import/export functionality. It’s worth noting that Cobalt predates Figma variables, so understandably the original import/export using styles & components was a bit unwieldy—there’s not only a disconnect between Figma’s concepts of styles, but there’s also an expectation to support design token type that live outside the W3C spec. That made the integration difficult to maintain, and frustrating to use.

But along come Figma Variables, which despite not being called “tokens” are directly compatible with the W3C Design Token spec. Figma even has official example code showing how to accomplish going straight from Figma → W3C DTCG format and vice-versa, with no third parties.

Cobalt can use Figma’s example as a starting base, and make the flow smooth. The end result should be fairly unopinionated, and much smoother.

Tokens Studio for Figma

As a stopgap for removing direct tokens syncing, Cobalt added support for Tokens Studio for Figma in 1.1.0. The free version of this service is a better transition layer between Figma and Design Tokens than what Cobalt ever previously supported with styles. This integration will remain; the proposal is simply adding a way to import/export Figma Variables directly for people who don’t use Tokens Studio.

Figma Styles

Cobalt still won’t be able to import/export styles. Those are different enough, and have enough divergence to be out-of-scope for this project. However, if people choose to opt-in to syncing Variables from Cobalt to Figma, it’s not too hard for designers to copy Variable updates to styles manually.