Figma UI Design Tutorial | Sign Up Page

today I'm going to show you how to design a signup form using figma I'll show you how I lay out all the content with wireframes how I organized all of the layers and how I applied different styling for the hover and active states let's get started so if you're new to my channel I make videos on UX UI design and front-end coding if you enjoyed this video please leave me a comment down below so I know what kind of tutorial you would like to see next so jumping right into it I'm opening up a new figma project this video is part of a mini series where first I'm going to show you how to design the signup form and then in my next video I'm going to show you how to develop it using HTML and CSS if you enjoy these mini series please give this video a thumbs up so jumping right into it I found this image online of this purple design and I was really inspired to use it in a UI so first I pulled this image and then I made some modifications to make it a bit brighter in this one so I'm really using these images as inspiration for the signup form and then using those images I created this color palette so first I have a column of more neutral colors then I have different variations of a primary color and I want to incorporate this purple in the UI in some way so I added that purple swatch here using these images and this color palette I'm going to create a signup form so first I'm going to go over to the side and click the letter A which brings up all the different kinds of frames I can add to the page so I'm just going to add an iPhone then I'm going to start by defining the main layout of the page so first I'm going to click the letter R for rectangle and add a rectangle to the page so this rectangle will hold the entire signup form so instead of calling it rectangle 8 which is the default I'm instead going to call it wrapper so this will be the wrapper that will hold the entire signup form then I'm going to get a little bit closer and I'm going to add some text to this initially I'm going to do everything in greyscale and then I'll go back and add color and different treatment to make the design really pop so first I click the letter T for text and then I'm going to add some text to the page I'm just going to call it signup form place that in the middle and then I'm going to duplicate this by holding down the command key and then writing a basic description now I obviously don't want the title to have the same treatment as a description so I'm going to click on this title and apply a different variation to it so instead of it being set to 12 I'll set it to 32 and I don't want this description to be set to bold so instead I'm going to set it to medium next I'm going to work on the actual form elements so I'm going to click R again for a rectangle and I'm adding a rectangle to the page I'm going to make this fill a little bit darker so it stands out and uh placing that in the center and then I'm going to add a label on top of the form so first I might just write name for the first one and then I will duplicate it and maybe I'll write email for the second one and then finally I'm going to add a button that will be for submitting the form so this is my initial wireframe for the signup form and now I'm going to go back and add different treatment and styling so the design really pops now it's best to be as organized as possible as you work so I'm going to grab this box and this name and I'm going to put it in a group by holding command G and then I'm going to rename it form group meaning that there's a label in here and a text field so I'm going to take this and actually make it into a component so I'm going to go up here and click create component if you're brand new to figma components I have a whole tutorial that goes over it so if you're interested in watching that video I'll link it in the description below so I made it into a component so that it will be easy to manipulate things later on so that way I can delete the email field and instead duplicate the name field and recall it email that way I know for sure that these two elements will have the same styling and then I'm also you take this button and put it in a group and I'm going to call it but in primary and this one I can also create a component for it as well that way as I started to build this design system when I make a change once it'll change everything holistically okay so now I'm going to apply some styling so it looks a little bit better so first I'm going to take this wrapper area and maybe initially I'll set it to one of my colors that I defined in my palette maybe I'll change it to this light pink color and see how that looks and then I'm really interested in including this lighter image in the background in some way so I'm going to copy this and I'm going to paste it in my design I'm going to increase the width a bit now the image automatically goes to the top of the frame so instead I'm going to drag it and bring it to the bottom and I'm going to rename it background next I'm going to work on the styling for the form elements so now I'm going to tap in here and change this master so if I change the color of this field it will automatically change the other field as well going to go back and look at the colors I defined and see if I want to use any of these I might want to try with this darker pink color and see how that looks I like how this looks but I actually think I want to change this background color to just be white instead so it pops out a little bit more and then I change these ones to this other lighter pink and then I need some placeholder text in here so I'm going to go into this master component and then add a text field and I'm going to say enter your name now since this is a placeholder I don't want it to be as vibrant as the actual label so I'm going to reference my color pallet and then choose this other gray color then I'm going to real able the placeholder for the email field as well and I think that looks pretty good so far and then I'm going to add modifications to the submit button so I actually want this button to be the primary color so I'm going to modify it to be that pink color and instead I will set this to white and bold that in terms of styling I want everything to have a similar curve radius I'm going to go into each element and increase the curve radius and then I'm just going to tighten up the alignment a little bit more now there are different ways that you can handle alignment and positioning typically I like to leave everything as a multiple of four so that way I know I can easily use REM when I'm developing it but you can use whatever kind of grid system you would like so now I have this entire signup formed completely designed I just want to fix its position a little bit more so I'm going to take these elements and put it in an entire group called form and I'm just going to fix its position a little bit now because I'm designing this for mobile I know that the keyboard will pop up right over here so I'm just going to leave it a little bit closer to the top of the page next I'm just going to apply a different styling for the hover state and the active State so I'm going to take this mobile design and copy it so here I want to apply a different styling when it's hovered and then I'll make a different instance when there's a focus State so here I'm going to change the fill instead to be white and I want to add a shadow effect so I'm going to effects and I'm going to make the X and y 0 but I don't want it to be gray instead I want it to be a light paint color that color might be a little bit subtle so I'm going to go back to my color palette maybe modify it to this color that looks pretty good so I want this one to represent the hover State and then I'll make a different modification for the active State so when the user is actually on a form element it really should have a slightly different treatment so the user is aware that they're actually on that element at that point in time so here I'm going to apply a different styling when the user is actually on this field I'm going to my fill again and I'm going to make it white I want this email field to have the same kind of shadow effect as the hover State so I'm going to tap into here click the four dots next to it and I'm going to add a style and I'm going to call it form hover and then I'm going to click inside of that email field and then I'm going to apply that form hover but this one I also want to indicate the active state so actually going to add a stroke here and I want the stroke to have the primary color and then you can also play with the width of the line so now I have the default design of the form and now I have the hover and the active States and then I'm going to replace the text with a line so it's clear that the user is typing in at that moment so just to review what I did first I pulled some images as reference of inspiration for this project so I took this image and then I applied modifications to make it a bit brighter and less opaque and then using these images I created this color palette that I wanted to use throughout my UI system so I created these different swatches of colors so for the mobile view first I just laid out the content with wireframes and then I went back and inputted realistic content and styling I tried to keep everything as organized as possible so this first name field is actually a master component that then the email field and the other states are based off of so that way if I ever go back and decide to change this field in some way it will change all the fields as well then the email field is actually an instance of the name field and then I added a submit button at the bottom then I added a different styling for the hover effect and the focus date so there you go that's how I created the signup form using figma please let me know if you have any questions on the topic and subscribe to stay up to date with my latest content thanks for watching [Music] [Music] you

Channel: Angela Design

Views: 64,297

Keywords: sketch, ux, ux design, ui, figma, product design, product designer, app design, web design, prototype, wireframe, ux process, how to, demo, tutorial, design process, ui design process, ux design process, front end ui, figma mobile tutorial, figma design tutorial, figma tutorial, figma web design, figma to html css, figma to html, design to code, design code, front end web design, front end web development, ui design tutorial, ux design tutorial, ux vs ui design, figma prototype

Id: B4_VtUnRUzw

Length: 11min 22sec (682 seconds)

Published: Mon Jul 20 2020