FLINTO LINKING FROM BEHAVIOR TO SCREEN PRO

That’s huge! That means you can push tiny iterations and incremental changes to the app without bothering your users or constantly sending new links! 6. As long as the link URL isn’t re-generated, any changes you make to the prototype will be reflected next time your user opens the app on their device.

Enabling iOS 6 Mode may be necessary if your client uses this OS.Īccess This menu by holding down on any screenĢ.

Select or deselect tap highlights (useful especially when only a few elements on a screen are linked). You can also set the frame style when the prototype is viewed on desktop.

In the ‘Share’ tab, set the status bar style (this will be seen once on the phone.

This looks great when the prototype ends up on the iPhone homescreen But before you do, go into ‘Settings’ and check off a few things: Now you’ve built your prototype, how do you get it ready to share with your colleagues and client? And what’s left to do before your share?Įssentially your prototype is ready to shared at any time.

FLINTO LINKING FROM BEHAVIOR TO SCREEN PRO

See the final section for more pro tips with Link Groups. I found this feature considerably extended the usability of Flinto for my projects. Pro Tip: When you create the bottom menu link, dropping it on longer screens automatically aligns to the bottom of the screen, regardless of it’s length. You can also ungroup links on a particular page by selecting it and clicking ‘unlink’. When you change the linked screen, it will change it across all linked groups. Now grab the link and drop it onto all the other screens that share the destination screen. Simply create your hotspot and link as usual. And what happens if you want to change the link across all the pages? Thankfully we can use ‘ Link Groups’ for this. It’s all well and good to link one page to the next in a linear flow, but what about times you might want a menu or hotspots that link consistently to the same place (as with our bottom menu button).

You can be smart and set a 1 pixel colour in your design if you want to control it’s look and feel. Pro Tip: Flinto uses the top and bottom pixel colour so that you have a nicer blanking area when you over-scroll. Once that’s set, hit preview and you should now be able to scroll the page content while keeping top and bottom bars fixed. I add button graphics and include any elements that will act as a link hotspot in my final prototype.ĭrag the pointer and Flinto will automatically snap to the right location Once I’ve developed the design concept and worked through the initial flow for my prototype, I go about creating a selection of static screens that I will later link together. Pro Tip: I find the mighty Teehan+Lax iOS templates to be incredibly helpful, though I must confess to re-building most of the assets in illustrator for control and scalability. Next design your first round of screens using your preferred method. I begin by setting up a bunch of Artboards in illustrator with the right width and initial height of 1136px. Find other resolutions for iPhone and iPad here. Flinto will automatically fit the screens to the device width, but it’s good practice to start with the correct size wherever possible. For me it’s been Illustrator ever since my early days designing flash websites! Whatever your chosen method for designing/preparing the screens, the important thing is to ensure the width is 640px for retina screen iPhones in portrait and 1136px for landscape (iPhone 5 and above). For others it might be Photoshop or Sketch. For some it might be about doing quick paper sketches and snapping them with a phone. Everyone can adopt their existing approach for designing the static screens.

Flinto linking from behavior to screen