Check out a free preview of the full Design Systems with Storybook, v2 course

The "Wrapping Up" Lesson is part of the full, Design Systems with Storybook, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve wraps up the course by sharing some advice on why adding a Storybook to help document a design system at any stage can benefit the long term.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> Like I said in the very beginning of our time together, there are a bunch of stuff with storybook that is really great for building a design system. And I think really great like a don't think enough is spilled on the implementation of a design system and how to go about thinking about that.

[00:00:16]
If one hypothetically signed on to do this workshop and said, hey, I'm gonna buy a bunch of books on design systems just to read up on the topic outside my own experience. One will find out that every book written on design systems as far as I can tell from my Amazon orders are written by designers, for designers, and potentially mostly like pitching the value prop of why you should have one.

[00:00:42]
There's like some of these books are literally how to convince upper management to let you do this.
>> And then when it comes time to be an engineer on the receiving end, good luck. Right. And one of the things that I think a lot about is like one, some of these things like.

[00:01:01]
You have a design system whether you know it or not, right? You have components in the modern era that you've broken down to some level maybe not enough, but some right and part of it is like building out the tooling so you can work well with your design partners, right?

[00:01:18]
Also so that it's so easy to like jam everything into one component and not separate out your you know what I mean? Like the act of these things are we do it in the name of a design system. And then I think what you find out is like your just general day-to-day engineering is also benefited by isolating stuff into individual components that take a bunch of props.

[00:01:44]
And having the ability to run tests on every given variation because you broke it out into stories, like you end up doing good things for your code that like, on our best days, we all should do. But like having that kind of process and having it be an official thing, I think in a lot of ways makes it easier for a whole bunch of best practices.

[00:02:04]
Like, yeah, do we start using a storybook because we said to ourselves, we're going to build a component library because we, it's like we had like, we have this folder full of components. It's a component library now. We gave it a cute name. And that's when we were like, let's put in the storybook and all of those things.

[00:02:20]
And then it's like, we're going to build a component well, we can run component tests. We just finished another accessibility audit, we can run the accessibility tests. That's cool. We can do all these other checks on stuff as well. That's really good. Even some of those things of pulling in stuff from our CMS because we had some of the foundations in there and it becomes useful whether or not, because again, you have the components, you break them all the time.

[00:02:50]
One CSS change can cause chaos. That there are parts of your code base that you are terrified of being factor. Now that I've got some sanity, I need to go deal with my own button component, right? But I will do that in storybook. I will do it with a visual origin and testing.

[00:03:05]
I will do that like with all these tools cuz they make it easier than the way that I would have done it before. And I think a lot of those patterns become incredibly powerful as well. And then also you get the other piece of the consistency there, which is when you have a design system, it makes you make better choices?

[00:03:27]
Also helps your buddy on the design team, like not just, it's very easy for them to draw a different rank, rectangle and call it a button. It's a lot easier than it is for us to write it in code and kind of having an organized catalog of all the components you have access to, because nobody means to do that.

[00:03:42]
They just didn't even know you had that component because there was no organized system for it whatsoever. The act of creating it makes you more productive, makes your testing easier, makes development. I love me that second monitor with some storybook in it. But then it also like, the designs that made one new button table are going to put, that's slightly different than the one you had to do that on purpose that didn't know that seven files over you had this thing from three years ago.

[00:04:07]
You know what I mean? You didn't even know either, right? And so the idea of cataloging it and like being honest with yourself that you have a design system, even if you don't have a design system team, your company, I think, encourages best day a better day to day practices.

[00:04:20]
Testing all the other like less glamorous stuff as well. Thank you all so much. Woo. Thank.
>> [APPLAUSE]

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now