Hi, everyone in this video. We're going to look at a component. What is it? Why is it useful? The short version is you've got a master in an instance. This master can control all of his little Children. OK? Which are called instances. But the little Children can do stuff that's different. You can see it is green, it's got different text so we can create a master component. Do some little overrides, they all feel unique but when we make a change bold, they all go bold, super helpful. All right. Let's jump in and look at how to make a component. All right, let's talk components. What are components? They are reusable things. They've got loads of perks. Let's start with a nice, simple example. I've got this button here. It can be a rectangle. It can be, you can do anything into a component. I'm gonna use this button because I want to use it more than once because at the moment I have to go and find it and copy and paste it. So I'm gonna create it into what's called a master component. So ...

select on it. It's over here. It's called button now. Click on this button here. It says create component boom. What's changed? Very little. OK? Except the icon has changed, look undo redo. OK? So it's changed into this little thing. You'll see components everywhere and we'll start using them a little bit now and then we'll use them. You'll find yourself. Everything is a component. Why you say OK, it's because it adds to my assets panel, which is kind of helpful. So we've been doing exclusively with layers. Let's go to assets and have a look on our checkout page. There is a there's my little button there makes them easy to be reused. So down here, I'm like, actually I don't want this one. I want that button over here so I can click hold and drag it out. OK? This is considered an instance of my master component. My master is that original one here. This guy is the ruler of all instances. Let's say that I make this one and I, I don't want to delete these. They took me ages to drag out. OK? So I've got this one copy. OK? So I got three of them. These are instances from that original one. Why this is cool? Is this master here? If I amend this one, if I go inside of it, so I'm going to go back to my layers panel, double click it to go inside. OK? And what I'm looking to do is maybe change some stuff. Maybe I need to make it a different size. Oh Look, they're all connected. That is the power of having components. OK? The master and the instance or the parent and child, this is called the mas uh the main in early versions of fig A. So you'll hear me call it main quite a bit by accident. It's now called master. Same, same different name. Cool. So that is one perk, another perk is that you can actually do some variations on these. You can say actually this one here, I'm gonna change to this color. And the cool thing about it is I can make some slight amends to my instances. OK? Some variations on it. Watch this, it's still controlled. OK? So I can kind of make everything a little bit individual but control some of the bigger things like the sizes and the scale. OK? I can go into the font here and change it to be light. You see they all go light. You're like, oh that's cool. What if I need this button to say not purchase but delete. So instances can have some unique parts to them. OK? Color. I've changed the text but there's some parts that the master will control. It's pretty well implemented here in fig. Let's say that you got here and you're like actually I need to reset it back. OK? I wanna go back to be like the master. I can right? Click it and say let's go to reset all overrides. So overrides are what we're doing to these instances. Ok. We're overriding some of them. Like we made a pink fuchsia, call it pink. Ok. But you can reset it often. You'll lose control of like well placement with the hell is that master? Ok. I can right. Click it and say actually main component. Go to that one for me. Oh, there it is. That's the main one and now I can make my adjustments, ok? I need to get rid of that. Um round of corners, 00000. You can see they all come along with the right. But this one here actually I want this one to have some corners. 1010, 10, typing the wrong one. Hang on 10. Alright. So I've added around the corners so I have some overrides applied to this go on. So we'll cover a bit more and a bit. But basically everything becomes a component kind of like it's a frame you start with a frame or the frame goodness and then eventually becomes a component like this logo here. It'd be great. OK? It is a frame. I'm gonna turn it into a component. Why? Because I want this logo to go into my Essences panel, ok? And on the checkout page there it is there. OK? I can go to my new document. I'm like, ok, let's go to our pages. Let's open up my desktop and I'm like, I need that logo where could it be? And the assets there it is there. Oh Look at that. And in this case, I might not ever change it but I might OK? Means I can go back to that original. OK? And what will happen is watch this because I'm on a different page. I'm gonna see layers here. We're on a different page, right? I'm going to right click and say go back to my main component. OK? And it'll jump back to that mobile page that we've got back to that original. The other thing that I haven't mentioned is the master component looks like that. It's the four diamond shaped dark Philly things. And if I go back to my desktop version, can you see it's the same name, but it's got this single kind of not a diamond square on a side, but it's hollow. Those are instances. So you kind of know the other way to tell is let's have a look. Let's go back to our this mobile view. Now at the moment, we've got ours on a page. But if I drag it off into the no man's land, you'll see there's that icon again, you'll see that quite a bit. So that is my master and let's drag an instant. So before we drag an instance from here, OK, Kate doesn't have all that fancy stuff on it. OK? With the diamonds, you can actually just duplicate this and what you've done is you've not made two masters. OK? You actually made an instance, you can tell my LAS panel you see there just a little diamond original, the master, the main, the parent. And then the instance based off of that, you might end up with 100 instances and just one master. All right. So let's go through some more perks for components.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf

Exercise_Files_-_Figma_Essentials.zip

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

2,000+ classes ranging from fundamentals to advanced techniques.

What are Components in Figma?

What are Components in Figma?

Lesson Info

72. What are Components in Figma?

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

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

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma