Lessons

Lesson Info

How To Make A Form Using Variants In Figma

Hi, everyone in this video, we're gonna make a form basically rectangles with text. But we're gonna be fancy and say actually this thing here, we wanna, we're gonna make it a variable so we can make it active or we can make it error message. So this video really is all the skills you already know just in a different format to help us practice what we've learned. Plus, show us how important and useful variables are. All right. Let's get form making. OK? So let's make our form of select the outside frame shift two to kind of zoom in on it. I'm gonna turn my columns on as well. I'm gonna use my command forward slash and turn on grid grid. OK? So we're gonna start with a frame. We could use a rectangle frames, feel weird, but we know frames are useful. So I'm gonna draw it out roughly that sort of size. I'm gonna give it a stroke. We're just building the, I don't know the bits for it first. OK? We'll start with some uh lonely old components and then I'll show you how to kind of upgrade the...

m as we go through. So we've got this round the corners. Yes, I don't know something. OK. Text is gonna go inside. If you have a frame selected over here and you click in, you just kind of click inside of it. It will actually dive inside of it. It's not important for this one. Just um I put in sample text. I want it to be a left aligned and it's defaulting to my the font that I was kind of using right. And when you, if you're doing a form don't try and brand it would be my advice is especially for credit card details. You wanna kind of stick to like Roboto or open sands or inter or there's a lots of them, the more boring, the better counting these open sands. I want people to trust this form. I want to feel like it's not, I don't know Mickey mouse show. OK. Light is not what I want. Regular cool opens ends. It's gonna be easy to read at 16. I'm gonna knock back the color a little bit. I'll try and remember that. 9090 repeated. OK? I'm gonna use this text, copy it, paste it out of my frame just because I want it above it. And this is gonna be my label. I'm gonna call it a label rather than name or anything just so I can reuse it for different things. All right, I'm gonna turn my grids off. Command auto mac control on a PC four slash and just hit enter, don't have to change anything. I love that. All right. So I've got my first chunk and I think I want this as black. OK? Because I want to use it over and over. I am going to turn it into a component. OK? And if you do nothing else other than use a component, that's totally fine. We'll do a variable in a second because components are in, but this is my master component often. Now I'll move my master off here and start building with the non you know, with the instance of it so that I can do things like this and change that name. If I changed it on the first one, it will change it for all of them. I want to be changing the instance. So this is gonna be actually this is gonna be email. OK? My sample text is going to have like some prefilled in. Uh Here we go. OK? Let's duplicate it out. And because it's an instance I get to change it. I get to say this is the um maybe the name on card. I'm just gonna leave that. Let me call that name. Maybe another one, I'm going to go, you command d while I'm there another one. This is going to be my card number. All right, you get the idea that you can make one component, use it again and again and again, cool thing you can do about with components as well is that we, you might have learned, you might not have, have I shown you? And obviously you can change the text and you can change the color of things without destroying that kind of connection to that original main or master component. I'm going to undo that you can actually do some physical things. Like what just I can't move the um this text separately from if I go to that label and I'm like move up, it won't some, some physical things won't change with this, but some of them do. So I'm gonna turn my coms back on. OK? And watch this. If I grab the whole entire frame, no, the whole entire component and go like this. Can you see that will change? OK? This like stretching of this box. So some things can still remain connected and change and some of them can't an exhaustive list. I don't know, I stumble across new ones all the time. If it won't move, it can't. And if it does, it can OK? And this is gonna be my like uh month, month, year, year, this is going to be my CS V. All right. Um The other nice thing about using, well, the other thing I wanna throw into this course is commander control forward slash enter, get out of my columns. OK? Is if I select all of these, we've got our smart um selection, OK? And obviously I can go through and go actually, that needs to be there. That needs to be this. OK? What one thing that will cause some drama is, can you see I have these? So it's kind of working, right? I've got these spaces and I can adjust the spacing with it. But let's say that I go OK, I want to duplicate this one underneath, you know, like this one, I go come on d sticks it out to the side, it pushed my frame out as well. Can you see that to kind of compensate for it? So sometimes with these guys because they're doing weird stuff, I can group them or stick them in a frame. I'm gonna go command option G or control alt G on a PC just to stick them so that they're the kind of same sort of unit. Then it goes all right. I can deal with that, ok? And I can move them up and down now and I can click on them and duplicate them or make another one of these. Ok? And then drag it underneath. It happens a lot with forms. OK? You want these kind of half ones, one's long ones, stop somewhere, one stop somewhere else. I think that's all I want though. You go away. So you might finish. Then you're like did a form. It was just a text box with some text on top. OK? We're gonna take this a little bit further because now we want to add some of that um error messages and different kinds of versions of these boxes. So we're gonna start with our master component. Where is it? It's up here. OK? If you can't find it, how do you find it? Right? Click it. Main component. Go to me. There is there, let's even be more fancy. Let's cut it and put it on our components page cos we are awesome like that. OK? So what I want to do is where are you shift two? There we go. OK? So I want to have a couple of different variables. OK? So I'm gonna select on this and say you are a variant. Actually, I want four of them. So let's go. Boom, boom. OK. This first one is happily called default. Let's give me the name of this component. So a component, let's call this uh tick field or let's spell it right this time. OK? And the default one I think is fine. What we'll do is we'll have an active one. OK? You often have an active and error one and maybe a disabled one. There can be other versions, but let's go uh default, let's do a disabled one and I'm just gonna go through and say the difference between you was 90 right? you, you see what I did there. I just typed in it assumes you mean 90 90 90. Often these numbers will repeat, especially if you're using gray scale. So there's that I want that to be the same thing. 90. So that's my, let's click on this. Where is it there? That variant two? I don't want to be called variant two. I want it to be called disabled. OK? I don't need to add a description or documentation to this because it's pretty self explanatory. This one here is going to be my active. OK? And when it's kind of active and you're clicking in it, it's gonna do something fancy. It is going to make the text um back to black and maybe the outside line here is going to kind of indicate that it's being used. So I'm gonna use one of my styles. I'm not gonna use that accent color because I don't know it's too close to error. So I'm gonna use maybe that one. Do I make it a little bit bigger stroke up one. We can test and come back. OK. And the last one is going to be error. So we're gonna do lots of like red everywhere, red, red, red, even like a little fill of red fill. So it's cool what you can do with these variations. OK? You can build some really kinda complex things. Uh OK. And because we started with a component, we've added this afterwards. Let's go and have a little look at what happened. Are you ready for this? Can you think you might have to start again? OK. But because these were all using that original component and we expanded that component into a variant. We can now go actually you filled out your name wrong over here. The property actually, this one is, I didn't call it error, we call it variant for, but you get the idea, right? So maybe these one, this one doesn't have a variant. Where is it? It's because we remember group them inside of a frame. So I'm gonna go inside it and I can say you are like just disabled, you are disabled as well. You get the idea of kind of components. Awesome. Adding variants, extra special, nice. That is an ugly looking form. I need to break my column rules. That is an ugly looking form. Now forms on the fly. Uh I need to test it on my phone to see if it's big enough. I need to play around with the spacing. Ok? I need to go back to that original name. Things better. I don't know if I was doing something like this now. Ok. I would go and find another form that somebody else has made that looks like a form and trustworthy. Mind. Something about it doesn't look trustworthy. Have a look at it. What is it? I've done something wrong. OK. I probably look at what Mac and sorry, what Apple and Android do. Ok? To make their forms because I want to kind of match that I wanted people to feel safe clicking my button. I feel like mine isn't that safe? All right. So let's go back to my component and let's label that last one. Let's call it error. I don't know. What do you think of that? It's pretty nice when you kind of start stringing stuff together and you can see how easy that was. It feels like a big drummer making variables. At least I made it into a drama on the last videos. But actually you can kind of make variants halfway through. You don't have to be totally proactive. So that's gonna be fine for us. I want to show you kind of like somebody else's one. So I'm gonna look at where is this one? So I kind of looked at this earlier on. So look at this one. That is one of our ones of these. OK? Remember what that's called, what is it called? It's called a content frame component set. I totally forgot it myself. Um So that component set there is nice and friendly and easy. And this one here. Whoa. OK. So there is a bunch of different variables. Now, you can see I'm not gonna go through it entirely, but let's have a look at the assets panel and a nice thing about the assets panel. Here's the input field, look just a lonely old input field, all of that is in it. So let's have a look. So what they've done is you can see there's three different options, ones with icons one without icons, there's error message, like there's a group of error messages. There's a group of, oh, there's, I'm not even sure. OK. But over here, what they've done is they said state is the default active typing, filled out field, disabled field. We kind of did that. OK? But they've also added like an error message to it. OK? Is there an icon on the left? So they've done a lot more. But nicely if I got given that as a designer, I can use that and then toggle the switches and make it do what I want. And there's a bit more of AAA more complex variable. OK? And it is a multidimensional variable and when you're actually building them yourself, they actually don't feel as confusing. Ooh, that's what we need. Ok? I need that. Let's copy that. Let's go over here. This is exactly what's gonna make my uh it's gonna fix it all up you mobile. That's what they need super safe. Now, actually, it does brings a little trustworthiness to it. Alright. That is it a practical example of using components with variables to make a form? All right. That's it. Let's get on to the next video.