In this video Dennis shows you how to rename your screens and how to begin linking your screens together using hotspots. Dennis also covers the various options available to you whenever you create a hotspot. Dennis also talks about how you can speed up your prototyping inside InVision by identifying global elements and building reusable templates. Dennis also shows you how to add those templates to various screens in your project with ease.
- [Voiceover] Now that our screens have been added to InVision, we need to make them clickable, but before we do that, let's name our screens and make it easier to reference. To rename our screens, we'll go back to the Screens view and we'll start renaming them. Click the pencil icon, call this one Login, we'll call this one Home, Compose, Chat, Gallery, Attached, and Menu.
Now that we have our screens renamed, we'll start making some hotspots. We'll jump into the first screen which takes us to the console and we'll access the Build mode. To create hotspots, you simply click and drag. Place it where you'd like it and choose its destination. We'll make this one go to our Home. And you can see we have Gestures and Transitions. Now depending on the prototype, you'll have different options available to use. Since this is a mobile, we obviously have a Tap, we also have Transitions.
We're going to keep this as Tap, make the transition Dissolve, and we'll click Save. Next we'll preview this transition. Go to PREVIEW MODE, click, and you'll see the transition. Jump back to BUILD MODE and we'll continue building our prototype. Now you can see we have an actual global element that's going to be reused throughout the prototype. So here, you can actually make a template. We'll create our hotspot, the destination will be the menu, we'll actually have this Slide Down, and we'll include hotspot in a template.
We'll create a new template, we'll call it Menu, we'll click Save. Click Save again and now we can apply this template to multiple screens. We'll click our lightning bolt, which will pop open a drawer, and we can choose all the screens that this template will be a part of. Click Done and we'll move on to the rest of the screen. This button's gonna take us to the Compose screen.
We'll choose Compose, make it a Tap, and we'll also make this Dissolve. Click Save, you can click Shift, click, and preview your interaction and we'll continue to build. One thing to keep in mind is that you can point your hotspots to other places. You can have it go to external URLs, you can just have it go to a previous screen in the series, and you can even have it set as a screen as an overlay, which we'll talk about later.
For now we'll make this go to Chat, we'll click Save, and we'll preview. Here we have another template option. Create our template, point this to the Gallery, we'll actually make this Pop, we'll include this in a hotspot as well. Create a new template called Footer. Click Save, and then Save again.
And you can see any template is actually now green. You can also add this, which is actually gonna go to the Home screen into the template as well. We'll click Save. We'll add this template to other screens, we'll click Done, we'll move forward with our arrow keys through our prototype. We now wanna replicate an attachment.
So we'll create the hotspot, click Attached, Pop, click Save. We'll move forward with our arrow keys through our prototype and now we have our Menu screen. We'll hotspot this, make that go to Home, click Save. We don't have a Profile screen but we'll create that later. Go to Compose, click Save.
Gallery, click Save. And then we'll actually set the X to go out to Link Black/Close. Click Save, we'll move forth, and now our prototype has been built so we can quickly preview it by clicking PREVIEW MODE. You can interact, and that's how easy it is to take your designs and make a quick prototype as if it was written in code.
- Creating your InVision account
- Adding linked screens, overlays, and transitions to prototypes
- Creating and customizing a board
- Sharing prototypes and boards
- Collaborating and commenting
- Integrating with Photoshop and Sketch
- Using the InVision mobile app