Quick iOS Prototyping In Flinto

There are many iOS prototyping tools out there: Briefs 2, POP, Prototypr just to name a few. The one that really struck me as the most efficient is Flinto by far. Ironically, it’s the only Web-based tool amongst them. And there is nothing better out there. It will literally take minutes to create a prototype that looks like it was made using Xcode Storyboard.

Check out the Heyzap Prototype made in Flinto. It’s even better on the phone.

Super Smart Editor

Once the project is created, all you have to do is drag and drop all your screens. The editor will take care of smartly getting rid of the status bar for you.

If you’re a geek like me, you’ll appreciate how there is zero loading indicator.

Connecting Screens

There will be several “Aha” moments here. Once you have your screens ready, you will want to connect them. Instead of drawing the clicking regions manually, Flinto can auto-detect those regions by holding the Option key while pointing with your mouse. Crazy, right?

Now move your mouse to another screen and click. In the process, you’ll notice a fun orange line that curves and follows your mouse pointer. First of all, what the hell, Web apps never do that.

Transitions

Flinto has all the transitions you’d expect from an iOS app: Push left & right, Modal slide up & down, Flip left & right, Fade In and none. What’s particularly interesting about Flinto is that since it removed the status bar from your screens, all those animations will look perfect. The last thing you want is to have the status bar slide up with the content itself.

The Back Button

In iOS, the back button behavior is extremely common. All it’s supposed to do is reverse the animation from the previous screen. You don’t always want to pick a custom animation for it. To solve this, Flinto has a Link Back option that works beautifully.

Scrolling Content

Unique from its competitor, Flinto allows you to upload screens taller than the iPhone’s screen. They will simply be scrollable.

Preview

While building your prototype, you’ll be able to quickly preview your App by going to the Preview mode. It’s fairly straightforward but insanely useful since the process of installing on your phone may take some time.

Web App Settings

To make your prototype act like a real App, Flinto allows you to customize the icon and the Startup screen. While this step is optional, you shouldn’t skip it. Your App will look and feel better with those assets in place.

Fast Sharing

Web applications usually never reach the level of polish and interactivity as its native counterparts. Usually. Flinto is something else. It has the convenience of a Web tool, with its effortless sharing options that allows you to email your prototype and install to your iPhone from a simple link. It works like a real App, you won’t even see the browser bars and it will be completely responsive.

The prototype will be installed as a Web App.

Previewing On The Web

Sharing is fun. Unlike Briefs 2, Flinto enables you to easily share a Web link publicly. So, here’s mine.

Free To Try

I try to never judge a product before trying it. Just like Sketch, this 2-man product outshines its competitors. Just like Sketch, this product is 10 times more affordable than its competitor. Give it a try, you’ll be amazed at how intuitive it is.