Welcome back.
Now we're going to go over some prototype actions next, so what we've been basically doing is some
basic stuff, like if we click on something like this, it goes to the next page.
And this is essentially the prototype action.
Do you want it to navigate to you want it to open a overlaid.
You want to swap with you want to go back close overlay, open a link.
I mean, there's a bunch of different things you can do.
So I'm going to demonstrate a couple of them.
So navigate to we've been doing and that essentially just goes from one page to the next.
Very simple.
And at this stage, like when you're early on prototyping, that's all you really need.
But if you want to do something a little bit more complex, let's just drag this all the way down to
our search.
And what we can do is interest trying to think, let's create a new search and we're not going to have
anything in here, we're not going have a background and we're just going to call this keyboard overlay.
So.
We can do is let's just delete that, let's put something together.
So if I click my prototype and I click the trigger just to go over to that page, once I stop the search,
what will happen is it will come to this search page.
And what we can do is.
And let's take a look.
OK, so we've gone to this page and like on this, what we can do is after delay.
He can open up overlay and that overlay can be this and we can have it like move in from the bottom
and we'll get into this a little bit more.
But this can happen like two hundred milliseconds after the initial click and I'll show you what it
looks like.
So I'm over here, I want to search, I click search and the overlay comes up.
So that's a little weird how it happened.
And we can actually customize that behavior.
So this will come up no.
Hmm.
This will open overlay.
There you go.
That's why and this overlay will be sticky to the bottom and the center, you can specify where that
happens.
So this essentially will be really.
Affixed to the bottom, and when you click outside, you can remove it.
OK, let's take a look.
This to restart.
Boom, there it is.
If I click outside of the overlay.
It should have closed at.
So let's see close when clicking outside, oh, it's probably because it's the whole frame, so if I
do something like this.
There you go.
Now closes, so let's go back and restart that, so search on overlay, click it perfect and we can
even link this together again.
If I click that again, I want wanted to open and it's going to automatically select, like, open overlayed
over again so we can kind of create like a little bit of a loop here.
Boom, boom, boom, boom.
So let's actually keep on going with this.
The next is to swap now swap allows you to replace one frame with another.
This will kind of behave similarly to the navigate option when triggered from a hotspot like in a regular
frame.
If you apply a swap to hotspot in an overlay, it will replace or swap that current overlay with a new
destination frame.
So.
I'll show you what that looks like.
So if I create another one over here and like I change the background color.
The black men don't do this.
OK, let's see what this prototype looks like.
So if I click prototype and I click on this, I can.
Swap it, so untap swap with.
The new keyboard overlay and let's see what that looks like.
You see, I would just swap the overlay, so that's very useful if you need it.
I was kind of like a terrible color choice for that keyboard, but it gets the point across now.
Another thing we can add to this is like back.
So I have the the icons selected here, that topical area and on top, I want to just go back that's
essentially is going to navigate back to the previous scheme.
This is perfect for, like simulating in the back button in your prototypes, which we're doing right
now.
So this will go back there.
Let's go search overlay quick outside the overlay.
Go back and you'll notice that even though we brought in the new frame as an overlay, it doesn't like
effect that when we're actually going back and forth.
What you can also do to simulate the back button is to actually link it if you want to.
That previous screen, I mean, you really only come in from search in this prototype from the screen,
so you can easily just link that back.
To like that, so let's.
There you go, perfect.
Now, another action is like close overlain, we've kind of done that already, like if we want to click
on this, we can actually do like on top.
Close overlay, and essentially that will remove the overlay.
So let's go back, let's search what that looks like.
Boom.
And there you go, removing the overlay.
So this actually allows you to close or dismiss any overlays that have appeared over that original frame.
And essentially, those are all the different types of prototype actions that I use overlays really
nice for simulating stuff like keyboards or like models and stuff like that.
Like you can add stuff to that overlay.
So an example is, let's see, Irvan used overlain a long time.
So we're going to do is so this trigger is going to open up overlay and you can add like a background
behind it.
I think you need the whole frame to do that.
So let's take a look.
So actually, no, it's fine.
So you can add the background around the overlay, which is really nice.
I mean, in this case, when you're using a keyboard, you probably may not want to because if we're
doing, like, predicting the type ahead in terms of what the user's typing here, we probably want
to see what's showing up over here.
But like, if you're using a model, you'll definitely want to add an overlay just to kind of hide that
background information and create more contrast for that model to kind of pop on the screen.
So, yeah, that's definitely an easy way to use prototype actions within Sigma.