UI/UX Design: 6 Tips for Streamlining Components in Figma | Maddy Beard | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

UI/UX Design: 6 Tips for Streamlining Components in Figma

teacher avatar Maddy Beard, Product Designer & Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      1:52

    • 2.

      Creating a Component

      9:30

    • 3.

      Setting Up Component Properties

      4:34

    • 4.

      Making Components Responsive

      3:39

    • 5.

      Creating Variants for Components

      11:23

    • 6.

      Making Components Interactive

      2:04

    • 7.

      Building with Teamwork in Mind

      4:20

    • 8.

      Final Thoughts

      0:28

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,082

Students

11

Projects

About This Class

Harness the power of components in Figma with product designer, Maddy Beard! 

As a UI/UX designer, you know that components are the building blocks of your design projects. Understanding how to use components to your advantage can increase your confidence in Figma and improve efficiency for your team. Join Maddy as she walks you through the six tips for leveling up your use of components in Figma. 

Together with Maddy, you will:

  • Learn how to create a component the right way 
  • Set up component properties
  • Make components responsive 
  • Create variants for your components 
  • Make components interactive 
  • Build components with teamwork in mind 

Whether you’re new to product design or a seasoned UI/UX designer, this class will provide you with the tools to optimize your use of components in Figma.  

______

Maddy’s class is designed for UI/UX designers, but all students are welcome to participate and enjoy.

Meet Your Teacher

Teacher Profile Image

Maddy Beard

Product Designer & Educator

Teacher

I'm Maddy Beard, a product designer & content creator based in Denver, Colorado.

You can also find me on YouTube, Instagram, and my Newsletter. 

See full profile

Related Skills

