Learn how to add hotspots and interactions to add navigation to a screen.
- [Narrator] There are occasions where you're not going to select content and have it be interactive. And what way you can do in that situation is just put an overlay over it called a hot spot. And hot spots are little interactive areas that you'll never see when you output the project. So we're going to go find a hot spot which is right here in the libraries, the featured library. And it's actually in the UI library too. So you just click and drag and you see this little yellow overlay comes up. And I can just resize it, so what we're going to do is we're going to click on Marilyn, Marilyn's avatar here and we're going to put a hot spot in there.
Now another reason you might want to use a hot spot is if you're working in Melbo, touch areas should be above 48 pixels square and if Marilyn's avatar is at 30 pixels square, well it's way too small. So you just put a hot spot over it and away you go. So we're just going to select the hot spot, we're going to add a new interaction. What will happen, we're going to go to a page. What page are we going to go to? Well we're going to go to the chatter page and we're going to click add.
And then you can also use these hot spots to move back. So if I go to the chatter page and look up Marilyn's. We want to see what Marilyn's been talking about, we just put a hot spot over her. Just resize it down so it's not too huge. And this is the last one we did so we just click go to page and we can see click, tap go to page. And we don't want to go to chatter so we're going to change that to camp chat. And we're going to click add and you notice I've got the interaction on the hot spot and if we go to preview, there's Marilyn back to the main page, over to camp chat.
So there you go, there's working with hot spots inside of UXPin, they are very useful devices. And they will set your tap area or your interaction area if the item to be tapped or touched is too small.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus