Question about Source of Truth

[leandromuuvlabs]

Hi @lukasoppermann thanks a ton for building this! I am learning a lot about design systems and being able to use your tool was really great.
I have a question for you. In the readme you mention:

"I personally have changed my opinion a long time ago to favor the source fo truth for design tokens to be in a json file. Figma should be a consumer so you only import tokens into figma. This is why I don't use plugins like this one anymore in my work."

I wonder, why is that? what source of truth would you recommend? do you have any resources you can link me to that follow your approach?
Thanks a lot!

[lukasoppermann]

Hey @leandromuuvlabs,
I recommend GitHub/a git repository with a json file as a source of truth. You can technically create this file in Figma but it would not be your source of truth. This means you would always have to import json into Figma again. This way Figma becomes a normal design token consumer

Personally I prefer to edit json files by hand and avoid any kind of tooling on this side of the creation process. Once a token system has been set up you normally only have small changes so manually adjusting values should be easy.

NOTE that this is my personal opinion. It may not be right for everyone.

[peterbinks]

Do you just use the Figma API directly consume the JSON tokens? Also with your approach, don't you have to continually import the JSON to Figma?

Looking into setting up a more robust token system in my co's design system next year, and was heavily considering a Figma -> Json -> Consumer app approach, but with rest of our design system's source of truth in code as well, I am curious about this.

[lukasoppermann]

Personally, I use vscode. 😄 No Figma plugin, no API. I feel it is just a waste of time to build tooling around design token export.

The way I see it there are two stages in any design system: 1. initial setup and 2. maintenance

1. initial setup

I use Figma to explore token values but often use tools (or build small cli tools) to generate scales, e.g. based on contrast. I either copy the values out of Figma or from my cli tool and just manually add it to my json file.

Yes, this is more cumbersome than using Figma export, but it has no setup (and the setup can eat up all the time you save with direct export).
It also makes sure you don't accidentally change things and you get a much better feeling for the tokens. If you define other tokens, that can't exist in Figma, you need to do this anyway.

If you learn how to use multi-cursor in vs code adding props around the hex values is very quick as well.

2. maintenance

In this phase you normally make changes only on occasion. And those changes often only involve a few values. I don't see any benefit of tooling here; it is quick either way. However, for me it feels simpler to not require a tool.

Additionally, being able to adjust values without a tool is great for developers and other designers as they may not have the plugins set up.

This is no general recommendation

This is just my opinion. Depending on your team and your own code skills, and preferences either way could be good.

[mjmonline]

@lukasoppermann how do you consume the JSON inside Figma?

[lukasoppermann]

You could use a plugin like Token Studio. Personally I built my own plugin.

[lukasoppermann]

Moving this over:

---

From: @MathisPct
Hello there

I see this paragraph bellow at the beginning of your README on the repo.

[!WARNING]
This plugin is only partially supported!
This means: I don't have capacity to add any features or really improve stuff. Bugfixes may be added if time allows.
I am also happy to discuss and merge PRs.

I personally have changed my opinion a long time ago to favor the source for truth for design tokens to be in a json file. Figma should be a consumer so you only import tokens into figma. This is why I don't use plugins like this one anymore in my work.

I want to have your point of view on why you think it's better solution to have a JSON file storing your design tokens as the source of truth instead of Figma ?

In my company we are facing the problem of synchronization design tokens in our Git repo with the Figma design file. I have considered using your plugin to let commit changes from the evolution of local variables. The problem is that we are supposed to commit from the Figma file and run differents CI/Pipelines processes to transform the plain JSON design tokens into various CSS based on the theme we provide in Figma local variables.

What are your past experiences with this ?

How do you handle these different processes by storing the raw tokens in one JSON file? Do you directly store the JSON design tokens in your repo? And how do you import them into Figma? Have you encountered any problems with the synchronization of tokens between the dev team and the design team?

Thank you in advance for your time!

Enjoy your day

---

[lukasoppermann]

Hey @MathisPct,

The problem is that we are supposed to commit from the Figma file and run differents CI/Pipelines processes to transform the plain JSON design tokens into various CSS based on the theme we provide in Figma local variables.

CI/Pipelines are a valuable tool. This is one reason I feel using json in a repo is a much better solution.

I think the ideal pipeline is:

GitHub/JSON → npm packages → consumers (FIGMA via plugin / css / iOS / ...)

Do you directly store the JSON design tokens in your repo?

Yes: https://github.com/primer/primitives

And how do you import them into Figma? (Not open source yet)

I wrote a plugin. But you may be able to use token studio.

Have you encountered any problems with the synchronization of tokens between the dev team and the design team?

No. Wit the JSON as source of truth and ALL platforms including Figma being just consumers, there is no issue at all. Everything is in sync.

For more questions please refer to the discussion