1
00:00:00,680 --> 00:00:01,900
Everyone, and welcome back.

2
00:00:02,230 --> 00:00:08,410
So as you can tell, there are a bunch of different components a user can interact with, and maintaining

3
00:00:08,410 --> 00:00:11,380
those components is pretty crucial for any project.

4
00:00:11,380 --> 00:00:13,620
And this is generally a large task.

5
00:00:13,630 --> 00:00:19,360
So you want to set aside a lot of time to do something like this, especially if you're creating something

6
00:00:19,360 --> 00:00:24,730
like a design system or if you're just creating a bunch of different variants of inputs because, you

7
00:00:24,730 --> 00:00:28,870
know, inputs can be the most complex UI elements that we deal with.

8
00:00:29,740 --> 00:00:33,550
So here are some tips to building some of your very own components within Fagbug.

9
00:00:33,760 --> 00:00:38,080
Step number one, let's learn about master components.

10
00:00:38,860 --> 00:00:43,750
So when we create inputs within Sigma, remember, we need to adhere to our base unit.

11
00:00:44,410 --> 00:00:46,580
I'm using eight pixels.

12
00:00:46,600 --> 00:00:50,160
So let's create something very simple, like a single line input field.

13
00:00:50,890 --> 00:00:53,470
So I'm actually just going to create a massive frame.

14
00:00:55,540 --> 00:00:57,640
Or we can play around, we can call this.

15
00:00:58,870 --> 00:01:00,520
Master component's.

16
00:01:03,520 --> 00:01:08,530
And I'm going to do is I'm just going to select another frame.

17
00:01:13,930 --> 00:01:15,520
And this going to be my input field.

18
00:01:16,660 --> 00:01:19,240
It's going to be 40 pixels in height.

19
00:01:19,900 --> 00:01:22,750
It's going to have a border radius of five pixels.

20
00:01:24,420 --> 00:01:28,650
And it's going to have a nice little stroke.

21
00:01:31,190 --> 00:01:36,020
So that is our stroke.

22
00:01:37,870 --> 00:01:38,740
Perfect.

23
00:01:38,790 --> 00:01:40,720
I just changed the border radius to two.

24
00:01:41,770 --> 00:01:45,850
OK, and let's give it a fill of white, that's fine.

25
00:01:46,930 --> 00:01:49,870
OK, so this is our input field.

26
00:01:50,130 --> 00:01:51,480
What should we call it?

27
00:01:52,900 --> 00:01:54,700
Amerigroup in Berfield.

28
00:01:55,300 --> 00:01:57,860
Now that this is done, we're going to use components.

29
00:01:58,660 --> 00:02:03,910
Now, this page over here, we're going to build out a couple of different components within it.

30
00:02:04,210 --> 00:02:07,120
And it'll serve as a kind of like our source of truth.

31
00:02:07,490 --> 00:02:12,260
And by using master components, we can really reuse them across all of our designs.

32
00:02:12,790 --> 00:02:14,830
So let's turn this input into a component.

33
00:02:15,930 --> 00:02:22,020
So to turn into a component, you can right click and create a component or you can use the quick shortcut,

34
00:02:22,020 --> 00:02:23,240
which is option command.

35
00:02:24,630 --> 00:02:26,400
So now you'll notice it's a component.

36
00:02:26,610 --> 00:02:31,410
If I go back and press commands, you can also create a component up there.

37
00:02:32,420 --> 00:02:36,950
Now, it's a component which is pretty awesome, let's copy it somewhere, so I'm going to copy it right

38
00:02:36,950 --> 00:02:37,220
here.

39
00:02:37,940 --> 00:02:43,010
You can tell that the little icon has changed and that means that this is now an instance of the master

40
00:02:43,010 --> 00:02:46,460
component or the parent, whichever you want to call it.

41
00:02:46,460 --> 00:02:47,420
I call it the master.

42
00:02:48,110 --> 00:02:49,700
And that's what fitment calls it as well.

43
00:02:50,990 --> 00:02:58,250
You can copy this component anywhere you want as much as you want, but as soon as we kind of like edit

44
00:02:58,250 --> 00:03:00,970
the master component, it reflects in the instance.

45
00:03:01,580 --> 00:03:04,710
So this makes managing inputs so much easier.

46
00:03:04,970 --> 00:03:09,650
So let's take a look at how we can update some inputs across our designs by changing something in the

47
00:03:09,650 --> 00:03:10,020
master.

48
00:03:10,040 --> 00:03:12,080
So this is our master.

49
00:03:12,090 --> 00:03:16,910
What we're going to do here is we are actually going to give it a fill.

50
00:03:19,570 --> 00:03:22,510
Off I go, very light gray, and you can tell that it's changing their.

51
00:03:32,860 --> 00:03:33,500
There you go.

52
00:03:33,520 --> 00:03:39,400
We have a couple of copies and we can just change them all and you can tell that they all adhere to

53
00:03:39,400 --> 00:03:45,730
that master component, which is totally awesome, because if you're creating an individual input for

54
00:03:45,730 --> 00:03:50,380
every single instance that you use it, when you want to change one, you probably are going to want

55
00:03:50,380 --> 00:03:55,660
to change everything else because you want to keep everything very consistent.

56
00:03:56,050 --> 00:03:59,250
Using components totally helps you do that in such an easy way.

57
00:04:00,310 --> 00:04:03,580
So that's how you create components within Sigma.