search

lukasoppermann / design-tokens

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
https://www.figma.com/community/plugin/888356646278934516/Design-Tokens
MIT License
964 stars 134 forks source link

Question of your point of view about design tokens JSON as source of truth #312

Closed MathisPct closed 1 month ago

MathisPct commented 3 months ago

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 commented 1 month ago

Hey @MathisPct,

there is a discussion about this: https://github.com/lukasoppermann/design-tokens/discussions/296

My reason for this is:

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.

Integration with CI is also better.

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