The Three Pillars of Design Systems

[00:00:00]
>> Let's actually run through a scenario. So let's say we have a designer, engineer, and a quality assurance engineer all working on building, testing, and designing this button. And let's say they're about $100 an hour. Okay, so that's $300 per hour. And let's say it takes a week and a half.

[00:00:13]
So that's about 66.6 hours of work per person. That's $20,000 dollars. And if you have 50 teams, like if you work at a large enterprise company like IBM or Google, if you have 50 teams and building buttons, that's a lot of money. That's a million dollars that you're spending on buttons, which is utterly absurd to me.

[00:00:36]
So you really need a design system. So there are three kind of pillars of design systems and they are the design language, the component library, and the style guide. So the design language is gonna be like your personality, you're gonna take your brand identity of your company and you're gonna put it into living breathing components and foundational elements.

[00:00:57]
So the foundation is color, typography, grid, those kinds of things. And the UI kit they're gonna be things like buttons, modols, anything that's designed as a component, which we'll be creating today. Then we take those design components and we actually build them into a component library. And we can build it with a ton of different frameworks and technologies like Vue, React, Angular.

[00:01:18]
You can use CSS, pre-processors, CSS-in-JS. We'll talk about these things today. But the important thing is if you're building a design system, you need to meet your developers where they're at. So if they're using Angular, don't build them a design system component library in React, they're not gonna use it.

[00:01:34]
So just be aware of kind of like what the current tech stack is and try to frame your system around that. And the style guide is the documentation, it tells your designers and engineers where to go to get assets, how to actually get up and running. How to integrate it, how to open pull requests and things like that and there are many technologies you can use to build your style guide.

[00:01:54]
We're gonna use story book today. I love using Gatsby, I use Gatsby at work and this is great if you work with React. You can also use other static site generators for different frameworks. But these are just a couple of tools.