Hey, everyone, and welcome back.
Now, this is going to be a pretty exciting lesson, we just created some wire frames and I have several
of those wire frames here, as you can see, and we're going to use them to actually create our first
prototype.
Now we're going to get into the basics of it and how you can link together something really quick that
you can test with users or you can just show to your clients or you can just show off to your team.
So let's go right over here.
You'll notice that when you want to design this is what you would click, you click this little design
tab, but if you want to get into prototyping, you click the prototype.
Now we're going to be working on mobile.
The first thing you want to do is select the device.
Now they have a bunch of different variations.
You can even create custom sizes if you want.
If I'm on mobile, I'll probably use like a phone size, depending on maybe the type of frame I'm using.
So in this instance, I'm going to use the iPhone 11 pro device over here you can even like.
Select the model, whether that's gold, midnight green, silver space, gray, like, let's just go
for space gray, keep it really relaxed and you can even, like, adjust the background color.
You can see like a preview of that.
So.
There you go, I just changed to light a very light gray over here, we can just see a preview of what
that could look like.
If we go to present.
So this is our presentation view, so now we can see, like our app is actually in here while and but
like we can't click anything, so it doesn't really work.
We can, like, tap through it.
Like if we press our arrow keys, we can go through all the different types of options there are.
But that's about it right now.
So let's get out of here.
So it opens up a new tab like, well, we'll show you again, just opens up a new tab right there.
You can close that.
You can keep it open if you want.
And the updates you make here will reflect in that presentation, which is also awesome.
So I'm going to do is I can show you like you can also switch the orientation if you need to.
This orientation, like, determines which way your prototype is presented.
Typically, you just leave a vertical so you can leave that like that.
Your background color.
I mentioned that you can change it to whenever you want.
I like to keep it like a little bit of contrast between that in the device.
It really depends what I'm prototyping.
If I like prototyping interaction outside of like a device just on a frame of its own, I probably may
keep it like, wait.
Oh, no, it's up to you, really.
And another very important thing is your starting frame.
So this is essentially.
Like a frame that your prototype should start on.
So I'm going to select a home that is my starting frame so you can, like, set or update the starting
frame from the prototype settings if you want.
There you go.
There's our starting frame.
So you can you can change it if you want, but just because I made a connection, it goes away.
If there's no connections, apparently.
If I link it to this item, then I'll definitely stay.
OK, so let's get right into it triggers.
Now the trigger determines what type of interaction with like the hot spot will cause the prototype
to, like, advance.
So I'll show you what I mean.
So if I clicked on this little heart at the bottom here, this icon to go to the wish-List page.
This is the trigger, this little drop down, so there's different triggers right now we have on clicker
on top and that basically like when a user clicks on desktop or user taps on mobile on the hotspot,
and I'll show what that looks like.
So there's my hotspot right there, if I click that, that's what's going to happen.
So let's go back to our designs so you can use them for like navigation, opening links, using menus
or exploring websites or when you need input from a user to click on buttons, fill in forms or confirm
and dismiss alerts you also have on drag.
So that allows you to perform an action when you drag an element on the screen.
This can be like an entire frame or like a single element.
I'll show you what that looks like.
So.
I'm just going to create a copy here.
I'm going to remove this election.
And actually going to go into my design and I'm going to select this option, Command G.
I go pick up, I'm going to option Comanche.
Actually, you to frame one, so that's another option I'm going to show you what that looks like.
I'm going to select this whole frame.
I'm going to go to my prototype and I'm going to do on dreg.
And go to this.
So this page should drag the element let's go take a look.
Whoa.
There you go.
You can even do on drag, so that's another trigger.
The next trigger on our list is while hovering and what I'm going to do here in the selectees.
I'm actually going to make a copy of this home page and I'm going to make this Phil.
Let's just turn it.
There you go.
I think that's fine.
OK, so what I'm going to do here is I'm going to go in my prototype, I'm going to select this.
And when I hover, I'm going to go to this page.
You can see that it is actually hovering really awesome.
That's the next trigger, the other trigger we have in store.
So let's delete this kind of just creating like homepage variants so we can show off all these triggers
we can have while pressing.
So triggers this action basically like you hold the mouse or trackpad on a desktop.
And when you tap and hold on a mobile device so you can use this for navigating like dropdown menus
or replicating long press interactions like viewing a preview on iOS.
When you release this, we will take the user back to the original frame.
So I'll show you what that looks like.
Actually, let's do something with this over here.
We were just going to make that block, so when we do.
While pressin, we were going to go to this page, let's see what it looks like, I just clicked.
And there you go, you have a little interaction, so really simple stuff.
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
that one right now because we're not necessarily creating the game.
There's Mouse Enter, which basically shows the destination frame that you selected when the mouse enters
the hotspot area.
This could be like a small area, like a button or like an entire section.
So you can also, like, set up what happens afterwards.
So we're going to do here is.
I'm going to do something similar to what I had.
Let's change this feel to like, read who that's really harsh.
Let's change the black.
So we're going to do here is I'm going to go into my prototype, I'm going to select a mouse enter,
and that's going to go here.
And when I select, I'm going to go back to do on no leave.
So let's take a look at what that looks like.
So as you can tell, like most enter no sleeve works perfectly and you can create a little interaction
like that.
This is great for like stuff like on desktop.
The same concept applies to the next two, which are like touch down and touch up.
So all you need to do is like when you click and when you release or when you tap and remove the top
so we can do the exact same thing, touch down.
Touch up and if we were to preview that.
So it's just going to always default to this one, touch down, click, touch up, gone.
Touchdown, click.
Touch up.
Gone so really easy to use.
The triggers are pretty awesome.
Another cool thing is.
Let's just remove this altogether, what we're going to do is we're going to create like three frames.
OK, so I'm going to connect this to this.
Just by clicking, maybe we'll have a state change so we know that we're on this page.
So that will change to black.
And then after a delay, this is going to happen, so let's go to our prototype, it's going to go back
to normal after a delay.
Or what we can even, like, shift this whole thing over after a delay?
I don't know.
It's just something to show you how it works.
So I'm going to click the whole frame and I'm going to click after delay.
And I have a hundred milliseconds.
And it's going to go to it's going to navigate to home.
So let me show you what that looks like.
So I see my hotspot there.
I'm just clicking.
I click.
And you saw that it changed after a hundred milliseconds, so if we go back to our frame again.
Boom, gone.
So those are the different types of triggers you can use within Sigma, I mean, use them wisely, don't
like do what I just did there, because that's kind of confusing.
But you may want to use that for, like, if you're building, like, email notification list and like
a new email pops up and you want to show what that interaction looks like, does it fit in?
And.
I mean, we can get more in detail in terms of like what that looks like in a later lesson when we get
to like micro interactions.
But for basic prototyping, this is just really good to just do like instant action just to get it done
quickly.
You don't necessarily need to spend so much time figuring out all these triggers.
I typically only use, like on tap for like everything at this point because I just want to get like
a prototype linked together to test.
We're going to learn a little bit more in our next video.