Another tool of this type which I didn’t have time to test is Framer, which combines design tools similar to Sketch, with a code-based approach to creating animation. Hard to learn and to master, they can be great tools in the hands of an animator, but aren’t necessarily designed for rapid prototyping, since they lack automation features and pre-made libraries to speed up the prototyping work. Origami takes a programmatic approach to animation, by linking attributes and triggers to individual nodes, which combine in tree branches to create the interaction states.ĭue to their focus on flexibility, they are also overwhelming and potentially overkill. After Effects explores animation through the perspective of time, by placing each layer and attribute change to an editable timeline. While boasting completely different animation paradigms, they are both designed to create an animation down to the finest detail, and to that end give you complete control over each animation attribute. Within the tools designed for flexibility, I would include After Effects and Origami. Other tools I have previous experience with will also be mentioned along the way.Īll the tools tested had varying degrees of flexibility and effectiveness, depending on their main goal: to create pixel perfect complex animations, or to quickly prototype an animated interaction.
#Flinto examples download#
The goal was to download each tool, follow some tutorials to learn the basics and create the prototype in less then a day each. The tools I tested were: After Effects, Principle, Atomic.io, Proto.io, Origami Studio and Flinto. Within this short time-frame, I decided to evaluate 6 tools, and committed to reproducing the general animations in all of these – to properly establish how well they would fit our workflow. Fine-tune timings for animation triggers.Manage numerous layers and groups imported from Sketch.
Control clip size and position of masked shapes.Manipulating size, position and rotation of shapes.To conduct this casual experiment, I came up with a sample design that uses very simple, non-obtrusive animations that were meant to highlight some of the different features/limitations of each tool: As a designer trying to focus on the busy day-to-day of a project, it’s hard to fit experimentation with new tools into the workflow, and to commit to using new tools for your project.įortunately, this past week I had the chance to try out some of the tools that have popped up lately, and get a sense of what they offer and how they can serve the types of projects we do at Scott Logic. In the last few years prototyping tools, in particular those focusing on animation, have seen tremendous growth.
0 kommentar(er)
