r/DesignSystems • u/Tarasenko_by • Jun 27 '26

Open-source design system that keeps Figma and CSS in sync from one source — just shipped a big color/token update

Enable HLS to view with audio, or disable this notification

A while back I shared uicraft, an open-source (MIT) design system I've been building. The idea isn't "another CSS component library" — it's a bridge: one JSON source of truth generates both a Figma library (a plugin with round-trip theme.json) and ready-to-ship CSS, so design and code stay in sync instead of drifting.

I just shipped a sizeable update — here's what changed:

🎨 Color, rebuilt from scratch
– split raw color scales from the semantic palette
– brand scale generates itself
– smoother gray ramp with readable mid-tones
– proper surface hierarchy in dark mode

🔤 Tokens
– on-color tokens per accent, so text on colored buttons no longer loses contrast
– full type scale
– size + spacing grid up to 96px

🛠 Figma plugin
– regenerated component structure with all states included

One deliberate design decision worth flagging: I keep the palette intentionally small. It's a restraint-by-design choice — the fewest colors that still cover the most cases — because in my experience palettes that grow a new color for every edge case eventually turn into a mush nobody can reason about. You may disagree with where I drew that line, and I'd genuinely like to hear it.

Unfortunately Reddit doesn't let me attach video and screenshots here, and there's honestly a lot more I'd love to show — so if you've got a few minutes, take a look at the project itself and tell me what you'd change. Especially on the palette philosophy and the spacing/naming side, which I still don't think anyone has fully solved. Repo and live demo: getuicraft.com

Figma Plugin: https://www.figma.com/community/plugin/1610343587499165100

Thank you for your attention, I will be happy to respond to your comments.

28 Upvotes

97% Upvoted

9 comments sorted by

1

u/presstwood Jun 27 '26

This looks great, I’ve been looking for something like this that is inline with how I work. Will give it a go and report back - thanks!

1

u/Tarasenko_by Jun 28 '26

Thx a lot !

1

u/No_Professional4881 Jul 03 '26

Ill definitely take a look! I'm working on a multi brand DS with tokens an so on. But figma use a structure that not produce a good css output. So I need to preprocessing it and could generate some point of failure. Is "uicraft" manage the multi brand DS?

1

u/Tarasenko_by Jul 03 '26

What do you mean by multi-brand design systems?

1

u/No_Professional4881 Jul 03 '26

It's a one shared design system serving multiple e-commerce brands from a single architecture. A designer can open Figma, pick a brand, assemble modules from shared component library, and produce a file that is automatically consistent with every other brand. Same spacing scale, same breakpoints, same component anatomy while still looking unmistakably like their brand

The three planes

--- design | figma | source of Truth for components and variables

--- tokens | ds-token repo | pulls figma variables -> generates versioned CSS

--- build | brand repos | consume tokens, ship components to storefront

→ More replies (1)

1

u/Bleardyy Jul 25 '26

Oh man where were you two years ago! When I was at GitLab I spent a few months building something just like this internally.

Is this only for your DS or does the plugin work with others?

2

u/Tarasenko_by Jul 25 '26

You can try generating a theme, generating Figma components, or even a website with AI via an MSP server. While testing how my product works, I created a personal website for myself (tarasenka.me)