This will allow you to avoid logical inconsistencies. Planning the flow will help you understand in advance which elements should be clickable. These screens can also include all interim states like scrolling, movement, and translucency. First, make a blueprint of the prototype on paper (or as a flowchart), then design it in Sketch or Figma, showing all transitions between screens. To avoid such situations and save yourself a lot of time and nerves, you should always thoroughly plan the whole prototype flow. This usually leads to numerous edits in the source file, and that’s never a pleasant thing. However, while trying to make that one animation perfect, they often neglect other elements and eventually find the prototype to be inconsistent and unfinished. When designers want to bring to life their ideas, they tend to focus on one cool animation that they consider the heart and soul of their prototype. Here’s an example where we’ve applied Principle’s circular motion feature to create an animation: So, to set a circular motion for an object, we first need to include this object into a group, move it to the side relative to the content area on the initial animation screen, and then set the rotation angle on the final animation screen, then you can loop animation and play with the speed and easings of the animation so that it is looked amazing. Then I came across a prototype made in Principle that featured an object moving in a circular trajectory!Īs it turns out, Principle has a hidden feature never mentioned in the official guides: you can apply a circular motion to an object if they’re grouped together. I used to think that Principle could move objects only in a straight line, and I felt somehow limited by that. Now we’re going to dig into Principle’s possibilities and share some hacks and hidden capabilities we’ve discovered while working with this tool. Over the years, our Yalantis design team has worked with many prototyping tools including Flinto and Pixate.

Flinto path animation