<p>Published on <a href="http://ift.tt/2piqpyf">| Prototyping: From UX to Front End &mdash; Medium</a> Vitaly Dulenko <img alt="" src="http://ift.tt/2o6swF8"></p>
<p>For several years I have used After Effect for animating my designs. I think almost everyone knows how cool is this app for animation but not for prototyping. If you use Sketch, you have some issues while preparing your work for animation.</p>
<p>So I decided to get additional animation and prototyping tool but stacked with a problem — what modern tool to choose — Flinto, Principle or Kite Compositor?</p>
<p>To find out what tool is best for me, I decided to create the same animated prototype in all three apps. I designed 3 app’s screens in Sketch and downloaded trial versions of these apps.</p>
<p><img alt="" src="http://ift.tt/2pFi8S3">My Sketch file</p>
<h3>Principle</h3>
<p>The first one was <a href="http://ift.tt/1Nl2yD4">Principle</a>. It’s well-known and trending prototyping tool and there are a lot of tutorials and examples for inspiration.</p>
<p>First, I have watched short tutorials on the Principle’s <a href="http://ift.tt/1hwA8ZS">website</a>. After this, I was ready to start. I imported my Sketch file into Principle and began to create my first prototype. Principle is a very intuitive app, easy to understand and you can see the result immediately.</p>
<p>That’s the result:</p>
<p><img alt="" src="http://ift.tt/2o6ptNf">Animated prototype made with Principle</p>
<h3>Summary</h3>
<ol>
<li>Time to complete task ~4 hours.</li>
<li>Did I complete all I wanted — YES.</li>
</ol>
<h4>I liked</h4>
<ol>
<li>The app is very convenient and easy to learn.</li>
<li>You can import and update your Sketch files.</li>
<li>You can export your animation as video (.mov) or .gif (with settings for Dribbble, awww ?).</li>
</ol>
<h4>I didn’t like much</h4>
<ol>
<li>You have to be very careful with layers naming as I had some issues with it when Principle converted Sketch symbols with the same layers names.</li>
<li>You have to create separate artboard for every animation states. As a result, you may get a bunch of artboards and animations arrows that might be confusing and time-consuming to consider.</li>
</ol>
<p><img alt="" src="http://ift.tt/2pF2qWI">My Principle’s file</p>
<h3>Flinto</h3>
<p>The next was Flinto. It’s also very popular and widely used app. To get familiar with it I watched cool tutorials <a href="https://www.youtube.com/playlist?list=PLWlUJU11tp4eh1sLw2VTuc5CuZDPNnsBr">Flinto Crash Course</a> by <a href="http://ift.tt/2hfjfG4">Pablo Stanley</a>. They are so useful that I have immediately started creating my second prototype.</p>
<p>As for me, Principle and Flinto have similar interfaces and the basis of work so I spent less time working with Flinto. I didn’t meet any troubles to recreate the same animation.</p>
<p><img alt="" src="http://ift.tt/2pF4oXr">Animated prototype made with Flinto</p>
<h4>Summary</h4>
<ol>
<li>Time to complete task ~3 hours.</li>
<li>Did I complete all I wanted — YES.</li>
</ol>
<h4>I liked</h4>
<ol>
<li>The app is intuitive to use and easy to learn too.</li>
<li>You can import your Sketch files via Flinto plugin.</li>
<li>You can export your animation as video (.mov).</li>
<li>You don’t have to create artboards for every animation states.</li>
</ol>
<h4>I didn’t like much</h4>
<ol>
<li>As all animations are hidden in transitions and behaviors, you may spend the time to identify the structure of animation and find the necessary transition.</li>
</ol>
<p><img alt="" src="http://ift.tt/2o6Ciar">My Flinto’s file</p>
<h3>Kite Compositor</h3>
<p>And the final was <a href="https://kiteapp.co/">Kite Compositor</a> — new prototyping tool created by <a href="http://ift.tt/2pFk0dw">Joe Rhodes</a>. Because of its novelty, there are few tutorials about this app. Kite Compositor uses another animation principle — you create timeline animation and then add triggers to run the animation — such as gestures, event etc. It’s more like After Effects where you can animate any element’s property you want.</p>
<p>At first, Kite Compositor wasn’t easy and I had to spend a time to understand the basic principles. But it was worth it and then I worked faster. I believe that Kite Compositor has great possibilities to growth and develop. As a result, I created this animation:</p>
<p><img alt="" src="http://ift.tt/2o6qFjD">Animated prototype made with Kite Compositor</p>
<h4>Summary</h4>
<ol>
<li>Time to complete task ~6–8 hours.</li>
<li>Did I complete all I wanted —ALMOST.</li>
</ol>
<h4>I liked</h4>
<ol>
<li>The app is very powerful, you can animate everything.</li>
<li>You can import your Sketch files.</li>
<li>You can export your animation as video (.mov) or .gif.</li>
</ol>
<h4>I didn’t like much</h4>
<ol>
<li>You have to spend some time and efforts to understand the animation principles.</li>
<li>No much tutorials.</li>
<li>I couldn’t create the full animation (but I believe I could if I spent more time).</li>
</ol>
<p><img alt="" src="http://ift.tt/2pFi9p5">My Kite Compositor’s file</p>
<h3>Conclusion</h3>
<p>In 3 days I have learned 3 animation tools. So what is the best? My opinion— the one that helps you achieve your goals (so boring answer, bro ?). The main thing is to find solutions for client’s and user’s need, and all of these apps can help you with it. All of them are powerful, so it’s up to you and your team what is better. Thanks for reading!</p>
<p><img src="http://ift.tt/2o6nGYF" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2pF8gaz">What to Choose: Flinto, Principle or Kite Compositor?</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


What to Choose: Flinto, Principle or Kite Compositor?

Top Stories