1
00:00:00,600 --> 00:00:02,340
Hey, everyone, and welcome back.

2
00:00:02,640 --> 00:00:08,520
Now, this is going to be a pretty exciting lesson, we just created some wire frames and I have several

3
00:00:08,520 --> 00:00:16,050
of those wire frames here, as you can see, and we're going to use them to actually create our first

4
00:00:16,050 --> 00:00:16,940
prototype.

5
00:00:17,190 --> 00:00:22,020
Now we're going to get into the basics of it and how you can link together something really quick that

6
00:00:22,020 --> 00:00:27,120
you can test with users or you can just show to your clients or you can just show off to your team.

7
00:00:28,160 --> 00:00:31,060
So let's go right over here.

8
00:00:32,070 --> 00:00:36,660
You'll notice that when you want to design this is what you would click, you click this little design

9
00:00:36,660 --> 00:00:40,710
tab, but if you want to get into prototyping, you click the prototype.

10
00:00:41,280 --> 00:00:43,460
Now we're going to be working on mobile.

11
00:00:43,500 --> 00:00:46,020
The first thing you want to do is select the device.

12
00:00:46,770 --> 00:00:48,570
Now they have a bunch of different variations.

13
00:00:48,580 --> 00:00:50,960
You can even create custom sizes if you want.

14
00:00:51,420 --> 00:00:57,030
If I'm on mobile, I'll probably use like a phone size, depending on maybe the type of frame I'm using.

15
00:00:57,840 --> 00:01:04,920
So in this instance, I'm going to use the iPhone 11 pro device over here you can even like.

16
00:01:06,000 --> 00:01:11,760
Select the model, whether that's gold, midnight green, silver space, gray, like, let's just go

17
00:01:11,760 --> 00:01:18,420
for space gray, keep it really relaxed and you can even, like, adjust the background color.

18
00:01:18,420 --> 00:01:20,070
You can see like a preview of that.

19
00:01:20,700 --> 00:01:21,150
So.

20
00:01:23,860 --> 00:01:29,830
There you go, I just changed to light a very light gray over here, we can just see a preview of what

21
00:01:29,830 --> 00:01:31,080
that could look like.

22
00:01:32,210 --> 00:01:33,320
If we go to present.

23
00:01:36,060 --> 00:01:44,100
So this is our presentation view, so now we can see, like our app is actually in here while and but

24
00:01:44,100 --> 00:01:47,010
like we can't click anything, so it doesn't really work.

25
00:01:47,010 --> 00:01:48,180
We can, like, tap through it.

26
00:01:48,180 --> 00:01:53,730
Like if we press our arrow keys, we can go through all the different types of options there are.

27
00:01:54,180 --> 00:01:57,150
But that's about it right now.

28
00:01:58,110 --> 00:01:58,830
So let's get out of here.

29
00:01:59,310 --> 00:02:03,960
So it opens up a new tab like, well, we'll show you again, just opens up a new tab right there.

30
00:02:04,740 --> 00:02:05,610
You can close that.

31
00:02:06,030 --> 00:02:07,650
You can keep it open if you want.

32
00:02:07,650 --> 00:02:12,370
And the updates you make here will reflect in that presentation, which is also awesome.

33
00:02:12,840 --> 00:02:19,910
So I'm going to do is I can show you like you can also switch the orientation if you need to.

34
00:02:20,340 --> 00:02:23,970
This orientation, like, determines which way your prototype is presented.

35
00:02:24,130 --> 00:02:28,380
Typically, you just leave a vertical so you can leave that like that.

36
00:02:29,310 --> 00:02:30,680
Your background color.

37
00:02:30,690 --> 00:02:32,850
I mentioned that you can change it to whenever you want.

38
00:02:32,880 --> 00:02:36,440
I like to keep it like a little bit of contrast between that in the device.

39
00:02:36,750 --> 00:02:38,300
It really depends what I'm prototyping.

