Nowadays, prototyping tools can be found in pretty much any screen design software. This is for good reason, because creating high-fidelity prototypes is a vital part of any design process.
Let’s see how prototyping works in Studio.
Nowadays prototyping tools can be found in pretty much any screen design software, and for a good reason. Creating high fidelity prototypes is a big deal. Now let's see how this works in Studio and if it's any good. So I have four screens here from the same UI kit I mentioned in a previous lesson. You can also find the link in the lesson notes. And I wanna create some simple interactions, a simple prototype that shows the basic workflow or the basic flow of my app. So for example, I would like to click on this album and take me to the track listing of that album. And then I would like to click on this song to take me to the player. And I'd like to click on this icon here to take me to the play queue. So let's make that happen. To add one of these interactions, you select your trigger element. In my case, it's this group right here. And then using the tool bar on the top, you hit add interaction or use the shortcut C. That's gonna give you a cursor and it can hover over any artwork that you want to link to. In my case, I'm gonna link to Track Listing. This asked me what is the trigger. In my case, let's say Click, but you can also choose from a mobile version of Tap. Let's actually do Tap. It asks me what screen to navigate. I already set that, and it asked me for the transition. Now we have two transition types here, Preset and Motion. Preset gives me access to your traditional transitions like fades, slides, pushes, and stuff like that. Motion is what we're gonna talk about in the next lesson. This adds more complex animations. For now, let's choose Preset, and let's choose a Slide right or Slide left. Lets choose a Slide left and save. So now when I click Preview, this is gonna open up the prototype preview. And when I click on Ghost Stories, my new art board slides in from the left showing me track listings. Now once I'm here, I also want to link this button to my previous art board to go back. So I'm gonna select this button, press C, link back and for the transition type, let's choose Slide right this time. And hit Save. So now, We have a simple prototype. Let's do some more interactions. When I click this song, it's gonna take me here. Let's do Slide up > Save. And when I click here, let's go to the Play queue. We'll just slide down. And when I click this, let's go back to the player with a Slide up, and save. So now if we view our prototype, That is really, really cool. Now once you're in this mode, you have a couple of options. You can change the view port size. And you can also change the appearance. If you want to preview this as a device you can do that, no problem. And changing the size, let's do an iPhone 8+, for example, will change the size of the prototype. But if this is built in a static way using pixel values, then you won't get a responsive appearance. So just keep that in mind. Now we can also preview your prototypes on a real device. You can click this icon mirror to devices. That's gonna give you a QR code. Then you would go to the app store for either IOS Apple or Android, download the Studio app or the InVision app. Then you will scan this QR code, and the devices will then be linked. So any changes that you make here will be reflected in real time on your device, which is a really cool way of previewing prototypes. So that was a quick demo of prototyping in Studio. Very straightforward, very simple to use. Now, I mentioned something about emotion transition, and that's actually the best part of the whole prototyping experience. Because what motion does, is it animates elements or the properties, the different properties of elements between screens. So we'll have a closer look at that in the next lesson.