Figma Design UI/UX Design
Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: The first few months I used Figma, I was using components all wrong. It wasn't until I dove in and learned more about the power of components that I really started to see my confidence in speed and Figma take a turn for the better. As UI/UX and product designer is, components are the building blocks for all of our projects. Starting strong is essential if we're going to produce quality work. [MUSIC] I'm Maddie Beard, and I'm a UI/UX designer based in Denver, Colorado. I've been working professionally as a designer since 2017 for tech companies big and small, as well as for myself as a freelancer and entrepreneur. In this class, we're going to be talking about six ways to get the most out of components in Figma. We'll create a few components from scratch the right way, set up the component's properties, make them responsive, give them a few necessary variants, and finally, make them interactive. Then to wrap up, we'll talk through some tips for building components with teamwork and collaboration in mind. I hope you walk away from this class, not just with a deeper understanding of components, but also with some real skills and practice under your belt. This class is for any designer who's new to Figma, components, or working on a team, or maybe you've been working with components for a while but terms like variants, boolean properties, and auto-layout just made your eyes glaze over. Once you've finished these six lessons, you'll be using those functionalities and more to make your components consistent, flexible, and save you and your team tons of time. I would highly encourage you to do these exercises along with me and even share them with your team if you'd like. You will soon have everything you need to apply these lessons to your own work at your company. 2. Creating a Component: First, let's learn how to create a few components the right way. Set yourself up for long-term success by following these five tips when creating components of your own. The first tip is just to think of components like templates. Each instance of a component is basically, each time you're using that template. Changes you make to the component will trickle down and change individual instances. But if you make a change on the instance level, it will not affect the main component or any other instances of the component. Tip number 2, whenever possible, use frames instead of rectangles. Three, leverage auto-layout. Four, always pay attention to alignment. Five, try to follow a pixel grid system. At my last company, we used an eight pixel grid system, but whatever your team uses is perfectly fine as long as all of the designers are being consistent. Now, let's look at how these tips come into play with some real components. I'm going to start by creating a really simple component, a button. So I'm just going to hit F on my keyboard, which is the shortcut to toggle to this frame tool. So I'm just creating a frame. We're going to create one that is 44 pixels high by, let's just say 100 pixels wide for our button. Like I said in tip number 2, it's important to just use frames as rectangles instead of adding additional layers. So for example, instead of adding a blue rectangle on top of this frame, I'm just going to give this frame a background color of blue. This way, I'm dealing with less layers and this will really come in handy when it comes to auto layout. Now, let's add the text, so I'm just hitting T as a shortcut button. Now I'm selecting on this frame again and I'm just going to give it a corner radius of four, nice and subtle. At any point, we can make this into a component by selecting on the frame and hitting Option Command K. You can also do this by going up to Object and then down to make a component. So now that this is a component, let's just rename it. Now, let's get into auto-layout. The reason that we use auto layout is so that different instances of this component, while they may appear at different sizes, the text should always be centered. As it is now, the text is not centered. So let's select on the whole frame and hit auto layout. By default, it's going to pin the child, which in this case is the text inside of the whole frame, it's going to pin it to the top left with some padding. So as you can see, we have 23 pixels of padding on either side and 12 on the top and bottom. But what we want is to make sure that it's going to be pinned to the center. So I'm just going to hit that icon there. Then, I think 12 pixels is good for the top and bottom, but let's make it 24 for the right and left. Like I said, using multiples of eight and even four is really helpful when it comes to maintaining consistency across your layouts. So now, what happens when we resize this button? You can see the text stays in the middle. That is exactly what we want. Now let's create a different component. Let's do a card. So I'm hitting F again on my keyboard. Let's just make this 200 by 200 just for now. I'm going to rename this card Option Command K. I'm going to do R for rectangle and put an image inside here that takes up the first top half of this vertical height. So in order to use this as a mask, I'm just going into fill instead of solid, I'm going to hit Image, and then I'll just choose an image. I have this pizza here on my desktop. So we have this, now let's add the other elements we'll need. Let's do some text. So maybe this will be a title and then a description. This should be much smaller. We want to align this to the left and we'll do the same with the title. Now that we have all of the elements we're going to need here, I'm going to turn on auto layout. So things got a little funky, but that's okay. Let's figure out why this happened and how we can make it exactly how we want it to function as a template for the rest of our projects. So you can see that when I did auto-layout, automatically, it's going to position the children, which is the individual elements within a frame. It's going to position them vertically and centered in the middle and pinned to the top. That's exactly what's happening here. This text is aligned left, but the text box itself is aligned to the center of the frame. So now, what I want to do is actually group these together in a frame. I'm just going to hit frame selection, and we can actually turn on auto layout for this frame inside of the frame. So I'm going to align these to the top left. We really only need like maybe four pixels in-between these guys. Instead of hugging the text, what I want it to do is actually fill the container. Vertically, we do want it to hug the contents. So, that's good. Then when we click on this mainframe here, we can see that there's eight pixels of space in here. Let's make that 12. Now, let's just check out what happens when we expand this. See, we're getting space on either side. So instead of having a fixed width for this image, I'm going to say that the image should fill the container. We'll keep the height fixed. Now, when we expand it, you can see that it fills the whole container. Let's add a little bit of padding. We want to add it to this element because we don't want it to apply to the image as well. So let's just add 12 pixels on each side and 12 pixels to the bottom. It's looking good. Now, let's give the whole thing a corner radius, maybe 16. Now we're going to have to come in with this image that's overlaid and add that in separately. This is looking good. We'll give it a shadow just for fun. I'm going to make that shadow a little bit more subtle. I like to use eight percent. Looking good. With these two components, we're already doing tip number 1. We're thinking of them as templates, so we're paying really close attention to what's going to happen if, for instance, we keep writing in this description until it goes on to the next line. That's looking perfect. So check, we're thinking about the template. Number 2, we're using frames when possible instead of rectangles. Number 3, we've mastered auto layout with both of these. Number 4, we've made sure that everything is aligned correctly. Number 5, when possible, we've used padding and dimensions that fall within an eight pixel grid. One way to check that our components are flexible and that we've done everything we need to do to set it up for success is to drag out a copy of it or an instance and use it like you would use it in a project. So for example, what if we had a really long title here. So as you can see, this really long title stretched this component out to be really wide. I don't think that's necessarily what we want. So let's come back to this main component and change this into a fixed-width element. So now, we have this fixed width, we definitely need to align that to the left. Now let's see what happens whenever we change the title to something longer. There we go. So now that this is a fixed width, it's going to push it down as opposed to pushing it to the right. So now, we can go over here. Since this is the main component, the changes trickle down to our instance. Now we can see that this is exactly how we would want it. So I'm going to give this component an A plus and say that we can move on to the next lesson. So now it's your turn. Go ahead, choose one or both of these components and create them yourself. Make sure to tick off all five boxes for the tips that I shared in this lesson. I'll see you in the next one. 3. Setting Up Component Properties: Now that you have a component or two to work with, let's set up some properties so that we can make it even more flexible to be able to be used across your projects. In this lesson, we'll do that through three different properties. Boolean, which is a true-false, on-off property, instance swap, and text. So let's see how those come into play with these two components we already created. Let's start with Boolean properties. Think of that like creating an on-off switch. I think a good place to do that is inside this button. So I'm just going to place an icon in here and now let's figure out how to turn this icon off and on. Because sometimes when you're using this button, you may want an icon and other times you may not. So to be able to use one component in just different instances of that component, instead of creating two separate components, is going to save you tons of time. Especially when you see how easy this is. So what I'm going to do is come in and select on this icon. Across from layer, we have this icon here. It says apply Boolean property. So I'm going to click that and it's showing me automatically the name of this property by default is show icon. So that sounds good to me, and so I'm going to create that. Now if we drag this out to see another instance of this component, just like that, we have a toggle where the target of the toggle is that icon. Figma is just smart enough to know that we want to turn that off and on with a Boolean property. So that's really easy. Now let's go a step further. What if we want to change this icon to something else? Well, I have created a couple of variants of this component over here, and we'll get much deeper into variants in Lesson 4. But for now, don't worry about how I created this, let's just think about how we're going to use it. So I have one component here, this is the main component and it has several variants. So I have the download variant, which is the default, a share variant, and a save variant. So Figma is smart enough to know that since those are grouped together within a component, we may want to swap between them. So now again, if I come in and click on this icon in here, I'm going to see this icon here, apply instance swap property. So I'll click that, we'll name it instance, and that looks good. So now, whenever I drag out an instance and I double-click in to this icon here, we can come over and switch this out for all of the instances of that icon component. Now, the last one, let's talk about text. So If I want someone to be able to come into my Figma file and change the text without touching the component itself, what we can do is select on the text. Then down here, we can click on this icon here and create a property out of that. So now, again, we'll drag out an instance, and instead of typing the text in here, I can actually just select the instance, and then come over to this Properties panel, and type in some text instead. So maybe we want it to say download. Then it just automatically will update this component without even having to touch it. The same thing works with something like this. Let's say that we want to be able to change the title and description. We'll just hit that button or name this one title, we'll name this one description. Now, if we have an instance of this components somewhere, without having to touch this component, we'll just click on it and come over here. Here is the title, this is a description. As you can see, it will pay attention to all of the auto layout properties that we set earlier as well. So this just makes things so much easier and faster for you and your team. Go ahead and play around with these properties with the components that you created and feel free to get creative with it and make something new and test the boundaries of the Boolean and the instance swap and the text properties. 4. Making Components Responsive: It's important to keep in mind that you and your team might be using these components across multiple different screen sizes. So making them responsive is super helpful and time-saving. We talked about that a bit in Lesson 1. But let's do another example here with a navbar. Let's start out with a navbar that is optimized for an iPad mini, and see if we can make it responsive for a desktop screen. So I'm going to hit "F" for frame and create something that is 774 pixels wide, and let's go with 60 pixels tall. I'm going to give this a nice background color. We'll grab a fake logo that I made and put that in there. Then let's do some menu items. So if this is a cafe, we might want menu, hours, and contact. Now, just like before, we want to make this into a component, option "Command K", I'll name it nav. Then let's turn on auto layout right off the bat so that we can see what we're working with. So by default, it's going to hug all of our content. So let's group these together in a frame so that we can put on auto layout and let's say we want 24 pixels between each of these. Then it definitely looks like these are hugging more towards the bottom, so let's make sure that we can center align this. So now we have the parent frame, which is the component as a whole and two different children. So let's see what happens when we try to make this bigger. That's definitely not what we want. So what I'm going to do is select this frame and come over and hit these three dots, and instead of packed, we're going to change this to space between. You can see that's more in line with what we wanted. We can then go in and change the padding on the side, maybe 24 would work for that. Then this is looking a little big, so I'm just going to come in and make it a bit smaller. But when I made that smaller, it looks like it changed the height. So I want to make sure that my height is always 60 pixels, so let's say fixed for that. So this is looking good. So now, let's test it out. I have these frames over here, one for an iPad Pro and one for a MacBook Pro, 16 inch. So what I'm going to do is copy and paste these over and we're just going to position them. So first, for our iPad, and then for our desktop. So as you can see that worked really well, and you might be wondering what would you do if you wanted to create one of these for an iPhone screen? Well, what we might want to do is make this into a hamburger menu, and that would actually have to be a separate variant. So let's talk about variance in the next lesson. But before that, try to get in some practice with making a responsive component. You can make something that's responsive from an iPhone to iPad or iPhone to desktop or iPad to desktop. Whatever you would like, and if you get stuck feel free to just do what I did and create this same navbar. 5. Creating Variants for Components: Sometimes properties and auto-layout aren't quite enough to make your components flexible enough to be used across the whole project or design system. That's where variants come into play. They can save tons of time and effort when it comes to designing out screens using your components. In this lesson, we'll create variants for different states of a button, fields, and icons that you can use and swap out interchangeably. Let's start with this button that we already created. So I'm just going to click on the frame as a whole. Then we'll come over here to properties and hit the ''Plus'' button and we'll create a new variant. So then I'll click the Plus button down here to create a new one. So this automatically is going to be labeled default. Now let's edit this property and give it a name. We'll call it state. Default is good here. Now what do we want this state to be? I think we'll start with hover. So let's make the hover state just a bit darker of a blue. I am just going to Command click to get down to that frame layer behind the text in the icon. I'll go into here and just drag this down until I think that it is dark enough. Just a little bit, it doesn't have to be too drastic. So now this is the hover state and let's create one more. Maybe we have a state that is disabled. Instead of this blue, let's take a color gray like this so that it's clearly disabled and you can't use it. I think this is good, so that's easy enough. Now, let's do that same thing with a field. First, let's create this field together. I'm going to press F for frame. Let's see, we definitely want this to be 44 pixels high, the field itself, and the length doesn't matter at the moment. Let's label it field and make it a component. Now what we want to do is actually have this background not exist because what we want is to have a field label. So that can be pretty small. We'll just position it in the top right. Then we want another frame within this frame to be the actual field, and this will have a fill. For now, we'll just make it white. This is what we want to be 44 pixels high. Then we want to make sure that all of that is within frame. Now let's do auto layout and just play with these a little bit. We have this label. I think we want to make this label actually a bit bigger, 12 is usually good for labels. Now by default, it has four pixels between it, or five pixels between it. Let's make it four. Let's just round these corners a bit. This is looking really good. Now let's put some text in the field. Sample text. We'll make this a bit bigger. I think we want to make this at least 14, and we'll make it regular weight. Let's align it to the left. Let's make sure this is aligned to the left as well and let's frame these together so that way we can put on auto layout. I think that we want to fix the width and just make sure we have, I think we can have less padding. Let's do eight pixels and then 16 on the top and bottom. Let's make sure that we center the text within there. This is looking good. Now we're going to definitely need multiple variants for this. I'm just going to add a property, add a variant. We'll make this our default. We'll call it the property default state. Then let's call this field. Now that I'm thinking about it, I think that the default state before someone starts typing anything in, this should look more like sample text. Let's go in and make this gray. That will do for now. Now, this text is actually the filled text. Now we have two different variants and let's do one more. Maybe if someone hovers over this, there should be a stroke on this filled here to call your attention to it. We'll just add a stroke. Let's make it a little bit more subtle. That should be good. One pixel is good. This is looking really good. Now what we have is three different variants. But this one that we created, the state we would give is hover. But the problem is someone could have hover over a field that's already filled and a field that is not yet filled. We actually want to make these into two different properties. I'm going to get rid of this for now. What I'll do is add another variant. Then just visually, I like to line them up a bit differently when it's a different property so that I can visually see what I'm working with here. Now we have this one, and let's copy this one over as well. Now in this left column, we have ones that are default. Now we need to add a whole other variant. [NOISE] Instead of having this one called state, let's call this hover. Now hover is going to be yes with these two and no with these two. Then for these two, we'll give it that same stroke that we did earlier. Let's make sure that we fill out the state for this as well. This is default. This should be filled. Now we have this component with four total variants and two properties. Now let's see what happens when we go to use it. I'm just going to paste this over here. Now, since we had a yes, no value as one of our properties, it's actually automatically turned this into a Boolean, which means that we can toggle it off and on, much like the icon in the button in a previous lesson, that makes it easier. Then we can also switch back and forth from default text to filled text. Now you can see how this is working. You can have as many variants as you want with the component. You can get very granular with it. This is just a super simple example of how to use variants with a field. Now, let's go into these icons that I was showing you earlier. I'm going to make them black just so that they're easier to see for now. To show you how I did this, I'm just going to add another one. We're going to use the Plus button, and that's just going to add one that by default looks like this very first one. I'm just going to double-click in here and delete that. But we still have this frame here. I am just going to grab one of these other icons. I just hit Command C to copy. Now I'm going to select on this frame and Command V to paste. Then I'll just resize it so that it sits nicely within this frame like the rest of them do. That's looking good. Now, we just need to give it a name. Type, we're going to call this edit. That's all you have to do in order to create this set of icons. If you have icons that might be different sizes within your design system, you can absolutely have two different icon main components. One small and one big or big, medium, and small, whatever works for you. I just want to show you quickly how I actually made these. I'm just hitting T for text. I have a typeface called Font Awesome 5 Pro. If I just start typing, I'm going to type pause, then there's a pause icon for this. I'm going to do the solid version. Then all I do is Control click flatten. That's how I created these icons. Let's create just a couple more here. Adding a variant, double-clicking in, deleting, copy and paste, resize. You can even center it nicely within this frame. That's looking good. Now we have five different variants of this icon. You can use it across your project in any components or layouts that have this icon. That just makes it so much easier to swap in and out. Let's see that in action. Now I'm going to grab an instance of this component and just see how flexible we can get with this. If we select it, we can change the state. Maybe we change it to hover. We can tap in onto the icon and change it to any of these that we created. Edit. Then we can even go back here and change the text without even touching the component. To practice this, grab one of your components and build out a couple of variants. If you're stuck, a great place to start is with those buttons states. Just like I did, create a default state, a hover state, and a disabled state. Then feel free to screenshot that and share it in the discussion section. 6. Making Components Interactive: Making your components interactive is definitely more of an extra thing that you can do if you have time or really want to get into prototyping. But that said if you work on a team who does a lot of prototyping, whether it be for testing or presenting to non-designers, then this can definitely save you a lot of time. Think of it like prototyping on the component or template level as opposed to the instance level. For example, any screen that has an instance of this main button component is going to adopt that behavior change on hover. Let's see this in action. Now, how do you actually make this happen? Well, it's super easy. We're just going to hone in on these two states of the button. What I'm going to do is click on this one and go over to prototype. Once I do that, then I am going to see this plus sign here when I roll over it. I'm going to click and drag. I'm going to drag this arrow to the hover state. Then here, instead of on tap, we're going to do while hovering and it'll change to this hover state. That's easy enough. Then, we'll get out of prototype mode and to design mode. I'm going to copy this component. Just to show this in action, I'm going to paste it into this component here. Then I'll click on this whole iPhone frame and hit the play button up here. Once it loads, you'll be able to see a preview of the screen and I'm going to go over. As you can see on hover, this instance of that component is changing from that lighter blue to the darker blue. There's so much you can do with these types of interactions. This is just the absolute simplest one but it's the one that I find I use the most often. Go ahead and try this out and then get creative with it. Come up with your own interaction and create a few instances of it and test them out with the preview player. 7. Building with Teamwork in Mind: Before we wrap up this class, I want to share some of my tips for building with teamwork in mind. If you are creating components to use across your team, whether your team is two designers or 50 designers, these steps will help the process go smoothly. Number 1, use consistent naming conventions for your components. This doesn't matter if you just have a few components like we do right now, but when you start to develop a whole design system, you're going to have many, many more components, many variants, and even different versions of components. What I like to do is actually break those out into different pages and start to create a file that is your design system. We won't go deep into that in this class because design systems are a whole other beast that I can make an entire class about. But starting early with naming conventions can really help you out. For example, let's say that we have two versions of this card component. Maybe we have one with an image and maybe we have one with icons. Then you can name those accordingly. You could say Card/Image and Card/Icons. This will just really help whenever people are using these components and dragging them from the Asset panel in Figma. Going back to our other example, we could also say Nav/Mobile versus Nav/Desktop, or Icons/Large, Icons/Small. You can even get more specifics, Icons/12 for 12 pixels versus Icon/24 for 24 pixels. I've also seen it done that way. Number 2, naming your layers within a component. Whenever I'm creating components, I don't worry too much about how messy it is. But then I'll go back once I'm happy with how a component is functioning, I'm testing it out across various screen sizes, then I'm happy with it. At that point, will I go back and start to name my layers and really organize things. A lot of times, I'll be framing elements within different frames. It turns into a frame inside a frame inside a frame inside a frame. Labeling all of those different frames is really helpful if someone ever has to come in and tweak this component. Number 3 is thinking about the kind of text labels that you're using when you are using sample text. This is hard to describe abstractly. Let's take a look at this field example. For all of these, we've used the word label as the field label, but for the text inside, we're using sample text versus filled text. That will really help with developers too, instead of just having Lorem ipsum in there, it actually is describing to them this is what the filled text should look like, it's black, versus this is what the sample text should look like, which is gray. I've done the same thing in the card component. I've named the title Title, and then the description I have in there. This is a description and sometimes I'll even put something, it can go onto two lines before truncating or something. I'll use that as a guide for my developers. All that said, the point is to try to use text in your components to your advantage, and that will just provide clarity for everyone involved. Number 4, I already shared this in several of the lessons, but use auto layout. I can't tell you how many times I've gone to use a component and been so frustrated because the second that I'm using it in a real project, it's just not flexible enough for me to use and so I have to adjust it, and all the while it would be so much faster to adjust it on the component level so that the work isn't doubled, tripled, or quadrupled with all the designers on your team. Those are my four tips for building with teamwork in mind. Feel free to reflect on these and share some of your favorite ones with your team. 8. Final Thoughts: Congratulations on making it all the way through this class. I really hope that bit by bit, these lessons helped you feel more comfortable creating components in Figma. I highly encourage you to keep practicing and sharing what you're learning with your team. You can also feel free to leave any questions that came up in the discussion section below and I'll make sure to answer them. Thanks so much for spending time with me today and I'll see you guys in my next class or over on my YouTube channel. Bye.