Skip to main content

How To Make A Form Using Variants In Figma

Lesson 82 from: Figma UI UX Design Essentials

Daniel Walter Scott

How To Make A Form Using Variants In Figma

Lesson 82 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

82. How To Make A Form Using Variants In Figma

<b>In this lesson we will create a form using variants in Figma. We will use what we've learned on variables to create this form.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

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.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES