https://serverless-stack.com/ logo
Join Slack
Powered by
Hello friends. Anybody here has experience with V...
# random
a
Hello friends. Anybody here has experience with Vitamin? it’s a design-system created by Decathlon. The design department in my company wants to create something like this, but we are in a debate if we should base on MUI, CoreUI, or others… I imagine some others faced the same challenge in their company: implement a design system. I want to hear comments/feedback/ideas. https://github.com/Decathlon/vitamin-web
t
I have a lot of opinions about this
a
You always have.
t
haha
a
That’s why you are my idol.
Haha, but yeah, this is topic is always present, in most of my projects, in different companies, always faced this challenge.
The cool thing is every day a new tool comes up.. Zeplin, Storybook, Figma… bla bla…
There is no single project that used the same design-stack.
But the question is always the same… Modify Material? or build something from the ground?
t
Design systems are extremely useful and can save a ton of time. Here are the challenges with them: 1. To be useful they should not have many options. People try to emulate public design systems that need to be very very flexible because they're trying to get as many users as possible. Flexibility = more work for the developer using it 2. The reason it's hard to execute well on a design system is that the designers behind it need to think very systemically which isn't very common. This means they accept heavy constraints around simplicity and following really consistent patterns. This is usually 10x more work than most designers are used to when designing a specific screen 3. A design system should be independent of any specific framework, it's just a set of patterns that reduce decisions. However you will eventually implement in a specific framework and if this is React, you should consider extending some of radix-ui. Ultimately though you should implement everything ground up for the best experience but this requires a deep skillset
first step for me is always looking at the design token structure of things like Tailwind or Stitches and get all the designers to agree to only ever use a limited set of options for spacing, fontsizes, etc. And to be extremely conservative, less is better
Also a design system that grows out of actual building a real complicated product will always be better than one that is just designed on its own
a
Regarding tailwind… I found it today… Vitamin uses it.
But still don’t understand which is the role for Tailwind…. it’s like Bootstrap?
t
I don't actually like tailwind itself (but don't take my opinion, it's just a personal choice) but its design token structure is very good. Same with stitches
not really, it's more of a way to do css in js (even though it seems like something else)
Stitches is very very good for building design systems. We used it for SST console. Unfortunately the company behind it got acquired and its future is questionable. I'm working with someone on a replacement that will be even better
a
Yeah makes sense.. when I checked the source of Vitamin… saw a bunch of CSS… and said…. why are they not using SCSS??? 😐
But then figured that Tailwind outputs CSS.
So you prefer to use Tailwind/Stitches instead of using some SCSS/SASS framework/library?
I think the output might be the same? plain CSS, but generated differently.
t
I don't think you really need SCSS and SASS anymore, modern css has a lot of those features
a
Yeah, good point. I feel the same.
I’m coming from the frontend old school 😂 .
t
yeah there's....a lot
4 Views
Open in Slack
Previous
Powered by