Create a Simple PopUp Using Auto Layout | Figma Design

hey guys liz foster here back with another tutorial today's goal is to design a funding pop-up card to allow the user to fund a creator on learn.com so it's going to look something like this let's jump right into it and let's let's start to learning all right guys so i got our our frame set up this is our edge creator profile right so we're gonna be focusing on this action right here on the fund me right this is where the pop-up's going to get triggered so let's go ahead and create our pop-up so first we want to have the creator's face a name so we're going to go ahead and create a circle right here circle and let's do this uh 40. and we want to create a place for her name so delhi broner make sure this is center align and we want this to be a 16 pixels with a 24 height belly broner is a name right we want to use that image right and we want to auto layout these actually first of all this one here and uh see go in here double click and go over here to image and click copy and then come over here to the circle instead of fill your fill actually shouldn't be a solid it should be an image and simply push paste there we go it's looking a little small right now but it's going to look better with the card we still want to have that purple ring around it right so i'm gonna create a stroke uh with a three so uh stroke and then we're gonna go with the purple cool and then actually we're going to go a little bit bigger let's go 48 there we go then we want to auto layout this so this the name in the in the image are always the same uh pixels apart so we're going to hover over both of them we're going to hit shift a for auto layout right now they're sent they're aligned to the top left we want them aligned to the center and hugging the top okay that's first step and then we want these to be let's try 16 okay that's cool let's see what the 8 looks like i like the eight it's closer it's nice there's space but it's closer all right first things first we design the the user profile uh image and the name next thing we know uh next thing we need to do is some easy stuff maybe our branding our company name so learn.com we could leave that at 16 24. and then we want to create a one liner so this one liner is going to showcase the reason why you're going to fund this creator so it'll make more sense right now let's create some copy so it's going to be first person it's going to be fund help fund me so i can continue reading content about data analysis and beta analytics okay then maybe put a little happy face emoji go here and then we'll do that one yeah we'll do that one cool and this one we're going to go a little smaller on the text we're going to go let's do a 14. basis is going to be 16. let's do 24 still okay cool now okay now the question is do we want all these to be spaced the same uh length apart or do we want something to maybe these two to be closer i think we do these two closer and then we'll do both of these sections uh a certain width apart so i'm gonna hover over this frame that we created and then the text and then put shift a sorry i feel like sneezing but it didn't come out same thing so it got it got aligned to the top left let's do it center and then to the top and then let's do this let's try 32. uh that's look at some good spacing huh i like it okay cool and then now we could uh put our branding and this area together so hover over everything shift a auto layout again by default it's going to be at the top left and then we want it to be at the center and top and this one 80 is good i like the spacing so just so you guys know everything here this container and then this text is 80. but this container itself the the the items and elements are 32 pixels apart so there we go now let's add a fill and look what happens oh wow we got ourselves a card well not yet it looks kind of weird because everything's hugging around the text we want to add some padding so then we go over here to these two little boxes padding around items let's do a 24. there we go now we got a card now you know there's some there's something going on here so there we go i like it so far everything's cool and just for habit purposes i would encourage you to learn this too for habit purposes is now that you have all your frames go in here and instead of hug contents so left and right here this is top and bottom right now we're going to focus on left and right instead of hug context let's do fill container what this does is it triggers this nothing what's going to happen it shouldn't happen so if i ever want to change the the size of this see how nothing it does nothing gets adjusted correctly so first we do the mainframe fill container but then we have to go into the nitty gritty stuff and do everything the same fill container and let's do this one to fill container so now when i do squeeze it out look what happens wow it gets adjusted properly so just for habit purposes maybe you want it this way we're not going to do it that way we're going to keep it wide but just for habits i'm going to do it like this too i'm gonna do a little longer okay all right cool we got the left side it's gonna be a two part one so it's gonna be the left side and then we want to uh create the inputs so the inputs are gonna be the amount they want to fund so amount and align this to the left so that's one keep that 16 pixels another thing we want them to do is if they want to leave a personal message personal message and then one where they don't have to input we're going to do what's called the funders name this is essentially the user who's funding it and then we also want to create a button so copy again and the button is going to say invest so we're going to stick with the funding terminology so invest let's suppose three dollars so three dollars into jelly that's gonna be the button call to action this is this one you want to center it now let's stick to the button first let's create the button so you right now we've been kind of just grouping things together and auto laying out auto laying out the um different elements together but just so you guys know you could auto layout text so in this case the way i want to create a button just hover over this text and hit shift a nothing happens at first but then go ahead and do fill see how it feels by auto by automatically it'll give you eight eight pixels of padding which is good i like eight pixel padding the only thing i'm gonna change is coming in here and centering it to the center so that way the text okay see the text no matter how big the button gets the text gets centered okay and i want to add so i'm gonna go back i'm gonna add 16 pixels and this one i like to round my buttons all the way so just pick a big number 80 is going to round it for you well in this case i'm going to keep the button white i'm going to change the text to purple and let's name it so this is our button oh this is our left side let's call it left side cool guys we're moving along okay now let's focus on the amount we want them to let's suppose the three dollars right let's do three dollars and then we're gonna do this we're gonna change this from extra bold to light and then we're gonna uh tone it down to 14 pixels with 16 pixels height okay and i'm gonna look at my icons so i use i find icons i'm using new icons from the figma community you could go ahead and find them to find other beautiful icon packs as well but i like using these ones so i'm gonna look for money a money symbol like this one cool it's a little big so i'm gonna resize it make sure you hit these right here so that way no matter what it does it proportionately so i like to 16 by 16 and then i'm gonna auto lay out the money sign with the text the amount so shift a cool and then you wanted to center it this way and then i want these to be 16 pixels apart cool now i want this to be an input field so usually input fields have a border so i'm going to create a stroke you're going to notice like what the heck this input field looks weird that's because there's no padding so let's add that padding let's do an 8 pixel padding again just like our button perfect i like it and then for this one again let's do with the 16 and 60. have some roundness in there i like to do eight on inputs there we go the input's kind of small so if we look closely here we aligned it to the center but to the left so the cool thing is if we make this input field bigger everything all the content stays stuck to the left which is which is beautiful so that's perfect okay perfect perfect perfect all right so now we could do the personal message and just a little quick hack we don't need to keep creating these um as we go we could just copy this one and just change the contents in the inside so in this frame over here and then again copy and paste and bring it over here the reason why is because we already have everything laid out with our auto layout we could just replace content so for example with the personal message we just take off this the icon which is left with the text and put your message here sorry i'll get some water throat decide to be dry all right so see now we have our inbo or our input for our text and then we could do this ah but you see this right here look i try to make it higher but you're like maybe thinking why is the text centered to the middle that's because if we look over here it's centered to the left and and to the center simple fix just do it to the top left and it pushes up there cool now it looks like a text input box this looks like an input for money this looks like an input for just a message perfect and for the founder's name instead of the money sign we're going to put the founder the the funder's name sorry not the founder i'm stuck because i'm a founder but thunder's name her name is lisa quinn cool and then we're just going to copy this circle right here this is her so copy piece bring it over here so check this out this is what i mean by just replacing content see the money sign here we're going to have to make this circle smaller that's at 40 by 40 right now let's do a 24 by 24 we might have to go smaller 16 by 16. we simply just drag it in here you see that blue line boom that means the auto layout feature is working properly and it just puts another another element in there and it's 16 since we already set that up but since we only want the the profile image and the name we just simply go over the money sign and delete it and now we have the funder's name nice and aligned there okay a couple more touches and we're almost done guys so far we've done doing great job okay now the one thing we want to add is is just in case the user does wants to be anonymous we want to make that available so we're going to add another we're going to do a little rectangle box here do a little what is this 12 by 12 we'll add maybe like a two roundness yeah and then we're gonna do a stroke of one is fine on the inside and then we're gonna eliminate the fill okay so this is just a little check box and what we want in here the text to say is um i don't know anonymous for now it's subject to change but anonymous i'm going to do this by at 12. let's do we're going to do some more and this is a check box i'm going to hover over the check box and anonymous and auto layout center it to the left and we want this to be eight pixels so there we go anonymous and we're gonna do the same thing for the funder maybe the funder doesn't wanna showcase uh their name at the public facing as a public facing message or that it was them maybe they could do a public message but anonymous user or they could be both anonymous or an anonymous message and then the the edge creator knows who did it but yeah we want those to be available okay cool now let's combine these two so this frame with this frame with anonymous auto layout top left we want these to be eight pixels apart same thing with these two hover over those auto layout i keep wanting to sneeze but i can't excuse me i might edit that out i'm i apologize but let's keep it moving we're doing good so we just auto lay out these i want them to be eight pixels apart boom all right cool now we could auto lay out the amount with the amount input we want this to be top left perfect we want this to be eight pixels close personal message auto layout top left and we want this to be eight pixels close perfect under name with this auto layout top left eight pixels awesome now we got all our so this is our funders name funder's name it's his personal message sorry personal message and the amount perfect this is our button now we could create a card with all of these so hover this shift a we want the elements to be 32 pixels apart and we're going to have this centered nothing's going to happen yet but it'll make sense because a button we want the button to be centered so center to the top boom the button moves something's moved here too but it's okay we're going to fix that right now so just how we did over here by habit as i mentioned earlier is to do the uh fill container so let's do the fill container on the button first boom fill container it's going to stretch all the way awesome same thing with this fill container then go into the nitty gritty stuff fill container and then fill container yeah just keep doing fill container hub contents fill container left and right remember that left and right any gritty stuff fill container some things get pushed automatically we'll fix that fill container go into all your elements fill container double click the input fill container cool now when we stretch it look what happens wow this looks awesome we have control all right now we're going to put a fill again it's going to be white you won't see the the button we're going to change the background to purple you're like oh no what is going on so many things are wrong here black does not look good with the purple the white button the box is like encapsulating the text super weird so first things first same thing over here we did a 24 padding pixel padding same thing over here excuse me there's zero padding let's do 24 boom already looking better now we want to change the black text to white instead of doing one by one and doing the different selection colors you could just hit the frame go down to selection colors and turn this black into white and it turns everything into this frame white so just a little hack okay so there we have it guys look at it's coming along really cool the only thing now is connecting these two and i think we got ourselves a nice little card okay cool so now let's put it together auto layout the left side and the right side nothing happens at first we want this to be this is perfectly fine how it is right now and since these are already 24 pixels padding the way we designed them when you auto layout both of them you could just put a zero um spacing and it just combines them together we're done i'm just kidding you're like luis what the heck is going on here so we've been working a lot with left to right fill containers on this one so this side could fill in to the rest of the container as we can see here with the dollar line we're gonna do the top to bottom so right now it's fixed height look what happens when you hit fill container voila it fills it in this is looking really really nice guys i'm liking it a lot and i think i think this is i think this is it so just to break it down real quick actually before we do that we're just going to add some roundness to it we're going to 16 to the whole frame okay so this is our card our ultimate pop-up card pop-up okay hover over that or click it i'm going to do a 16 pixel you're like wait a second least they're not rounded at all there's a little mistake i used to run into all the time and we're gonna we're gonna do right here it's called clip content don't forget to do this boom and something i picked up here actually we're gonna change sorry guys i'm gonna go in here and just change the background color on this input right now there's no fill i'm gonna do a fill of white and let's do 40 40 the reason why we could change this but the reason why actually i don't know if i like it right now like that so 20 percent if i okay the reason why is because since they're not inputting anything they don't have the ability because this is just taking their name from their account um we want to showcase that they can't edit this this is just a filler and we just want to showcase that look this is a nice way to show that you are connected to delhi and the transactions happening here so um we just want to make sure that the state is something indicates that so we're going to go with the like a lighter purple fill could do it it could be anything all right now we can break it down guys so our left side we're focused on the creator and just to even focus more we could even do delay broner let's do her at 24. um perfect so learn.com our branding we're focusing on daily broner and the reason why i want to fund her is because she says you know i want to fund her because help me help fund me so i can continue creating content about data analysis and data analytics i like her content i want to fund her i'm gonna send her three dollars on the right side of our amount almost under three dollars i haven't chosen to write a personal message yet but i have the ability to also have the ability to be anonymous and then my account in this case i'm lisa uh thunder i'm the funder because i'm funding her and i haven't chosen to be anonymous yet and then our call to action is that i'm gonna invest three dollars into delhi so there you guys have it guys and to put the cherry on top let's see it in action so we're gonna create a quick uh prototype go ahead and click over here your design go to prototype and since we're gonna be focusing on fund me we're gonna double click until we get there fund me excuse me okay cool so then we connect the node so it's gonna be on click and then instead of navigate to we're gonna do open overlay it's an overlay it's a pop-up right so this is essentially what it's going to do we want it to come to the center uh close when clicking outside yes to showcase that you can exit and add background uh behind overlay yes we want it to be black and we're going to do a 40. it's going to be transparent so that way we can still see oop that way we can still see the background an animation i don't want to be instant i want it to move in i want to look really nice so i wanted to move in from the right side at 400 milliseconds and right now it's that easy out i want it easy out and back you're going to look how nice and bouncy and friendly this is so uh one more one more breakdown on the interaction details it's going to be on click so when i click fund me this is going to come up it's going to open overlay okay we're opening an overlay i want it to be centered when clicking outside i want it to close and then adding background with overlay add background behind overlay sorry with the 40 black color animation i wanted to come in from the right side i wanted to move in okay i don't want to be instant i wanted to move in from the right side i wanted to have a nice little jumpy feel easy in and out back and at 400 milliseconds so let's take a see how that looks like it's loading perfect so this is our profile if i click funny look at that perfect i like it so if i click outside perfect you see that jumpiness funny again man i could do this all day if i want to cool and i could just simply input it in here do my thing look at that look how jumpy that is but yeah there you guys have it guys i hope you guys enjoyed that tutorial uh please like subscribe and leave a comment um please leave any comments in there on any other tutorials you'd like me to do again this is for learn.com i'm a co-founder of learn.com if you haven't checked it out go ahead and check it out a lot of free education educational video content on there we have a big project that we can't wait to release so um yeah go go ahead and check it out have fun in there and we'll see you next time

Channel: Luis Fausto

Views: 579

Keywords: Figma Design, UX Design, Auto Layout

Id: 7zJgGX4gtho

Length: 23min 46sec (1426 seconds)

Published: Sun May 23 2021