40
00:02:38,310 --> 00:02:43,740
If I like prototyping interaction outside of like a device just on a frame of its own, I probably may

41
00:02:43,740 --> 00:02:44,720
keep it like, wait.

42
00:02:45,090 --> 00:02:47,010
Oh, no, it's up to you, really.

43
00:02:47,430 --> 00:02:50,180
And another very important thing is your starting frame.

44
00:02:50,460 --> 00:02:52,140
So this is essentially.

45
00:02:53,420 --> 00:02:56,790
Like a frame that your prototype should start on.

46
00:02:56,810 --> 00:03:02,360
So I'm going to select a home that is my starting frame so you can, like, set or update the starting

47
00:03:02,360 --> 00:03:04,760
frame from the prototype settings if you want.

48
00:03:06,620 --> 00:03:07,050
There you go.

49
00:03:07,160 --> 00:03:08,150
There's our starting frame.

50
00:03:09,680 --> 00:03:15,890
So you can you can change it if you want, but just because I made a connection, it goes away.

51
00:03:15,890 --> 00:03:17,360
If there's no connections, apparently.

52
00:03:21,620 --> 00:03:28,400
If I link it to this item, then I'll definitely stay.

53
00:03:28,610 --> 00:03:32,110
OK, so let's get right into it triggers.

54
00:03:32,810 --> 00:03:39,980
Now the trigger determines what type of interaction with like the hot spot will cause the prototype

55
00:03:39,980 --> 00:03:40,660
to, like, advance.

56
00:03:40,670 --> 00:03:43,460
So I'll show you what I mean.

57
00:03:43,880 --> 00:03:50,180
So if I clicked on this little heart at the bottom here, this icon to go to the wish-List page.

58
00:03:51,520 --> 00:03:58,750
This is the trigger, this little drop down, so there's different triggers right now we have on clicker

59
00:03:58,750 --> 00:04:05,220
on top and that basically like when a user clicks on desktop or user taps on mobile on the hotspot,

60
00:04:05,980 --> 00:04:07,030
and I'll show what that looks like.

61
00:04:12,260 --> 00:04:16,730
So there's my hotspot right there, if I click that, that's what's going to happen.

62
00:04:18,450 --> 00:04:24,930
So let's go back to our designs so you can use them for like navigation, opening links, using menus

63
00:04:24,930 --> 00:04:30,690
or exploring websites or when you need input from a user to click on buttons, fill in forms or confirm

64
00:04:30,690 --> 00:04:33,690
and dismiss alerts you also have on drag.

65
00:04:33,690 --> 00:04:37,890
So that allows you to perform an action when you drag an element on the screen.

66
00:04:37,920 --> 00:04:41,060
This can be like an entire frame or like a single element.

67
00:04:41,460 --> 00:04:43,100
I'll show you what that looks like.

68
00:04:43,620 --> 00:04:44,100
So.

69
00:04:45,560 --> 00:04:47,450
I'm just going to create a copy here.

70
00:04:47,600 --> 00:04:49,820
I'm going to remove this election.

71
00:04:57,710 --> 00:05:03,820
And actually going to go into my design and I'm going to select this option, Command G.

72
00:05:07,950 --> 00:05:11,010
I go pick up, I'm going to option Comanche.

73
00:05:13,250 --> 00:05:18,820
Actually, you to frame one, so that's another option I'm going to show you what that looks like.

74
00:05:18,830 --> 00:05:21,490
I'm going to select this whole frame.

75
00:05:21,800 --> 00:05:25,100
I'm going to go to my prototype and I'm going to do on dreg.

76
00:05:28,220 --> 00:05:29,580
And go to this.

77
00:05:30,710 --> 00:05:35,120
So this page should drag the element let's go take a look.

78
00:05:36,300 --> 00:05:37,140
Whoa.

79
00:05:37,620 --> 00:05:38,050
There you go.

