The last tip I have when you're creating components is to always remember to use constraints, especially
if you're designing for responsive websites.
So constraints allow you to control, like resizing behavior.
I'm going to show you how this works and how we're going to fix this.
If I realize this, look at the label, totally responsive and the input field now, that is truly amazing.
I love this.
I love constraints and I'm going to teach you how to use them.
So essentially, they make resizing components so easy, I mean, for all types of situations and device
sizes.
So easy way to do this is let's go back to our original and field.
And if you look at the top, these are constraints over here.
Now, right now, this means that if I resize this whole frame.
I'll show you what happens.
Nothing should happen.
The only thing that's going to be resized is the actual input text.
Because it has a constraint, such a right, it's hard to see.
But what we should do is we should actually shift and select the right over here and left and right.
You can also select in this little dropdown.
And what that means is when I start doing this.
Are doing this.
It's going to easily.
Be manipulated and easily resize.
Now, you saw the issue we were having over here, we have an issue with the icon, not necessarily
resizing properly.
So I'll show you how to fix that.
So what we're going to do is we are going to go in here.
We're going to show our icon.
As you can tell, it's only left and top, so it will move if the top frame.
Shifts, but we never really do that, so I don't think that's a big deal right now.
We can do, though, is click right?
We don't want it to squish from left to right.
I'll show you what happens if we do click.
That's if we do left and right over here.
It's just going to squish.
But we want to do is make sure that it's kind of like sticking to that.
Right.
So if we do that, there you go, we fixed it, and that's basically how our labels are set up as well.
They set up in the exact same way the full label should be left and right.
The left side of the label will always be kind of sticky to the left and our description will always
be sticky to the right.
You'll notice it over here, even though it's hidden.
And same with the icon.
So that will always be sticky there.
The input field.
This needs to be left and right.
You can even do the same over here, and it's already set, so perfect.
Now, I'll show you some use cases for this.
So if I use let's say.
Let's create an expiration date.
We can use month, month, D.J., yea yea yea yea.
And we're not going to need an icon for this one.
So there we go.
Now, we see this a lot when we're entering like credit card details and stuff like that.
Let's just hide that.
There you go.
That's good.
Now, I remember before and one of the lessons we talked about, like how you should size icons based
off of how appropriate they are, like a CV in terms of the content, you're only going to probably
have three digits.
So a full with input doesn't really make sense.
And what I would do is I would kind of bump it up here.
Bring this input right beside it and look at that, like you can easily manipulate your inputs for the
situation because of the constraints and it doesn't affect this input over here at all.
So remember that when you're creating components, be very conscious of your constraints.
You can always go back and fix them.
But that's always a pain.
So be conscious on how you're going to use these components.
Are they going to be resized often?
Do you plan on making different instances of them and creating new components that really does affect
how you kind of apply constraints as well, but especially for something like inputs that may get resized
throughout the like how they're used throughout the your application definitely apply constraints because
you can easily create.
These responsive inputs, which look awesome and they're kind of so fun to use.
So that's how you ease constraints when creating components.