Design Systems with React & Storybook

Designing a Modal Practice

Design Systems with React & Storybook

Check out a free preview of the full Design Systems with React & Storybook course

The "Designing a Modal Practice" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:

The students are instructed to build a different modal with a different illustration, and a different icon.


Transcript from the "Designing a Modal Practice" Lesson

>> I want you to create a second one. So you can just copy this art board and paste it, and it'll create a duplicate. So all the other stuff is already set for you, find a second illustration, and maybe use another button. And I've provided those text fields for you.

So these, if they're purple it means they're already components, and you can already drag them in and play with them. So go ahead and actually just drag these in. You might have to go ahead. So like if you've cloned this, you're going to need to select these and maybe create components out of them, but that's okay.

Just go to your model. Select this and we'll just drag in a text field. So take the next 10, 15 minutes and just create a second model. It can look like whatever you want it to look like, it can have whatever illustration you want. And then, we're ready to code it.

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