Questions around building and maintaining a design system

Tools
,
#1

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, bridging 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!

#2

Welcome to the community @robert.balazsi!

In my current position I don’t use a design system, but the product designers do. We have one for the company.

Design systems are a collaboration between engineering and design. You can’t have a design system without coded components, otherwise it is just a style guide.

You can use Sketch or Figma to create a design system. InVision has a tool as well, but it’s always been really buggy for me.

Hope that helps!

1 Like
#3

Yes. I inherited a mid-maturity design system that’s been in the works the past six years.

The system was built from scratch, and took an Atomic Design approach.

The design system was built out in sketch and has associated HTML/CSS components our devs can grab and use.

Sketch to create it. Abstract managers design version control.

3 Likes
#4

Thanks very much for the answer!

1 Like
#5

Thanks! Glad to be here!

#6
  1. No, i’m creating it for a huge existing app and simultaneously a new one from scratch, for its next evolution (will take a few years)
  2. Yes from scratch, because each unnecessary element from a pre-baked library would have negative impact. But we heavily draw from Material and HIG.
  3. It’s primarily a tool to communicate design to development. Additionally it’s a documentation, governance and guidance tool.
  4. Figma and Confluence

It’s not public, sorry, but check out Kiwi Orbit, we’re friends with them :blush:

2 Likes
#7

Thanks for the answer! :slight_smile: