Colors from Figma to GitHub repo

[shashkovdanil]

@roiLeo @preschian hey guys! I've talked with @exezbcz, and we discussed syncing colors between design and code. There is Figma plugin Design Tokens, using this you can export your Figma data as JSON. Then we can transform this JSON to CSS variables and set these variables to tailwind colors in tailwind.config.

This plugin supports sync with GitHub repo.

Using this we will have 100% consistency between design and code, also no more need to prescribe colors manually (even after a change in the design).

I've attached example of JSON:
design-tokens.tokens.json

If you like this idea and find it useful - please let me know about it and I can do a Proof of Concept shortly. If everything is ok, then we can then synchronize borders, shadows, and other design stuff from Figma.

[preschian]

I think this is nice to have. I still prefer to enable tailwind Viewer https://tailwindcss.nuxtjs.org/tailwind/viewer and enable it on canary (canary.kodadot.xyz/_tailwind/). So, non-dev can review our token in-app through that.

[shashkovdanil]

If we combine Figma and code, designers won't have to do token reviews at all. We will have only one source of truth. But anyway we may have tailwindcss viewer

[preschian]

I worried this one

Another problem: what if the plugin is not supported any more in the future? Do we need to migrate the JSON format?

[shashkovdanil]

what if the plugin is not supported any more in the future

There are a lot of plugins with similar functionality

Do we need to migrate the JSON format?

We can, anyway best way is to have single source of truth

[roiLeo]

I would like to not use an external plugin if possible since I think we can do better with something homemade.
but I don't really see the advantage of this type of configuration at the moment, let's finish the migration to tailwind first.

[shashkovdanil]

Would you mind if I created a Proof of Concept PR to show how it would work?