1
00:00:01,070 --> 00:00:06,950
The last tip I have when you're creating components is to always remember to use constraints, especially

2
00:00:06,950 --> 00:00:09,590
if you're designing for responsive websites.

3
00:00:10,040 --> 00:00:13,450
So constraints allow you to control, like resizing behavior.

4
00:00:13,970 --> 00:00:16,970
I'm going to show you how this works and how we're going to fix this.

5
00:00:18,340 --> 00:00:26,630
If I realize this, look at the label, totally responsive and the input field now, that is truly amazing.

6
00:00:26,640 --> 00:00:27,510
I love this.

7
00:00:27,510 --> 00:00:30,090
I love constraints and I'm going to teach you how to use them.

8
00:00:30,930 --> 00:00:38,040
So essentially, they make resizing components so easy, I mean, for all types of situations and device

9
00:00:38,040 --> 00:00:38,640
sizes.

10
00:00:39,120 --> 00:00:44,360
So easy way to do this is let's go back to our original and field.

11
00:00:44,730 --> 00:00:48,240
And if you look at the top, these are constraints over here.

12
00:00:49,640 --> 00:00:53,390
Now, right now, this means that if I resize this whole frame.

13
00:00:56,090 --> 00:00:57,590
I'll show you what happens.

14
00:00:57,950 --> 00:00:59,030
Nothing should happen.

15
00:01:00,690 --> 00:01:05,850
The only thing that's going to be resized is the actual input text.

16
00:01:06,830 --> 00:01:10,490
Because it has a constraint, such a right, it's hard to see.

17
00:01:13,540 --> 00:01:20,500
But what we should do is we should actually shift and select the right over here and left and right.

18
00:01:20,650 --> 00:01:22,690
You can also select in this little dropdown.

19
00:01:23,020 --> 00:01:26,500
And what that means is when I start doing this.

20
00:01:27,720 --> 00:01:28,710
Are doing this.

21
00:01:30,680 --> 00:01:32,420
It's going to easily.

22
00:01:33,300 --> 00:01:36,300
Be manipulated and easily resize.

23
00:01:36,510 --> 00:01:42,390
Now, you saw the issue we were having over here, we have an issue with the icon, not necessarily

24
00:01:43,020 --> 00:01:44,070
resizing properly.

25
00:01:44,340 --> 00:01:45,600
So I'll show you how to fix that.

26
00:01:45,960 --> 00:01:48,740
So what we're going to do is we are going to go in here.

27
00:01:48,750 --> 00:01:50,850
We're going to show our icon.

28
00:01:52,950 --> 00:01:58,320
As you can tell, it's only left and top, so it will move if the top frame.

29
00:01:59,470 --> 00:02:03,690
Shifts, but we never really do that, so I don't think that's a big deal right now.

30
00:02:05,130 --> 00:02:07,420
We can do, though, is click right?

31
00:02:07,870 --> 00:02:10,930
We don't want it to squish from left to right.

32
00:02:11,000 --> 00:02:12,490
I'll show you what happens if we do click.

33
00:02:12,550 --> 00:02:16,030
That's if we do left and right over here.

34
00:02:16,570 --> 00:02:17,730
It's just going to squish.

35
00:02:18,310 --> 00:02:21,490
But we want to do is make sure that it's kind of like sticking to that.

36
00:02:21,490 --> 00:02:21,720
Right.

37
00:02:23,210 --> 00:02:30,000
So if we do that, there you go, we fixed it, and that's basically how our labels are set up as well.

38
00:02:30,200 --> 00:02:33,710
They set up in the exact same way the full label should be left and right.

39
00:02:34,730 --> 00:02:40,100
The left side of the label will always be kind of sticky to the left and our description will always

40
00:02:40,100 --> 00:02:41,050
be sticky to the right.

41
00:02:41,060 --> 00:02:42,890
You'll notice it over here, even though it's hidden.

42
00:02:43,760 --> 00:02:45,130
And same with the icon.

43
00:02:45,650 --> 00:02:47,110
So that will always be sticky there.

44
00:02:47,720 --> 00:02:48,560
The input field.

45
00:02:50,060 --> 00:02:52,940
This needs to be left and right.

46
00:02:54,430 --> 00:02:57,580
You can even do the same over here, and it's already set, so perfect.

47
00:02:58,300 --> 00:03:00,790
Now, I'll show you some use cases for this.

48
00:03:01,750 --> 00:03:05,290
So if I use let's say.

49
00:03:06,400 --> 00:03:09,180
Let's create an expiration date.

50
00:03:12,380 --> 00:03:17,390
We can use month, month, D.J., yea yea yea yea.

51
00:03:19,060 --> 00:03:21,780
And we're not going to need an icon for this one.

52
00:03:24,410 --> 00:03:26,740
So there we go.

53
00:03:28,830 --> 00:03:36,300
Now, we see this a lot when we're entering like credit card details and stuff like that.

54
00:03:37,230 --> 00:03:38,220
Let's just hide that.

55
00:03:39,180 --> 00:03:39,810
There you go.

56
00:03:40,560 --> 00:03:41,370
That's good.

57
00:03:42,240 --> 00:03:49,440
Now, I remember before and one of the lessons we talked about, like how you should size icons based

58
00:03:49,440 --> 00:03:54,130
off of how appropriate they are, like a CV in terms of the content, you're only going to probably

59
00:03:54,150 --> 00:03:54,930
have three digits.

60
00:03:54,930 --> 00:03:58,530
So a full with input doesn't really make sense.

61
00:03:58,950 --> 00:04:01,530
And what I would do is I would kind of bump it up here.

62
00:04:05,440 --> 00:04:12,040
Bring this input right beside it and look at that, like you can easily manipulate your inputs for the

63
00:04:12,040 --> 00:04:17,060
situation because of the constraints and it doesn't affect this input over here at all.

64
00:04:17,650 --> 00:04:23,290
So remember that when you're creating components, be very conscious of your constraints.

65
00:04:23,320 --> 00:04:24,550
You can always go back and fix them.

66
00:04:24,550 --> 00:04:25,920
But that's always a pain.

67
00:04:26,350 --> 00:04:28,840
So be conscious on how you're going to use these components.

68
00:04:28,840 --> 00:04:30,580
Are they going to be resized often?

69
00:04:30,580 --> 00:04:36,970
Do you plan on making different instances of them and creating new components that really does affect

70
00:04:37,840 --> 00:04:43,840
how you kind of apply constraints as well, but especially for something like inputs that may get resized

71
00:04:43,840 --> 00:04:49,420
throughout the like how they're used throughout the your application definitely apply constraints because

72
00:04:49,420 --> 00:04:50,950
you can easily create.

73
00:04:52,610 --> 00:05:00,470
These responsive inputs, which look awesome and they're kind of so fun to use.

74
00:05:01,280 --> 00:05:04,280
So that's how you ease constraints when creating components.