80
00:05:38,070 --> 00:05:40,560
You can even do on drag, so that's another trigger.

81
00:05:43,470 --> 00:05:51,360
The next trigger on our list is while hovering and what I'm going to do here in the selectees.

82
00:05:54,170 --> 00:06:01,130
I'm actually going to make a copy of this home page and I'm going to make this Phil.

83
00:06:03,980 --> 00:06:05,840
Let's just turn it.

84
00:06:13,960 --> 00:06:14,600
There you go.

85
00:06:14,620 --> 00:06:15,520
I think that's fine.

86
00:06:15,990 --> 00:06:22,480
OK, so what I'm going to do here is I'm going to go in my prototype, I'm going to select this.

87
00:06:22,810 --> 00:06:26,440
And when I hover, I'm going to go to this page.

88
00:06:31,790 --> 00:06:35,210
You can see that it is actually hovering really awesome.

89
00:06:35,570 --> 00:06:39,560
That's the next trigger, the other trigger we have in store.

90
00:06:40,100 --> 00:06:46,760
So let's delete this kind of just creating like homepage variants so we can show off all these triggers

91
00:06:47,300 --> 00:06:48,620
we can have while pressing.

92
00:06:48,620 --> 00:06:53,750
So triggers this action basically like you hold the mouse or trackpad on a desktop.

93
00:06:53,750 --> 00:06:59,540
And when you tap and hold on a mobile device so you can use this for navigating like dropdown menus

94
00:06:59,540 --> 00:07:04,070
or replicating long press interactions like viewing a preview on iOS.

95
00:07:04,730 --> 00:07:08,270
When you release this, we will take the user back to the original frame.

96
00:07:08,270 --> 00:07:11,030
So I'll show you what that looks like.

97
00:07:13,240 --> 00:07:15,690
Actually, let's do something with this over here.

98
00:07:18,990 --> 00:07:24,210
We were just going to make that block, so when we do.

99
00:07:26,090 --> 00:07:31,220
While pressin, we were going to go to this page, let's see what it looks like, I just clicked.

100
00:07:33,100 --> 00:07:37,090
And there you go, you have a little interaction, so really simple stuff.

101
00:07:39,900 --> 00:07:46,560
Let's see what else we can do here, the next one is key or gamepad, I mean, I'm not going to go over

102
00:07:46,560 --> 00:07:49,380
that one right now because we're not necessarily creating the game.

103
00:07:50,070 --> 00:07:55,980
There's Mouse Enter, which basically shows the destination frame that you selected when the mouse enters

104
00:07:55,980 --> 00:07:57,340
the hotspot area.

105
00:07:57,360 --> 00:08:00,570
This could be like a small area, like a button or like an entire section.

106
00:08:01,620 --> 00:08:05,570
So you can also, like, set up what happens afterwards.

107
00:08:05,620 --> 00:08:07,380
So we're going to do here is.

108
00:08:08,640 --> 00:08:11,790
I'm going to do something similar to what I had.

109
00:08:12,480 --> 00:08:16,310
Let's change this feel to like, read who that's really harsh.

110
00:08:16,320 --> 00:08:17,160
Let's change the black.

111
00:08:18,170 --> 00:08:24,860
So we're going to do here is I'm going to go into my prototype, I'm going to select a mouse enter,

112
00:08:25,520 --> 00:08:26,660
and that's going to go here.

113
00:08:27,350 --> 00:08:34,490
And when I select, I'm going to go back to do on no leave.

114
00:08:35,750 --> 00:08:38,990
So let's take a look at what that looks like.

115
00:08:39,860 --> 00:08:46,070
So as you can tell, like most enter no sleeve works perfectly and you can create a little interaction

116
00:08:46,070 --> 00:08:46,390
like that.

117
00:08:46,410 --> 00:08:48,110
This is great for like stuff like on desktop.

