Remix.run Logo
gedy 9 days ago

Not to nitpick terminology, but I don't think it's helpful to equate "design system" with component library. A design system is the design tokens used to describe an organization's application(s), and largely independent of the exact technologies.

I worked with our UX team at a mixed tech company (Rails, React, mobile) who defined the patterns and tokens, and then my team implemented so that we could use across our stack.

Largely this was accomplished via ensuring the design system could be used via CSS and we settled on Bootstrap with custom theme. This made it easy enough to use across Rails views/view components and React components.

Bootstrap is not sexy to devs now but you could do same with Tailwind and Daisy UI with custom theme.

With that said, component libraries are really helpful, but I prefer to align them with the design system and not the other way around.

strzibny 9 days ago | parent | next [-]

You are absolutely right. The perspective is simply a practical question of, can we grab a component library that feature a design system (that we can hopefully update with our preferences).

gedy 9 days ago | parent [-]

Yes this basically why we used Bootstrap. The components and patterns UX wanted to use were a close match for Bootstrap's components, aside from colors, fonts, etc which we then adjusted.

danielvaughn 9 days ago | parent | prev [-]

Interesting - did you set up your own pipeline from the DS to each platform? How did you manage parity and consistency over time?

gedy 9 days ago | parent [-]

We didn't have an automated pipeline since the UX team wasn't really tech savvy enough to dive into detailed styles, so we relied on recurring syncs every 2 weeks. The DS changes tended to be slow and incremental from the UX side as well which helped.

Bootstrap (like Tailwind and others) has a configuration for generating the full component class and styles from a few variables, so updates to fonts, colors, spacing, etc were easy to manage and roll out to wide usage incrementally.