In this video, Nathan Manousos shows how to add simple interactions to your prototype by linking layers to screens. He covers layer links and drawn links. He shows how to access the preview window to test out the prototype as links are added. The concept of a home screen and how to set or modify it is also discussed.
- View Offline
- [Voiceover] Okay, I've got all my design inside of Flinto for Mac. A good first step is to make sure that I've set my home screen correctly. The home screen is the first screen that will appear when I run my prototype, and it's marked with this little home icon, in the upper left corner of the screen. To change which screen is the home screen, select a screen and click the home screen check box in the inspector. You'll see that the home icon moves over to that screen, so I'm just gonna move it back to the start screen, cause that's what the home screen in this prototype is supposed to be.
The goal of making a Flinto prototype, is to go from static designs, to something interactive. To do that, we make links between the individual screens, so when I tap a button, I'll be taken to another screen, and this is really easy. Click on a button, and then click Create Link, in the toolbar, and then choose a target screen, by clicking on any of the other screens in your prototype. Some options will pop up, but we'll talk about what those all do in the next video. For now, just click Done. To see if this worked, open the preview by clicking the Preview button, in the toolbar, so I'll tap that menu button, which I assigned a link to, and I'm taken to the next screen, as expected, so that's great, but I don't have any way to get back to the home screen, so we'll add a link into this screen to take us back, but you can also click the home screen button to get back to the home screen, in the preview at any time, so we don't have any way to get back to the start screen from the menu screen, so I'm gonna create a link on the menu screen that goes back to the start screen, and this time I'll do it by clicking the Draw Link button in the toolbar.
Which lets you click and drag to create a link of any size and shape that you want. I'll target the start screen, and dismiss the options. By drawing a link, you can make a link that's a little bit bigger than the button, so you have a more comfortable tap target. It's also handy if your link spans multiple layers. Now that I've got this new link, I'm gonna click the Preview button again, up here in the toolbar, and test it out, so the menu button works like before, and my new link here on this close button takes me back to the main screen.
You can link together all the screens of your prototype really quickly like this, and it's actually quite useful this way, but Flinto lets you take it much further by adding custom animated transitions between the screens. Also note that the same preview we see here in the preview window, can be viewed on your IOS device by installing the Flinto viewer app.
- What is Flinto?
- Importing designs into Flinto for Mac
- Linking screens
- Designing transitions
- Reusing transitions
- Adding scrolling content
- Previewing and sharing your prototype