Designing a Modal

[00:00:01]
>> We're gonna create a modal now, modals are fun. Modals are composite component. So while buttons are an atomic components, they're just an atom, that's Brad Frost, his atomic design. A modal is gonna be an organism, I think, I like to call it a composite component cuz it's made up of other components.

[00:00:17]
We're gonna create the sign up modal together, and then you're going to create a second one using these text fields that I've already provided for you. So first, let's create a rectangle in your fingerboard, if you don't have a modals page here, just go ahead and create one, there shouldn't be anything in it.

[00:00:38]
I'm gonna create an artboard, an artboard is just a space to design within, you can press A, if you type A, it will let you drag, just an art board. They are also on the right side here if you're designing for a Macbook or a tablet, those are pre determined artboard sizes, but you can also just drag and create a new one.

[00:00:57]
So I have an artboard, I don't know where that came from. I am not gonna draw a rectangle by pressing R, and I'm just gonna draw a shape. I'm gonna manually change these sizes, so I am going to make mine 800 by 580, so 800 width, 580 height.

[00:01:16]
And my artboard is clearly not big enough, so I'm just gonna make that a little bigger, okay? So I have a square, hopefully you have those neutrals saved as color variables. If you don't, that's okay, you're just gonna again, select that, press this little menu, create a new color and call it neutral 300.

[00:01:36]
I'm gonna do one for this as well neutral 200, and we're gonna do this because we're gonna use this color value in our modal. So we select this rectangle, press those four dots, I'm gonna set this to my neutral 200 value. Actually, let's do neutral 100, that's a little bit better, well, that's white.

[00:01:56]
Yeah, let's do white, let's add white, we're gonna give it a back shadow. So let me save this real fast, neutral 100. So I'm gonna go back, let's get my rectangle and neutral 100 value, there we go. And I'm gonna add a box shadow. So if I go under effects here, press the plus button, it's gonna give you a drop shadow.

[00:02:21]
If you click this little sun icon here, it pops up in this little tooltip dialogue thing where you can actually set blur X and Y. I'm gonna give it a blur of 16 an X of 0 and a Y of 5. If you need these values again, they're on in the course website, so you can go grab that one, Making a modal that's where we're at.

[00:02:42]
So we've got 16, 0, and 5 for our back shadow, this is giving some elevation here, all right? So we want our model to have an illustration and an icon, let's just add our button right? We know we need our primary button in a default state. So we'll come back over to assets again, we can drag that in, there we go.

[00:03:00]
Oop, if you wanna lock this, if you right click it, so locking it means you can't move it around, which is really nice. Cuz I accidentally just tried to move it, you can lock it. So now it doesn't matter, I can't select this, that's really nice. So I've got my Submit button here, and let's go get an illustration.

[00:03:21]
My favorite place to go is undraw.co, and if you browse now this is created, it is all open source. You don't have to add any contributions to Catarina or to UnDraw, you can use them in your designs and you can even change the color here. So what I'd like you to do is take your primary color, let's see mine.

[00:03:44]
What value is this? If you are in your right hand side on your design panel, and you click this little settings thing, it'll give you a color title. Even though grab that hex value, I'm gonna copy that hex value and paste it into UnDraw. And look all those illustrations now match my primary color.

[00:04:00]
We're gonna create a sign in modal, you can call it whatever you want, but I'm gonna stick with sign in modal. So I'm gonna actually search let's say search for a login. So I had this one mobile login, you can choose whichever illustration you want, go ahead and download the SVG.

[00:04:18]
So once it's downloaded, just simply drag it in, you can just drag it into Figma, and it's obviously a little bit big. We wanna resize this, hold down the shift key and resize it. This will scale it appropriately, so it'll maintain all of its proportions. If I didn't hold Shift + Down, I can squish it, and I don't like that, it's not maintaining its proportion.

[00:04:40]
So hold down the Shift key and resize it, and now I can place it here. I'm gonna add some text in here, so on mine, I did sign up Sign up today to get access. You can just whatever you want, right? It's just placeholder text. So I press T, and we'll do sign up.

[00:04:58]
Now if you have all of your headers done, you can just apply that header to your modal. So if I have this, let me just add this so Each to, so go back to modal, select your text and then give it that Each to styling. And it's appropriately sized with your type scale, right?

[00:05:18]
Add a little description, Sign up today, and you get access to cool things. As always, that's a little too big, let's make this a paragraph. Okay, we'll just centre align all this stuff. Let's say you're really bad at determining whether this is all centred, what you can do is just drag and highlight all of it.

[00:05:39]
At the top right here you can see we've got all these different alignment icons. So I just like to hit both of the centre, so centre horizontally and this obviously isn't correct, that centre's at all in the centre. But now these are all vertically centred, so if I move this, and it's totally off, if you press that, it will totally snap, okay?

[00:06:00]
And if you group this, if you hit Command + G, when you highlighted over, neither of the group. I can drag them around, and I can place them at the centre here of my modal. The last thing we'll just need is a close button. So Danielle brought up a good point at the last break that I forget to tell you where you can get icons.

[00:06:18]
If you go to the nounproject.com, you can get icons. So I just searched for close, you can just pick one of these, you might need to sign in to get an account, but it is free. So just click this icon, get a basic download. If you're gonna be using this in production, please pay for it and please give appropriate credit.

[00:06:38]
Today, we're just gonna be using this just for our internal purposes but again, please give credit to the creators. You're gonna want the SPVG, so again, download that icon and we could just drag it in Figma, okay? So now I've got a close icon, and that's it. So now we've got a little modal.