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.
Maddy Beard, Product Designer & Educator
