UX-UI that works January 16, 2021

Questions around building and maintaining a design system

Robert Balazsi @robert_balazsi

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:

  • Do you use a design system in your current project?
  • Did you build your own system from scratch, or do you use a popular one like Base Web, Material Design, Lightning?
  • Is it used by designers only, or there are UI components built based on it that you use?
  • What design tools do you use to create new UIs based on the system? (e.g. I'm not sure if/how you can introduce a design system in Figma)

I would greatly appreciate any insight. Thanks!

  1. 4

    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.

    1. 1

      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.

  2. 3

    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.

    1. 2

      Thanks, it actually helps a lot! Rainbow looks very clean and detailed, with a lot of components. Kudos for that!

  3. 2

    I’ve been playing around with design systems for some years now and here are my insights:

    • Design systems should be focused primarly on users and allow the design to stay flexible and creative - I’ve worked with many products where design was too limited from the dev team because the component we wanted to use “was not on the design system” and because “we should make our design system complicated” - Always remember that user experience doesn’t work with “one-size fits all” solutions.
    • Design systems are about developer productivity and design consistency. The value that users get is not that high. That’s why I added as my first point “focus on the users” ;)
    • My favorite design system is https://polaris.shopify.com/ - Great documentation, great components abstraction and great design in general
    • For my product thinkoutloud.io I design what I think is right and as the product grows I abstract the design components that are used globally (e.g. typography, colors). I never start with the design system. I do livestream design session that you might find helpful https://www.youtube.com/channel/UCrkg0439Cc-5ipGar0VJcrw
    • I work with Framer or Figma and I create simple design componetns there without worrying too much about them. Product source code is always my source of truth and I don’t try to maintain a perfect copy on my design files. I treat my designs as sketches. Some people may say that this is wrong, but it really depends if you design for Uber where you need to align with 100 designers or if you are a small team/solo maker.
    • Before I become an IndieHacker I was leading the design team at ticketswap.com and that’s the design system we had at that moment https://ticketswap.github.io/solar/

    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!

    1. 1

      Great stuff, thanks very much! I just subscribed to your channel; really interested to learn more about this! ;)

      1. 1

        Oh thank you a lot really appreciate it! And I am happy you found them useful :)

  4. 2

    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 -

    1. It's awful since I'm not a designer
    2. huge hit on productivity, instead on working on features, i was stuck in making that one box responsive

    Unless, a unique/original design would move your primary metrics forward, DON'T REINVENT THE WHEEL

    my first moto, learned it that hard

    1. 1

      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.

      1. 2

        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.

Recommended Posts