May 25 2013

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.

intro

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.

create

upload

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?

connect

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.

transition

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.

back

Scrolling Content

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

scroll

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.

preview

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.

settings

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.

share

The prototype will be installed as a Web App.

flow

Previewing On The Web

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

web

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.

0 tweets

144 responses to “Quick iOS Prototyping In Flinto”

  1. Quick iOS Prototyping In Flinto: http://t.co/l7Tfbym956

  2. @naan says:

    Great write-up for making prototypes with @flinto: Quick iOS Prototyping In Flinto by @MengTo: http://t.co/hFGB17bPoa

  3. @chaodoze says:

    Quick iOS Prototyping In Flinto http://t.co/6WVS6HLizv via @zite

  4. Will says:

    Flinto looks great for simpler apps. I’ve found proto.io to offer better tools if you need to test more complex interactions like swiping specific objects on a screen.

  5. @androigirl says:

    Great tool for iOS prototyping – a pity that I can not yet use it for Android: http://t.co/CybRY7aqyQ

  6. @wmenge says:

    Quick iOS Prototyping In Flinto http://t.co/cddYPq8orx via @zite

  7. Quick iOS Prototyping In Flinto http://t.co/dqP52GttXV

  8. @hnbreaking says:

    Quick iOS Prototyping In Flinto http://t.co/uc9z4kRwu0

  9. @ctof says:

    Quick iOS Prototyping In Flinto http://t.co/g9FKIKt00g

  10. Jan says:

    Have been trying out Flinto for a month now. Clients rarely notice that it’s not a native app. It has improved my workflow significantly. Can’t wait for further updates. Hope they’ll get around to adding fixed nav and tab bars soon. And there are still a lot of bugs, for example when the order of screens is all jumbled up after you’ve left the editor.

  11. Quick iOS Prototyping In Flinto http://t.co/yYW5P1C6om

  12. Ian Hannigan says:

    Please give http://www.fluidui.com a try too. Great for quick app prototypes and the editor is very simple and fast to use.

    Cheers,
    Ian

  13. @axxou says:

    Quick iOS prototyping using Flinto • cc @The_Minh http://t.co/V13mRlHGM6

  14. @tek_news says:

    HNews: Quick iOS Prototyping In Flinto http://t.co/nfflGYHNm7 #ios

  15. @mkhoury says:

    Quick iOS Prototyping In Flinto http://t.co/fPGOKbWH7f via @zite >> worth a look @airmilesowl ? Free trial too.

  16. @emarkensten says:

    Quick iOS Prototyping In Flinto http://t.co/BZfEUCwhOU via @prismatic

  17. @c0up says:

    Quick iOS Prototyping In Flinto http://t.co/5b7JuZ6jJy

  18. jensnikolaus says:

    Agreed, it‘s also my favourite at this point.

  19. Quick iOS Prototyping In Flinto via Meng To: http://t.co/hw1PJmE5Zn

  20. @erickhill says:

    Quick iOS Prototyping In Flinto http://t.co/c6QZs3TJj6 @trafnar #flinto

  21. @rickerlr says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/lcN4dI1F2n

  22. @Badruddeen says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/3s692pRAH6

  23. @mocy says:

    Quick iOS Prototyping In Flinto http://t.co/sJRIJNRCNe

  24. @baires says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/ZcV5UvWA2s

  25. Quick iOS Prototyping In Flinto http://t.co/vfhCLJe325

  26. @brad_budde says:

    Hey @carlomcastillo and @jemreal, have a look. “@ASocialFace: Another nice ios prototyping tool. http://t.co/ZtfIY3kM1j”

  27. Quick iOS Prototyping In Flinto by @MengTo: http://t.co/v8fJrTxYDp

  28. @EimanAbdel says:

    @myen Quick iOS Prototyping In Flinto http://t.co/yCWRLQLYXE via @prismatic

  29. @simounma says:

    Try iOS Prototyping In Flinto http://t.co/ofwT8lWBna

  30. @tangandrew says:

    Quick iOS Prototyping In Flinto http://t.co/8rG9AoOBRr

  31. Quick iOS Prototyping In Flinto http://t.co/lMM6kx5ZBQ

  32. @inmmnd says:

    Quick iOS Prototyping In Flinto http://t.co/C8q3DoLotC #UX #iOS #UI

  33. @cutmail says:

    Quick iOS Prototyping In Flinto | Meng To – UI/UX Designer http://t.co/MZnlrLtkpa

  34. @Thyler says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/J71PqRTKhU

  35. @AndrewSchar says:

    @iaanvn Thank me later… http://t.co/6jzhJd9KkR ;)

  36. Quick iOS Prototyping In Flinto | Meng To – UI/UX Designer http://t.co/F6y9dfsAHr

  37. Quick iOS Prototyping In Flinto http://t.co/z7tn7KsIPz

  38. @7dayNewme says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/l79vvbLbzt I am going to buy after 30 days i have used.

  39. @andropink says:

    Quick iOS Prototyping In Flinto | Meng To – UI/UX Designer http://t.co/zTBYiizdP0

  40. Alex says:

    Wow, thanks, looks like i need it right now :-) and thanks for the tips.

  41. @kobusb says:

    Quick iOS Prototyping In Flinto: http://t.co/4AZuFJZa0E

  42. Quick iOS Prototyping In Flinto by @MengTo: http://t.co/bO6QcVPFKC

  43. @ghaffarian says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/WBjCCe0eL3

  44. @cloanic says:

    Quick iOS Prototyping In Flinto http://t.co/R2Su4Py8Vk

  45. Quick iOS Prototyping In Flinto http://t.co/S9up3smMu2

  46. @NickisNoble says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/JQYMKcjxz0

  47. @moosesyrup says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/5OJFnWFp49

  48. Islam says:

    It’s pretty simple compared to other prototyping tools, I have tried Axure it’s a bit complicated but the results are amazing, I’ll give flingo a try, from what I saw it seems to be easier and faster than other options available.

  49. Juraj says:

    I was wondering if you can turn off the hotspot rectangles. Also, can you imagine simulating typing with Flinto? (animating the keyboard). Working on a prototype for a product video and using TAP because of the advanced options… but would love to switch to Flinto. Thanks!

    http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/

  50. Quick iOS Prototyping In Flinto by @MengTo: http://t.co/FRrNhCdwTY

  51. Quick iOS Prototyping In Flinto, http://t.co/pjIJgzmmy2.

  52. @samuelemic says:

    Quick iOS Prototyping In Flinto http://t.co/9f1IvlzRUV

  53. Quick iOS Prototyping In Flinto http://t.co/Yu16xdOCMX

  54. @RussMatney says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/75LeGo5ffh This looks awesome.

  55. @tfeener says:

    @trafnar nice to see @flinto get some well deserved attention:
    http://t.co/oWjzZQjGcz

    Still need to take it for a spin!

  56. Quick iOS prototyping using Flinto http://t.co/rLUAOAX3mr

  57. @willydennis says:

    Looks legit. “Quick iOS Prototyping In Flinto by @MengTo: http://t.co/c7z6lTsR3j

  58. @Mlprosper says:

    I need to try this. Article: Quick iOS Prototyping In Flinto http://t.co/WbES8bV7D6

  59. Quick iOS Prototyping In Flinto | http://t.co/QByG2yNqEn

  60. Quick #iOS Prototyping In Flinto http://t.co/EW7oTGZSw4 Loving this product for #mobile #product #design and #ux #ui!

  61. @jerome_amat says:

    Quick iOS Prototyping In Flinto http://t.co/HlUuLTB9b5 @margoula @CyrSan

  62. @barrykhan says:

    Quick iOS Prototyping In Flinto | Meng To|UI/UX Designer http://t.co/Av7KEdHoAQ #ux #design

  63. @mntgmry says:

    Quick iOS Prototyping In Flinto — http://t.co/ILgZmvQ2kU

  64. @hackdesign says:

    Quick iOS Prototyping In Flinto http://t.co/UbCtCZZY7S

  65. @ikurilka says:

    Flinto инструмент для ооочень быстрого прототипирования мобильных приоложений. Очень круто! | Meng To|UI/UX Designer http://t.co/zb9qcB2WUt

  66. Quick iOS Prototyping In Flinto (via @Pocket) – http://t.co/RH00i17EXl

  67. @picsel says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/H9CMIOIfWb

  68. @sntaln says:

    Quick iOS Prototyping In Flinto http://t.co/gS6TTTPsUq

  69. @wid0ki says:

    Quick iOS Prototyping In Flinto http://t.co/3vjkZdIR9h

  70. Cool. Quick iOS Prototyping In Flinto. Article with other options too. http://t.co/32RzFTYNNv

  71. @lullaloops says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/YCV50L5Y4H

  72. LarryDavid says:

    Great article again! Really loving your articles (particularly the sketch ones).

    A slightly unrelated question, but do you use grids at all during your design process? In terms of layout/composition. Your designs always look so clean. Thanks.

  73. […] Meng To סוקר כלי מאוד שימושי  לבניית פרוטוטייפס לאפליקציות IOS בשם Fl… […]

  74. […] Meng To סוקר כלי מאוד שימושי  לבניית פרוטוטייפס לאפליקציות IOS בשם Fl… […]

  75. Ram says:

    You should give proto.io a try…. Seriously…it has features like FB like slide bars, and framerJS like easing animation PER element. You can even prototype in it (in addition to importing images and hooking them up)
    I have a 2 week trial, would love to signup if it was a bit cheaper. $24/m is a bit more than I can pay for just 3 projects. I wish they price it a little better..

    Next is FluidUi as someone suggested. Best part of it is the birds eye view of the whole project and has all the features flinto has. It’s free for 10pages but not as sophisticated as Proto.io

    You should try out proto.io before declaring flinto as winner :)

    Ps: not affiliated with either proto & FluidUi

  76. @uxfactory says:

    Quick iOS Prototyping In Flinto | Meng To – UI/UX Designer: http://t.co/YyXxWphHKl

  77. @gmdavisUX says:

    Quick iOS Prototyping In Flinto | Meng To – UI/UX Designer: http://t.co/lykh07GViE #ux #in

  78. I’ve used both FieldTestApp and InvisionApp, but I really like the way this prototyping tool considers transition and animation design.

    Thanks for sharing. I will add it to my ever growing list of useful Mobile Prototyping Apps.

    http://www.griffininteractive.net/2012/07/prototyping_mobile_apps.html

  79. @Jimbola says:

    Quick iOS Prototyping In Flinto by @MengTo: http://t.co/LvCgBSTUJA #Mobile #Prototyping #AppDesign

  80. Flinto is a great click through prototyping tool for iOS http://t.co/Hxb0YY2C0P #UX

  81. @UTguru says:

    Quick iOS Prototyping In Flinto | Meng To – UI/UX Designer: http://t.co/liOTJxz9XZ #ux

  82. Quick iOS Prototyping In Flinto | Meng To|UI/UX Designer http://t.co/I97Qc86iDV #UX #Prototype #iOS

  83. @koolinus says:

    Quick #iOS #Prototyping in #Flinto by @MengTo: http://t.co/O4SZCB614B

  84. @IrisShoor says:

    Cool tool for Quick iOS Prototyping http://t.co/p3jhElqb2N

  85. Quick iOS Prototyping In Flinto by @MengTo: http://t.co/BeY72jlQw1

  86. […] Flinto for quick iOS prototyping (great overview by @MengTo) Check out Nathan Berry’s 25 Free iOS design resources. Try App Design Vault for quality iOS […]

  87. Quick iOS Prototyping in Flinto http://t.co/UwHEQ4y4hZ by @mengto

  88. Quick iOS Prototyping In Flinto by @MengTo: http://t.co/XBQEFvVJTP

  89. Caleb says:

    As soon as I read your “How to Prototype in Xcode…” article, I thought to myself, “what about Flinto? It’s way easier and snappier.” Glad to see ya highlighting this wonderful tool. Thanks again, Meng!

  90. […] übersichtliches Tutorial zu iOS-Prototyping mit dem webbasierten Flinto findet sich auf Meng To. Dieser Artikel richtet sich als Feature-Überblick explizit an […]

  91. Moish says:

    I love Flinto, But what if I want to send the demo to someone who has Android ?? Is there a similar product for Android out there?

  92. Jason says:

    I have to give another +1 to proto.io. I have tried several and keep migrating to it. It’s not perfect but you can create a prototype that is barely distinguishable from an actual app. For that very reason, though, Flinto looks like it could be a better option for rapid prototyping.

    I should also mention Codiqa. The real powerhouse feature of this tool is that it exports your prototypes right into jQuery Mobile. You can take that export, wrap it with PhoneGap, and you have an app. Great tool if you are not building a native app.

  93. […] Flinto sind kostenlos, anschließend werden bei Gefallen $10 im Monat fällig. Schaut euch diesen Blog-Eintrag zum Thema und die Beispiel-Präsentation des App-Entwurfes Heyzap […]

  94. Jigar says:

    I’ve use FLINTO for lot of my projects – now that android version is out – it is a breeze!

  95. Christen says:

    Hi, I think your blog might be having browser compatibility issues.
    When I look at your blog in Firefox, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a
    quick heads up! Other then that, superb blog!

  96. Superior day great internet site! Male. Superb. Astounding. I’m going to save your web blog and also use the rss feeds on top of that? Now i am happy to locate plenty of very helpful details here in the write-up, we really wish for develop added practices in this regard, appreciation for giving.

  97. […] Quick iOS Prototyping In Flinto | Meng To – UI/UX Designer […]

  98. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  99. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  100. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  101. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  102. […] “Quick iOS Prototyping in Flinto65,” Meng To66A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  103. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  104. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  105. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  106. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  107. […] “Quick iOS Prototyping in Flinto65,” Meng To66A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  108. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  109. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  110. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  111. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  112. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  113. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  114. […] “Quick iOS Prototyping in Flinto65,” Meng To66A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  115. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  116. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  117. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  118. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  119. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  120. Darshan says:

    It’s really good to read your blog. I totally Agreed. Flinto looks great. Thank You for sharing. :)

  121. Ujjwal Verma says:

    Hi Meng, my question might sound stupid. Actually I am new to app development. I was just curious to know that if we make a good prototype in Flinto or for that matter on any other prototyping app with all fancy screen transitions, and the client approves the prototype, how do we achieve the same effects ( screen transitions and animations ) in the real app. Does Flinto generate any kind of source code for transitions ??

  122. MFC says:

    Hi, I like your blog

  123. Nicole Pary says:

    I’m also iPhone lover, which are addict of these kinds of technology. After reading this post getting more information from this post and knew about flinto or how its work. :)

  124. In these kinds of tools is more admirable, getting more information of different kind of post, to know that what is quick ios prototyping flinto and how its work, thanks for sharing, getting bunches knowledge from it.

  125. […] “Quick iOS Prototyping in Flinto65,” Meng To66 A decent exploration of how to get prototyping in short order with Flinto. It even has classic iOS 6-style designs. (Ahh, nostalgia!) […]

  126. amazing blog post.Thank’s for the post.

Leave a Reply