What are Design Systems and Why are They so Popular?

Why design systems are becoming popular

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

  • |

Lesson Transcript

  • [00:00 - 00:06] Probably you've chosen this course because you already noticed that design systems are exploding. But why is that?

  • [00:07 - 00:35] First of all, they create visual consistency and our company probably doesn't want to end up a meme on Twitter, like Steam for example, where they have thousands of buttons, thousands of dropdowns, thousands of search boxes. A second important reason is that the developers' productivity is actually increased, and two examples that devs can find components ready to use instead of building them from scratch.

  • [00:36 - 01:01] And they can reduce time finding branding assets, for example, logos, call laws , and more stuff that are really hard to reach if we don't have a centralized place to look for them. Some other reasons, we have a single source of truth, we have Figma and Story book in our case, we have better brand memorability, which brands really care about.

  • [01:02 - 01:23] We have also functional consistency, and we can check the example of the two buttons that you have a different speed in the load expinner. This is just for a button, we can have different animations in dropdowns, in sidebars, and this can deviate really, really much in different user facing products for our company.

  • [01:24 - 01:57] And the last reason is that we can focus on solving hard engineering problems rather than styling components. Also below in the description of the course, I have some examples of some really good design systems that I admire, for example, Evergreen from Segment, Garden from Zen Desk, Paste from Twilio, and Adele, which is a design system repository, so you can find some inspiration and look at best practices.

Probably you've chosen this course because you already noticed that design systems are exploding. But why is that? First of all, they create visual consistency and our company probably doesn't want to end up a meme on Twitter, like Steam for example, where they have thousands of buttons, thousands of dropdowns, thousands of search boxes. A second important reason is that the developers' productivity is actually increased, and two examples that devs can find components ready to use instead of building them from scratch. And they can reduce time finding branding assets, for example, logos, call laws , and more stuff that are really hard to reach if we don't have a centralized place to look for them. Some other reasons, we have a single source of truth, we have Figma and Story book in our case, we have better brand memorability, which brands really care about. We have also functional consistency, and we can check the example of the two buttons that you have a different speed in the load expinner. This is just for a button, we can have different animations in dropdowns, in sidebars, and this can deviate really, really much in different user facing products for our company. And the last reason is that we can focus on solving hard engineering problems rather than styling components. Also below in the description of the course, I have some examples of some really good design systems that I admire, for example, Evergreen from Segment, Garden from Zen Desk, Paste from Twilio, and Adele, which is a design system repository, so you can find some inspiration and look at best practices.