I recently learned about design systems and how we can use them to build unified user interfaces relatively fast. So instead of the gazillion of choices we have for colors, spacing, font sizes, and so on, we would constrain them to a set of predefined values, forming our system. Design systems can even include UI components, closing the gap between designers and developers.
I'd be curious about your experience with them, so I have a couple of questions:
I would greatly appreciate any insight. Thanks!
I use Chakra UI or Baseweb to build stuff. You can easily customise it when you need to.
It’s not just used by designers, it’s developers too! You can get the react components for these to use in your code.
You can get the UI library for Figma / sketch respectively for a lot of the react component libraries too.
That helps if you like to design first then code.
Thanks for the answer! I didn't know these tools had UI libraries for design systems. I did everything kinda from scratch in my current project and made a conscious effort to respect the guidelines I proposed to myself.
I’ve been playing around with design systems for some years now and here are my insights:
Finally keep in mind that design system should be focused on a specific platform and respect its guidelines. Never try to make a design system for iOS+Android+Web to keep your code scalable, clean and simple. I’ve seen companies do this and the end user experience is horrible. Each platform has its own components and guidelines and it’s crucial to stick to these :)
Hope I helped!
Great stuff, thanks very much! I just subscribed to your channel; really interested to learn more about this! ;)
Oh thank you a lot really appreciate it! And I am happy you found them useful :)
At the company I’m at, we designed and built ours from scratch at rainbow.webconnex.io pulling a lot of inspiration from some design systems made available online like Thumbtack’s and others. On the design side, I still have not found a solution I’m happy with to keep up with everything as the system grows and evolves. I’m using Invision’s DSM + Sketch, and it’s just ok.
On the component side, we’ve had great success recently pulling from Ant Design’s open component library, and then re-skinning slightly to meet our needs.
I hope this helps a little.
Thanks, it actually helps a lot! Rainbow looks very clean and detailed, with a lot of components. Kudos for that!
I know it's exciting(for boast points) to start something from scratch, it would be authentic but I would refrain from doing it since it would deviate you from your primary goal.
I made a mistake of building my own design(tailwind CSS) for my website instead of using standard UI systems like chakra, ant, material. The result -
Unless, a unique/original design would move your primary metrics forward, DON'T REINVENT THE WHEEL
my first moto, learned it that hard
Yeah, I agree! There are lots of things you'd have to account for (e.g. various states of components), and some of them are non-visual, like form validation, etc. But on the other hand, if you build yours. you might only include what you need.
Yeah my major components which I didn't for see were popups, progress bars, tooltips, and modals
I had to install each lib separately and omg searching for each one is such a hassle. Again people reading this post don't do the mistake of reinventing the wheel.