118
00:08:48,350 --> 00:08:54,640
The same concept applies to the next two, which are like touch down and touch up.

119
00:08:54,950 --> 00:09:01,910
So all you need to do is like when you click and when you release or when you tap and remove the top

120
00:09:02,180 --> 00:09:06,560
so we can do the exact same thing, touch down.

121
00:09:08,190 --> 00:09:11,190
Touch up and if we were to preview that.

122
00:09:17,370 --> 00:09:23,100
So it's just going to always default to this one, touch down, click, touch up, gone.

123
00:09:23,580 --> 00:09:24,440
Touchdown, click.

124
00:09:24,540 --> 00:09:24,930
Touch up.

125
00:09:24,930 --> 00:09:28,530
Gone so really easy to use.

126
00:09:28,830 --> 00:09:30,340
The triggers are pretty awesome.

127
00:09:31,740 --> 00:09:33,450
Another cool thing is.

128
00:09:35,070 --> 00:09:41,250
Let's just remove this altogether, what we're going to do is we're going to create like three frames.

129
00:09:44,540 --> 00:09:48,560
OK, so I'm going to connect this to this.

130
00:09:49,550 --> 00:09:54,500
Just by clicking, maybe we'll have a state change so we know that we're on this page.

131
00:09:56,060 --> 00:09:57,560
So that will change to black.

132
00:09:58,600 --> 00:10:04,180
And then after a delay, this is going to happen, so let's go to our prototype, it's going to go back

133
00:10:04,180 --> 00:10:05,470
to normal after a delay.

134
00:10:06,660 --> 00:10:10,690
Or what we can even, like, shift this whole thing over after a delay?

135
00:10:10,740 --> 00:10:11,340
I don't know.

136
00:10:11,440 --> 00:10:13,500
It's just something to show you how it works.

137
00:10:14,010 --> 00:10:18,240
So I'm going to click the whole frame and I'm going to click after delay.

138
00:10:19,080 --> 00:10:22,020
And I have a hundred milliseconds.

139
00:10:23,080 --> 00:10:28,700
And it's going to go to it's going to navigate to home.

140
00:10:29,560 --> 00:10:31,880
So let me show you what that looks like.

141
00:10:32,380 --> 00:10:33,870
So I see my hotspot there.

142
00:10:33,880 --> 00:10:34,590
I'm just clicking.

143
00:10:35,470 --> 00:10:36,010
I click.

144
00:10:37,140 --> 00:10:43,020
And you saw that it changed after a hundred milliseconds, so if we go back to our frame again.

145
00:10:44,500 --> 00:10:45,680
Boom, gone.

146
00:10:46,150 --> 00:10:52,000
So those are the different types of triggers you can use within Sigma, I mean, use them wisely, don't

147
00:10:52,000 --> 00:10:54,970
like do what I just did there, because that's kind of confusing.

148
00:10:54,970 --> 00:11:00,270
But you may want to use that for, like, if you're building, like, email notification list and like

149
00:11:00,280 --> 00:11:03,610
a new email pops up and you want to show what that interaction looks like, does it fit in?

150
00:11:03,610 --> 00:11:03,730
And.

151
00:11:04,240 --> 00:11:09,390
I mean, we can get more in detail in terms of like what that looks like in a later lesson when we get

152
00:11:09,400 --> 00:11:10,510
to like micro interactions.

153
00:11:10,510 --> 00:11:15,730
But for basic prototyping, this is just really good to just do like instant action just to get it done

154
00:11:15,730 --> 00:11:16,230
quickly.

155
00:11:16,240 --> 00:11:19,390
You don't necessarily need to spend so much time figuring out all these triggers.

156
00:11:19,720 --> 00:11:25,960
I typically only use, like on tap for like everything at this point because I just want to get like

157
00:11:25,960 --> 00:11:27,880
a prototype linked together to test.

158
00:11:28,570 --> 00:11:31,180
We're going to learn a little bit more in our next video.