Hey Gang. Uh this video, we're gonna talk about where you should keep your main components. OK? At the moment, we're just throwing them everywhere. OK? There is uh best practice. Let me show you how. So this is best practice. My best practice and a lot of other designers, best practice, you can pick your own way. So at the moment, our assets panel here isn't too bad, right? It's got local components and these ones here aren't on a frame. So they're just kind of hanging out here. Um You know, outside of stuff. This one here is on a frame, let's say I turn. So I want to use this thing. The best practice is all right, you're going to be a component. So I go command option K on a Mac and that is control alt K on a PC. And what you do is you leave the main over there and then you use an instance in this. So that guy is kind of separate just so that we can put our master on another page. Because if they end up on pages, let's do a few of them on pages. Let's copy that one over here, we'll tu...

rn this into our component. OK? This can get super messy. So what we like to do, we were speaking for all of the UX designers in the world is I want to grab this with my master. There is there. So this master here, I want to move it to a new page. Just keep everything on. OK? I can go to my pages here. There we are. I can say you are going to be a whole page dedicated to my com opponents. OK? I'm gonna put it towards the top so that if somebody else is using my file, they can find them all. They're just in one place, I can find them, they're all in one place and when we move them there. So let's go to our Hi Fi we can go right click, move to page components. That was one as well. Let's move him there as well. Components just keeps this tidy and once they're all there, you'll see that I've got this page called components and they're all just in here rather than kind of spread across this document. There's a few components on the desktop. Let's add a component here. Let's say that's a component. Command shift K. You can see assets kind of spread across a couple of pages. There might be 100 pages that you're working on. It's just nice to see, you know, I'm gonna leave a version of it there, but the master is gonna go to the components page. You can see everything's just in components, making it easy. Now, I gotta go back and move all of these on there. OK? There he is. You are now going to be moved to our components page. Now it doesn't jump to them. I wish you could click on them and let's just jump to them. It'll jump to the page that they're on. Um Hopefully there's a go to Master or show Master. Maybe I can't find it, but I get confused sometimes between XD and this XD has it. OK. Figment doesn't, I don't think leave in the notes if you do know how to jump to the master from here. OK. So where is that one? Don't know with something that looks like him. Is that the master? Yep. I'm right. Clicking to see whether they've got the Go to Master option. This is just me being silly and making a bunch of, ah ha I spotted him. OK. So you are also gonna go to that one so you can just tidy it up, just make sure that your components all on one page and that page doesn't need a frame. Let's have a look at it. This ends up looking like I'm gonna go shift one. OK. At the moment, it's got stuff everywhere. We're gonna tidy it up. When we get a little bit later on, we'll do a kind of a design spec kind of design system page, but they can just hang out by themselves like this. You can make all the kind of pop up models all together. You can make all the maybe cards together, all the different logos together, stretched out looking nice. Now, if you don't want to be that nice or that organized, you can just use the search. OK? So if you're naming at least naming them something, you can go into your messy assets folder and actually just search for it and just type in uh logo, OK? And it will just cut it down to those ones that might be enough for you. You can switch it to list mode, just make sure you clear that it kind of hangs around the assets that search, ok? You can work for quite a while and actually go another little trick. I'm not sure if you can always do this. But if you just put in a space like you're searching for everything and just kind of list them out nicely, it doesn't matter if it's list view or that view instead of trying to break, break them into the different um frames, OK? But if I put a space bar in there, that seems to work, it doesn't feel very official though. So that might disappear or become a sweet button that you can click. So that is a way of doing it. If you just have yours scattered across your document, that's OK too. OK? It can be everywhere and you just use the search but you will find as soon as you get past one document, maybe a couple of documents starting sharing with somebody else. You're gonna have to start being a little bit more careful with a your naming and where you keep your kind of main components. All hope that was helpful. That was a messy video. Alright enough of that, let's get on to the next video.

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.

Where Should You Keep Your Main Components In Figma

Where Should You Keep Your Main Components In Figma

Lesson Info

75. Where Should You Keep Your Main 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