#Timing animations in flinto series#

This provides little visibility of the entire mocks we imported, which were often over 50 images. In Invision, you only see a single page in a browser then select the file name you want to link in a dropdown menu. The only reason we didn’t go with Invision is that it’s not as easy to manipulate pages. Just like Flinto, you can drag-and-drop multiple images and create hotspots to make an interactive prototype in minutes. It is easily sharable, highly collaborative, is optimized for mobile, offers syncing, and has version controlling from PSD files. Invision is a close second to Flinto, and shares many of features we like in Flinto. This simple progress bar with success message animation required eight mocks and still appeared really choppy Invision For instance, the animation of a progress bar needs to be divided into many images and renders choppy rather than as a smooth animation. Just like the other tools in this category, Flinto does not offer smooth animation on a page. Flinto is extremely easy to use, and you can build a prototype in mere minutes. This means whenever we make changes to a mock in Dropbox, it will be automatically updated in Flinto as well. We also find the Dropbox syncing feature in Flinto exceptionally useful, as we are able to save our mocks in Dropbox.

Whenever we make changes to a mock in it will be automatically updated in as well We have UI elements, style guide, and screenshots ready to go. With every release we build an exciting feature for an existing app rather than building a completely new one. First, most of our apps are at a stable stage. Flinto works best for us for several reasons. FlintoĪfter some consideration, we decided to use Flinto instead of other tools in this category. However, these tools do not offer an ability to fine-tune fancy animations or control a single component within the page. Since all of them support drag-and-drop with intuitive navigation, there is virtually no learning curve. These tools are best used for showcasing the entire flow for a big feature or an entire app. Using these tools, you can create multiple pages or import your static mocks, and then easily create hotspots to link to the next page with nifty transitions. Page-based tools include Flinto, Invision, Keynote and Fluid UI. This article will focus on two page-based prototyping tools as they offer the easiest adoption out of three categories, in future articles, I’ll explore layer-based and coding-based options. Tools in each category share distinctive features as well as pros and cons. Types of Prototyping ToolsĪfter extensive research, I divided prototyping tools into three categories: page-based, layer-based, and coding-based.

#Timing animations in flinto series#

The tools that I’ll introduce in a series of two articles are ones I found discussed most often in UX groups online along with those that many experts and designer peers thought would best suit our needs. The most important criteria are: mobile friendly, easily sharable, no learning curve, and highly interactive.

This is why I’m on a mission to find a perfect prototyping tool that meets the need of all the product designers at my company. Now, the company has taken on more ambitious features, leaving designers and engineers less time for prototyping. When the company was still small, product designers used to prototype with engineers, sitting side-by-side and exploring new possibilities. We make a slew of mobile music apps that let users create their own content, whether that’s singing via karaoke, rap battling, or playing a piano. I recently had an opportunity to research prototyping tools for my company, Smule.