Hey, everyone, and welcome back.
So I want to talk about components now, components are very important to every design system and one
of the most important component that we create our buttons.
Now, as you can tell over here.
I have two different types of buttons, I typically have my button that is a Guro base button and a
button that is a fixed based button.
Now, what does that mean now?
A button that grows is a button that grows with the content within.
I'll show you what that looks like.
I'm going to create just an instance of that component.
And if I start typing in here, hello, this button Rose, you'll see that the button grows with the
content if I remove these icons.
Now the button shrinks, so that is a growing button, a fixed button is exactly the opposite.
So let's take that component and bring it up over here.
Now, if I were to say this button is fixed, you'll see that.
It is indeed fixed, but I can stretch out this component and I can make it full with there are a couple
of times where we will do this within our application, where we will have buttons that span 100 percent
with from left to right.
This is where you would use something like that.
Now, you may be asking me, Daniel, what is Bass, what is that?
Now I've created this thing called Bass.
Because when you create your initial component, it's not going to be like.
Like this, it won't be like beautiful, like it won't have any styles, there won't be variants of
it, you'll have to create a version where this is just your base version.
Everything else is based off of this if I modify this in any way.
Like, say, if I.
Expanded every other variant.
That is a gross variant on the left hand side here, you'll see.
Will actually expand.
Or if I change the border radius like I just did.
So it's very important you create like a base that you can base everything off of, that's exactly what
it is.
If I put a period in front of it, it will hide it from my component list.
But you do need a paid account.
So another thing is you do need a paid account for your design system if you want to use it across other
files.
Trust me, it is very much worth it if you are using a paid account like with your company, that works
fine as well.
That's perfect to have like those libraries.
But if you're using it just for yourself and you want to use a design system and use it for like a project
or a bunch of different other files, you're going to need to have a paid account for that.
And I'll show you what that looks like in a second.
But this is what I've done.
I've created these different regular fixed and a regular Growe button.
Now, the reason why I've named them regular is just because I think this is regular size.
If I wanted to create a variance which is smaller, I can create another base button or I can create
another component based off of this instance totally up to you.
I don't use the smaller buttons enough for me to do that.
I may use them, I may create another version.
So let's go into how I've gone ahead and actually taking these buttons and turn them into different
variants.
So I have a primary.
I have a secondary and tertiary.
So let's get right into it, if I have a button here, you'll see this is my primary button.
But if I look within this structure, there's my regular grow and everything else.
Now, all I've done here is I'll show you exactly what I've done, so I've taken this button.
I'm going to just duplicate right here.
And let's say I need this default.
The only problem with real buttons is if you see this this little container here, you're just going
to have to this frame.
You're going to have to just bring it to the edge to properly size it.
So if I was going to create a default button like that where I can reuse within my application, I'm
going to do that, I'm going to change colors.
So I'm going to use like my primary yellow.
Remember what I said about colors?
So if my UI is white, I want to change it like a UI, which is like a gray area.
My text will be text gray as well.
And there you go.
I kind of have my button.
I can even go into other styles.
So I have some styles in here around different like shadows.
So I have a default shadow.
And there you go, I have my primary button looks exactly like that, and all I would need to do is
I'm not going to change this this instance.
I'm actually going to create another frame around it.
So option command G and I have another frame, and I'm going to rename this super cool.
But in the end, I'm going to just create that as a component option command K or you can go into your
toolbox if I reverse that command.
So I have my ability to just go like that.
And that's a component.
Now, if I go into my assets and I go into my buttons.
I will see my supercool button up there.
I mean, it's not in a nice folder, you'll notice just how we have our base buttons here.
We have our primary buttons and that's based off of the frames they're in.
That's how I separate them.
So that way I can easily access components not necessarily based off of their naming convention, but
based off of the frames that they're located in.
And that's just the best practice I find for creating components, separate them by frame so they're
easily accessible when you need to grab them.
So I have all my Growe versions for primary buttons, almost like fixed versions for secondary and so
on.
And so this is my supercool component button that I can just reuse and reuse.
And, you know, in this instance, if I were to create.
Let's delete one of them.
If I were to create an active version, let's see what I've done here for Active.
So all I've done basically is I've made the pass through 80 percent.
So that way it looks like it's you know, when you're clicking it just like a nice hover state in a
way.
But there it's very much different from that first date.
So I'll just go ahead and I will set up to 80 percent.
There is a variance there.
And I can even go ahead and go right in there and set that to the active shadow, which is maybe just
a little bit later.
So it looks like it's a press down.
I press down about it.
And let's go into our later section and you'll see this is very much an instance.
You'll see that supercool button over here.
You'll see my other supercool button.
But over here, what I'm going to do is I'm actually going to detach this instance.
I'm not going to detach the base, just the initial instance.
So option Comen B and I'm going to rename it supercool, but in Active.
Now, this is very good.
And this is what I said about like, you know, your design system is not just for you.
Oftentimes designers are really designing to show like active states or disabled states or maybe disabled
states.
It really depends how in-depth you're going with your different user flows.
You're trying to show others.
But when we hand off something like this to developers, we're showing them all the different types
of variations of buttons they need to code.
So this is my active button.
And this will trigger when this is clicked, so if I were to create a prototype.
This is what I would do.
So when I click on this.
We can do on most down.
We're going to swap supercool, but an active.
And that is not instant, where it's going to smart animated.
And what I'm going to do here is we can actually start to solve that, I don't think it's going to work
because they're not the same name.
And we're going to do is over here on mouse up.
I'm actually going to go back.
And that's just going to dissolve.
Let's see what this prototype looks like.
You'll see when I'm clicking it.
There is very much a change now, I can even set this to like 50 percent if you want to see more change
in anything and not clipping the continent.
OK, let's go back to our prototype.
There is a change in that interaction, we're giving them a lot of feedback, so don't just create the
default button.
Let me delete that.
Don't just create the default button.
You need to create, like, the variations that go alongside that when you're working on desktop.
That may be like other states as well.
So I've gone ahead and done that.
I've created disable buttons.
I've also created like a secondary button where it's just like a white background with a shadow.
And I've created those variations with active and disabled as well.
Seen with the tertiary.
I don't have a disabled button because I'll never use a disabled.
But in this instance.
But I've done the exact same thing for fixed as well.
So when you're creating buttons, when you're creating components like that, you remember to think
about all the different types of use cases for that button.
I may even be missing something here, and I totally understand that.
And I understand that, you know, these things may change.
I may use different colors in the future.
I may use different typefaces, different icons, but I've made it so.
It's very much modular, I have this icon now, this is my instance, and I want this to be like an
ad, but now I'm using it for the sole case of an ad button.
I'm going to not delete it.
It'll just hide it, which is perfect.
And for this Budden, I'm going to swap it out for another icon.
Do we have an ADD icon in here?
Oh, there it is.
Plus.
And just like that, we've created our own component and I'm just going to shrink that down so that
we have proper sizing and there you go.
You have your own component that you can use at any which way you like.
And that is how I've built out buttons for our design system.