3.1 Let’s Design a Sign-Up Form in Figma
With that overview complete, in this lesson we’ll do something practical. We’ll design a sign-up form whilst learning some new tricks with more advanced tools like auto-layout, components, color styles, text styles, and more. So let’s begin.
1.Introduction2 lessons, 06:09
2.Getting Started With Figma6 lessons, 44:41
3.How to Use Figma as a Designer3 lessons, 50:38
4.How to Use Figma as a Developer2 lessons, 08:11
3.1 Let’s Design a Sign-Up Form in Figma
Welcome back to the course. In this lesson we're gonna do something practical. We'll be designing a sign up form, a very simple one using, of course, the knowledge that we got from the lessons so far. But we'll also learn some new tricks. And how to work with some new tools that we haven't covered yet, like components or the layout, color, and text styles, and more. So let's begin. For this lesson, I switched to the Figma desktop app for Windows. And as you can see there's no difference than the browser-based one. Well, the only difference is that, to get to the home screen, you now have a dedicated button right here, a Dedicated tab. And any file that you open will be opened in tabs in this top bar here. And you also have some additional options and this drop down here like the Interface Scale and Color Space. But we are don't have to worry about those right now. So what I'm gonna do is create a, new project under Mobile Apps because we're gonna be designing a sign up form for a mobile app. So let's create a new project. I`m gonna call this Demo App. And I'm gonna create a New File. And this new file is gonna be called Sign-up Form. Now I'm gonna have two pages in here, just to help me with the organization a bit. The first page will be for Assets. The second page will be for the actual Screens. So let's start by defining some assets. And the very first one is the logo for the app. And I got this logo from Envato elements. You'll find links to all the assets that we're gonna be using in this lesson, in the lesson notes. And I just downloaded the source files, copied and pasted a vector version of the logo in Figma. So I'm gonna to call this Logo. And the next thing I'm gonna do is create a component. To do that, I'm gonna click this little button here, or I can choose to use CTRL+ALT+K as a keyboard shortcut. So now, I just transformed that standalone element into a component. So components are elements that can be reused and they function on a master child system which means the one that you see right here is a master. And if I'm gonna make a copy of this, I'm now going to have an instance, I said child earlier, the correct term is actually instance. So what that means is that, if I'm gonna go to my master element and make a change. Let's say for example, I want to change this fill color, all the instances will be updated automatically, that's the main purpose of components. Also components are very useful when working in teams. Because you can have a centralized file with all of the components and then your team members can use instances of those components. And if at any point you want to change the master component, it's gonna change all of the Instances automatically which is fantastic. And also, any instance of a component can have different styles than the master. So it's really easy to create, for example, a button component and then each instance will have a slightly different style, and I'll show you that in just a little bit. But for now, we have our first component, which is the logo. Next, I wanna grab some icons, and for that, I'm gonna use an app that's called Icon Set. And let me just bring this over, so you can see it better. Icon Set is a desktop app that's free. You can use it on both macOS and Windows. And with it, you can basically add your own icon sets from your files, on your computer. And then you can browse them, so you can even search for a specific icon, for example, Facebook. And then you can grab this icon, you can paste it, you can export it, you can use it in other software. Right now I'm using Font Awesome, the free version available for desktop and you'll find a link to that as well. So what I'm gonna do is copy this Facebook square, copy, and let's go back to Figma, paste. And actually, I think this doesn't work directly, but we can just click and drag it in. So now I have this Facebook icon. So let's resize it, I'm gonna click this button that says Constrain Proportions. And that's gonna resize the width and the height at the same time. And I'm gonna resize this to 24 pixels, just like that. I can actually right click on the group that's gonna get rid of the parent frame. And I'm just left with this vector, which I'm gonna call iconfacebook. And what I'm gonna do is I'm gonna create a component out of it. So click this button, and now I have a component called Icon Facebook. I'm gonna grab yet another icon. I'm gonna choose, I'm gonna search for envelope, and I'm gonna choose this one. Again, click drag, and I'm gonna resize this to 24 pixels. Right click, Ungroup and I'm gonna call this icon-envelope or icon-email would be a better name for it, create component. Finally, the last icon I'm gonna add, is an arrow left and I'm gonna choose this long version here. So click drag, resize 24 pixels. Ungroup, rename this to icon-arrow-left and create component. Great, so now I have all of my icons. Next, I'm gonna need a button. And for the button, I'm gonna do the following, I'm gonna start with the text. So T for text tool, I'm gonna say sign up with Facebook. I wanna make this uppercase, so I'm gonna do that. I'm gonna set its font family to Futura PT and font style is gonna be book. That's okay. We're actually let's go a little bit heavier, maybe medium, and font size I'm gonna select 15 pixels. And I'm gonna select a 2% letter spacing. Under line height, I'm gonna choose 24 pixels. Now with this, I'm gonna select it and I'm going to press shift A. Now Shift A will add an auto layout. An auto layout is one of the most unique and powerful features in Figma. With auto layout, you basically create a Frame, which can have horizontal padding vertical padding and a certain space between items. So it's really easy for me to create a button with this. For example, I can set the horizontal padding to 24 and I can set the vertical padding to 16. And I can do a fill color. Let's keep that at white for now. Let's also add four pixel border radius. So now we have a rounded button. Now the cool thing is, in a frame with auto layout, it's really easy to rearrange and add new elements. So for example, I can copy this Facebook icon and I can paste it in my button. All I got to do is select one element within that frame, paste that element and now I can rearrange this. I can align it to the top, to the center, to the bottom. And I can move it left or right. Also, I can choose the distance between items. So, the distance in my case between text and icon. Let's set that to 16. And you'll see that with the system, you can basically have any text in here and the button will resize automatically. How cool is that? One other thing that I'm gonna to do is resize this to 18 pixels. I just want to make it a little bit smaller. And now see that this doesn't align with the text very well. Well, I can align it to the center from here. So the button is almost complete. The only thing that's missing is proper colors. Right now it's kind of black and white. So let's go ahead and define some colors. And to do that, I'm gonna start by drawing a simple circle, something like this and setting its fill color to 1f252f. This will be my black or my dark color. Now Figma has another cool feature that's called color styles. And with color styles, you can select an element with a specific color. And you can click this + button to create a new style. I'm gonna call this black, and now, as you can see, I have Local Styles, Black. And whenever I create a new element, and I wanna use that specific color, instead of searching for the color code manually, I can just click this icon and I can choose black. And if at any point I want to change this black color, I can click anywhere on the canvas until I see Local Styles. Then I hover on the color I wanna change. I click this icon and I can change this color to whatever I want. And you'll see that when I do that all the elements that use that color style will change automatically. So now let's go back to our original black color. Now, let's do the same for the other colors. I'm gonna define three more colors. So I'm gonna hit Ctrl D on Windows or Command D on Mac, to duplicate my selection. And for this to detach from a Color Style, you would simply click this button, Detach Style, and then I'm ready to add my new color. And that will be F51858. And I'm gonna create the color style for it. And I'm gonna call it accent. Let's do that again, 5d800. This is actually the color from my logo. And I'm gonna to call this, Brand. And finally, let's do it one more time, 3a5998. This will be the color for Facebook, okay? So now I have my Local Styles defined. What I can do to make them look a little bit prettier, I can select them all and I can do Shift A to add an auto layout. I'm gonna call this Colors. And I'm gonna set maybe like 32 pixels in-between them. So now that we have all the colors taken care of, I can select my button frame and under Fill, I can use my Facebook color. And then the text and the icon can use just pure white. And since we're here, I just wanna quickly show you a very neat feature in Figma. When you select an element, a single element, you have the option to change its color under Fill. When you select multiple elements, you get a new panel here called Selection Colors, which show you all the colors from all the currently selected items. So if I'm gonna select my frame, you'll see that I have two colors Facebook, and white. If I'm gonna select all of these elements, I have Facebook. I have the brand color. I have black and I have white. And it's really easy to change colors like this on multiple elements at the same time. So now our button is complete. Let's call this Button and let's create a component from it. So now I'm gonna select all of these, shift A to create an auto layout. I'm gonna select 32 pixels between elements. And I'm gonna name this components. So now we have Components colors the defined. It's time to start working on the actual screen design. For that I'm gonna switch the to the screens page, F for frame and I'm gonna be using a preset for iPhone 11 Pro Max. And I'm gonna press control R to rename Screen 1. So, how are we designing this screen? Well, we need a logo, we need a title that's specific to the actual app. And then we need some signup options with Facebook and with email. And further down, we need the link that says, hey, do you already have an account, here's a link to log in directly. For Screen 2 we'll just have a sign up form. So Screen 1, let's start with the logo. I'm gonna to press Shift 0 to zoom to a 100%, and then I'm going to switch to my Assets page, Local components. See how they're all the find handy in here, we can simply click and drag elements onto our page. Then with it selected, I can hit Align Horizontal Centers to align it to my page. Next, let's add some tiles. The first one is gonna say Rent A Home In Just A Few Clicks. And for the text I'm gonna use for Futura PT. Font weight, I'm going to choose Bold, font size is going to be 35 and let me get rid of that uppercase. We don't need a 2% letter spacing here. Line height will be 48 and I'm gonna text align this to the center. And for color, I'm gonna choose the black color that we defined previously, okay? So now just resize this to something like that. And since we learned about grids, let's add one here because grids are perfectly viable in a mobile app like this. So I'm gonna to select my screen. I'm gonna choose Layout Grid, Columns. I'm going to choose a single column, Type Stretch, but I'm gonna set a margin of 48 pixels. So that means I have 48 to the left, 48 to the right. And here's another thing that I can do. I can click this little button and I can create a Grid Style. So let's call this Mobile grid. And just like with color styles with text styles, I can reuse this on other pages. So now with the grid there, I can just reposition and resize this piece of text so that it fits arrow grid. And now I'm gonna position this 64 pixels from this logo. For that I'm gonna hold down Alt until I see a number there. And I can use the up and down arrow keys to nudge this one pixel at a time. If I want to measure ten pixels at a time, I can hold down Shift as well. So shift, Alt, up and down to reposition this, okay? Next, let's add a small separator. For that, grab the rectangle tool and draw a rectangle and make it 80 pixels in width, 8 pixels in height. Let's give it some rounded corners, maybe 8 pixels. I'm just zooming here. And for the fill, I'm gonna use the accent color. I'm gonna align it to the center and I'm gonna position it 32 pixels from the text above. Now speaking of the text above, let's select it. And let's go to text. Click this Style button and Create a new text style. Let's call it Title 1. And this will come in handy in the next screen when we'll duplicate it. Next, let's add another piece of text that says Browse over 10,000 listings in your area. Now we need to tweak the properties for this a little bit. Let's detach it from Title 1 because we'll create a separate style for it. So it's gonna be Futura PT. We're gonna to use book as the weight, font size is 22, line height is 32 text align is going to be center as well. I don't need that letter spacing there. And actually I think I forgot to remove it from this text style as well. So click anywhere on the canvas, go to Title 1 and remove the letter spacing, cool. So now this is complete. Let's create another style for it. Let's call it Title 2 and let's move it up 32 pixels from this separator. All right, now, since we have the same distance, 32 pixels between the separator and these two elements, we can create a frame with auto layout. So select everything, shift A. And now, if I wanna change the distance between these, I can just select it and changes from here. However, I'm going to keep it at 32. So let's hide the grid for now and let's add some buttons. For that I'm simply gonna grab the button from our components list here. And actually want to resize this button so that it matches my grid. But currently I don't have any option of doing that. Because it has an auto layout applied to it, that's set to horizontal by default. And on horizontal, I can have an auto height or a fixed height. If I want a fixed width, I would need the auto layout to be set to vertical. So we need to make a quick change to the parent, to the master component. So that change goes like this. I'm gonna select the elements inside my frame and I'm going to do Shift A to create an auto layout which is horizontal. And then, I'm gonna select my main frame. And I'm gonna switch the auto layout from horizontal to vertical. And I'm gonna select fixed with. So now, I can go back to my screen and because this is an instance of the original button, I cannot resize it to my liking. And also we're seeing that The content is still aligned to the left, so let's go and fix that. I'm gonna select my content here, and make sure it's aligned to the center. Okay, we're good to go. Now let's hide the grid. Let's duplicate this button, Ctrl V, or Cmd D if you're on a Mac. And this will be a button that allows us to sign up with an email address, but there are a couple of changes. First, we need to change the text, we need to change the icon, and we need to change the background color. That's really easy to do, simply hold down Ctrl or Cmd, and click on a specific item. And that's gonna expand the element here in the Layers panel, and you can select each individual element and work with it. So, I can double click this text, and I can say, sign up with email. I can select the whole button, and instead of Facebook here, I can select Brand. And finally, I can select this icon Facebook, I can right click it, and I can say, swap instance with icon email. And of course, I'm gonna change that color to white. And here actually, we can see that the icon doesn't look as it should, it looks disproportionate. That's because it fits within 18 pixels, just like the old icon that I had. But if we go into assets, you'll see that our icon is actually 6 pixels wider than it is high. So how do we fix this? Well, it's a little bit tricky when working with components. So just to keep things simple, let's actually replace this icon to one that's a square format, so 24 by 24. So let's go back to icon set, and I'm gonna search for another envelope. And let's see if this one is a square. It is not, this one is a square. So, we're gonna use this one, click Drag, And let's resize it to 24, let's un-group it, let's delete the original icon email. And let's call this one, icon email, And let's create a component. So now, we can go back to our screens. And we can swap this, we can reset it first, and then we can swap instance with icon, email. Change that to white. And we're good to go. We've now created two buttons that look different by using the same component. Now, we can simply select both of these, Shift A, and choose 32 pixels between the two. And now I can select this, this, and this, Shift A again to add another auto-layout, and select 64 pixels between them. Finally, the last step in this screen is to add a little link right here at the bottom that says, hey, do you already have an account? Let's go ahead and login. So let's center this. For fill, I'm gonna use black. It's gonna be Futura PT book, font size is gonna be 18 pixels, 24 for line height. Let's remove that uppercase, and also let's remove the letter spacing, align text to the center. And then this thing here is actually gonna be the link, so we need to use a separate color for it. Now, when you add a color style, it cannot have different colors within that that element. So what we're gonna do, is detach this. The fill color is still here. Now, I'm simply gonna select this fill, use the eye dropper tool, and select the brand color. So now with this, I can put it in frame 3. It's already positioned at 64 pixels because of the auto layout aligned to the center, and we're all done. Now select everything, align once again to the center, vertically, and horizontally. And with that, screen one is complete. Now let's quickly go ahead and design screen two. So for that, use the frame tool, select this preset, Ctrl R for renaming screen two, Shift 2, Shift 0, excuse me, to zoom to 100%. And we'll start by defining the same layout grid as before, and let's start by adding one of the components, the arrow. That's gonna be used to navigate to the previous screen. So let's align this with the grid, and let's position this at, I don't know, maybe 64 pixels from the top. And for color, let's choose black. But let's also set an opacity on the actual layer of about maybe 50%. Yeah, that looks pretty good. Now, let's add a new text that says, sign up with email, and we're gonna be using the title one style. So click on this button, select Title 1. Now select both of these, Shift A to add auto layout, and select 32 pixels between them. Next, let's create our form. So for that, I'm gonna grab the rectangle tool, let's bring the grid back so that I can make these full width. These will be 56 pixels in height, let's add a border radius of 4 pixels. And for the background color, I'm gonna choose black, but I'm gonna set a 1, excuse me, a 10% opacity. So that's our input. Let's add a label to this, for that T for text tool. I'm gonna say your name. And I'm actually gonna go into the button, select the text, right click, More, CopyPaste, Copy Properties. Then I'm gonna select my new text, right click. Copy/Paste> Paste Properties. And now I'm simply going to change its text black, its color to black, align this with the input, And position it at 8 pixels from the input, Shift to select this as well, Shift+A to add an auto layout, so now, Ctrl+D to duplicate. And once more, this will be for, Email address and this will be for password. So now select all three, Shift+A, and 32 pixels between them. Now let's select this group and position it at 64 pixels from the the text above. And now we have to add a new button for sign up. So let's grab our button from components. And we're actually gonna paste it inside our form group here. Let's align it to the left, resize it. And we'll do some changes here. For fill, we're gonna use the brand color, Like so. We're gonna change the text to just, Sign up, and we're gonna select the little icon and we're gonna hide it. And that's it. Finally, let's add the last bit of text there. So I'm gonna copy that, paste it in. And I'm gonna say this bit, let's resize it to 318, and that's it. We've now created two screens for a signup form. Of course, you can tweak this a little bit and make it a little bit more refined, but time is of the essence with this course. So I kind of sped through it and worked as fast as I could while still trying to explain things as I was doing it. All right, so hopefully this demo gave you an idea of how easy it is to work in Figma and how powerful this is. Now, Figma can also do prototypes, can also create prototypes. And I'm gonna demonstrate that using the two screens that I've just created, that's coming up in the next lesson. So, I'll see you there.