Hey friends. Today I wanna bring it back all
the way to the beginning and talk a little bit about components. So, this'll be really helpful for you
if you're just starting out in Figma, or if you just feel like you never really
grasped components, you kind of got thrown into Figma and no real introduction. This will be really helpful in
understanding why you use components, what even are they, and how to create them. So let's start out with a button and talk
about why we even need a component here. So components are really great if you're
gonna be using something over and over again because we're gonna be able to
create instances of this component. So something like a button that you're
gonna be using on multiple different screens, or maybe it's an icon that you're
using on multiple different screens. If you're gonna be using it more
than a couple of times, I'd suggest making a component out of it. So let's take our button right here. And if we look over on the panel on
the left side of our screen, we can see it's just a frame right now. And when we go up to this icon right
here that says Create component, it's this four little diamond icon. When we click on that, you can see it's
a component now because it now has that four little diamonds and it's purple. So if something is purple with this
diamond, that means it's a component, compared to if it's not a component, it's
not gonna be in purple with the diamonds. So we have our component here,
and let's make an instance of it. So there's a couple of different
ways to grab an instance. What I like to do, if my component is
right in front of me on the same page, I will hold down option as I drag. And now that's creating
an instance for me. And I can tell this is an instance
back over on our layers panel because it's a diamond, but it doesn't have
the four little diamonds within it. it's just an empty purple diamond here. So that's how I know it's an instance. The other way that you can grab an
instance is if you go to the assets panel, and once something is a component, you
can search for it in the assets panel. So if I search for button, now my button's
gonna appear and I can drag that out. The other way too, there's
a ton of different ways. If you wanted to go to shift I, that'll
bring up our components panel here. And I again, type in button
and it's right there. Perfect. So, couple different ways
to get your instance. Now. Why would we wanna have this as
a component in the first place? Let's again go back to reusing things. So the great thing about having this
button as a component is that what if one day somebody comes up to me and says,
hey, sick button, but it should be green. And I'm like, oh, cool. I can make it green from my component
level, so let's do it right here. And it changes all of the instances, as
opposed to if these weren't components, I would have to go into each individual
button and change the color from there. And the same thing goes for if I wanted
to change the text size and this doesn't have auto layout applied, which is
a whole nother thing, but that's why it's not resizing with the button. But you can see that the text
on here changed in all three of these instances as well. So, Anything that you
change on this button, even if I were to add like a
rectangle in here, it's now adding it to all my instances. And even if I go into one of these
instances and say, actually, I want this to be a red rectangle. This is the most beautiful
design I've ever made. And I want this to be an extra bold font What I can do here is now Go up into the panel in the right and
where it says the button drop down. That's how I know that's the
component that it's coming from. I can go right to these three
extra dots and I can say push all changes to main component. So I can take everything that
I've done on this instance and say, actually, I want these to all
happen again on my main component. So this is helpful if you end up
making a change on one of your instances and say actually that's
how I want everything to look. You can also make some changes
on your instance that won't affect everything else. So I can change this button to gray
and change this to, maybe I'll even just hide this in my layers panel. I'll hide this rectangle,
and make my text tiny again. I can have instances that are
a little bit different than my original component over here. Now going back into that side panel and
the instance options, if I decide this is not what I want my button to be. I want it back to everything that I
had before I can, instead of pushing all changes, what I can do here
is reset all changes and that'll reset me back to the beginning. Or if I only wanna reset specific things
like the fill and say there's a bunch of other changes that I've made on here,
but I don't want those to push through. I can select exactly which changes I
want to bring back from the original. So here, I'll reset fill, and my button
text will stay the same size and the red rectangle is still hidden again. So you can do lots of different
things with the instances. One more thing that you can do at
the instance is detach the instance. So if you decide, I don't want you
related to the original button at all, I wanna do my own thing with you, maybe
you're creating a whole new button and you want something to start off of. You can detach the instance. So you can do that right in
that side panel like I showed. So that was right up here. Detach instance. Or you can right click. And get detach instance right here. And the shortcut for
that is option shift B. So we do that or we can do option shift B. And again, now we're detached and this
has nothing to do with the original one. So this is really great if you
want to start a new button or just wanna try something out. Now once you're feeling super
confident with components, one thing that you could go into is variants. So if you want different
variations of the one component. So maybe it's a variation of buttons,
so maybe you have a primary button and a secondary button and hover states of all
those buttons, those are called variants. And I'll go into those a little
bit deeper in another video. But in order to understand variants,
you first have to understand components. So hopefully this breaks down
components a little bit for you. All right, see you soon.
