How To Make A Form Using Variants In Figma
Daniel Walter Scott
Lesson Info
82. How To Make A Form Using Variants In Figma
Lessons
Introduction to Figma Essentials
02:53 2Getting Started with Figma Training
03:06 3What Is Figma For & Does It Do The Coding?
03:46 4What's The Difference Between UI And UX In Figma
05:22 5What We Are Making In This Figma Course
09:18 6Class Project 01 - Create Your Own Brief
04:01 7What is Lo Fi Wireframe vs High Fidelity in Figma?
02:34 8Creating Our Design File & Introducing Frames In Figma
08:29The Basics Of Type & Fonts In Figma
10:51 10Rectangles, Circles, Buttons And Rounded Corners In Figma
06:50 11How To Use Color In Figma
05:45 12Strokes Plus Updating Color Defaults In Figma
09:28 13Object Editing And How To Escape In Figma
01:47 14Scale vs Selection Tool in Figma
02:39 15Frames vs Groups in Figma
09:24 16Class Project 02 - Wireframe
03:00 17Where To Get Free Icons For Figma
09:10 18Matching The Stroke Of Our Icons
05:16 19How To Use Plugins In Figma For Icons
04:31 20Class Project 03 - Icons
03:48 21How to Use Pages in Figma
08:31 22How to Prototype in Figma
10:46 23Prototype Animation and Easing In Figma
10:53 24Testing On Your Phone with Figma Mirror
05:40 25Class Project 04 - Testing On Your Phone
03:51 26What is Smart Animation & Delays in Figma?
08:44 27Class Project 05 - My First Animation
02:01 28Sharing & Commenting on a Figma File with Stakeholders
07:10 29Sharing & Editing With Other Ux Designers In Figma
06:58 30How I Get Inspiration For Ux Projects
06:39 31How To Create A Mood Board In Figma
05:33 32Class Project 06 - Moodboard
01:26 33How to Work with Columns & Grids in Figma
13:54 34Tips, Tricks, Preferences, and Weirdness in Figma
07:21 35Color Inspiration & The Eyedropper In Figma
06:34 36How To Create A Color Palette In Figma
09:02 37How to Make Gradients in Figma
07:09 38How to Create & Use Color Styles in Figma
08:01 39Class Project 07 - Colors & Columns
04:00 40Fonts on Desktop vs in Browser in Figma
01:30 41What Fonts Can I Use? Plus Font Pairing In Figma
06:01 42What Common Font Sizes Should I Choose In Web Design?
11:30 43How to Make Character Styles in Figma
06:36 44Lorem Ipsum & Placeholder Text In Figma
04:28 45Useful Things To Know About Text In Figma
09:35 46How To Fix Missing Fonts In Figma
02:42 47Class Project 08 - Text
05:19 48Drawing Tips And Tricks In Figma
09:38 49Squircle Buttons with ios Rounded Courses In Figma
02:48 50Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma
07:25 51What Is The Difference? Union vs Flatten In Figma
03:36 52Class Project 09 - Making Stuff
03:29 53Smart Selection & Tidy Up in Figma
08:40 54Do I Need To Know Illustrator With Figma?
04:15 55Tips & Tricks For Using Images In Figma
06:11 56Masking & Cropping Images In Figma
09:12 57Free Images & Plugins For Figma
02:31 58Do You Need Photoshop For Ux Design In Figma?
10:40 59Class Project 10 - Images
01:17 60What Is Autolayout & Expanding Buttons In Figma?
10:27 61Class Project 11 - Buttons
01:15 62Auto Layout For Spacing
05:47 63How To Use Constraints In Figma
08:22 64Combining Nested Frames Auto Layout & Constraints in Figma
11:54 65Adding Text Box Autoheight to Autolayout in Figma
08:27 66Class Project 12 - Responsive Design
02:19 67Nice Drop Shadow & Inner Drop Shadow Effects In Figma
05:56 68Blur Layer, Background Blur & Image Blur in Figma
05:57 69How to Make Neumorphic UI buttons in Figma
07:37 70Class Project 13 - Effects
01:53 71How To Save Locally & Save History In Figma
05:42 72What are Components in Figma?
06:19 73Updating, Changing & Resetting Your Components
07:47 74You Can’t Kill Main Components In Figma
07:22 75Where Should You Keep Your Main Components In Figma
05:02 76Intro To The Forward Slash / Naming Convention In Figma
08:55 77Class Project 14 - Components
00:44 78How To Make Component Variants In Figma
06:41 79Another Way To Make Variables In Figma
06:14 80How to Make a Multi Dimensional Variant in Figma
11:13 81Class Project 15 - Variants
01:41 82How To Make A Form Using Variants In Figma
12:52 83Class Project 16 - Form
01:27 84Putting It All Together In A Desktop Example
19:44 85How To Add A Popup Overlay Modal In Figma
03:03 86How To Make & Prototype A Tool Tip In Figma
07:26 87What are Flows in Figma?
05:39 88Slide In Mobile Nav Menu Overlay In Figma
03:55 89Class Project 17 - Prototyping
01:10 90How To Pin Navigation To The Top In Figma
10:17 91How To Make A Horizontal Scrolling Swipe In Figma
06:36 92Automatic Scroll Down The Page To Anchor Point In Figma
04:50 93What are Teams vs Projects vs Files in Figma?
05:18 94How Do You Use Team Libraries In Figma
11:03 95The Difference Between Animation & Micro Interactions
02:55 96Animation With Custom Easing In Figma
25:36 97Class Project 18 - My Second Animation
01:54 98How To Make Animated Transitions In Figma
12:34 99Class Project 19 - Page Transition
01:31 100Micro Interactions Using Interactive Components In Figma
05:54 101Micro Interaction Toggle Switch In Figma
04:23 102Micro Interaction Burger Menu Turned Into A Cross In Figma
04:23 103Class Project 20 - Micro Interaction
01:35 104How To Change The Thumbnail For Figma Files
04:10 105How To Export Images Out Of Figma
07:40 106How To Share Your Document With Clients & Stakeholders
07:09 107Talking To Your Developer Early In The Figma Design Process
03:55 108Sharing Figma With Developers & Engineers Handoff
06:07 109What Are The Next Level Handoffs Aka Design Systems
03:18 110Class Project 21 - Finish your design
04:57 111What Next?
06:08Lesson 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.
Class Materials
Ratings and Reviews
Mahyar Hassid
Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!