• Principle For Mac Vs Flinto

Our Yalantis design team loves trying new prototyping tools. We’ve worked with, and many others. But our team has a particular affection for Principle. We published a brief of this tool on our blog before, and now we’ll dig a little deeper into Principle’s possibilities and share some hacks and hidden possibilities we’ve discovered while working with Principle.

Paged Scrolling. Learn how to use paged scrolling to swipe between screens of a design and use drivers to make a position indicator. The video also has tips for using the preview window and keyboard shortcuts to make recording easier.

Use Circular Motion I used to think that Principle could move objects only in a straight line, and I felt somehow limited by that. Then I came across a prototype made in Principle that featured an object moving in a circular trajectory! As it turns out, Principle has secret feature never mentioned in the Principle’s official guides: you can apply a circular motion to an object if it is included in a group. To make this happen, you should move an object or a group of objects into a shape with 0 percent opacity, and then turn off the Clip Sublayers (objects will move beyond the object’s border). Now, when you set a shape’s rotation, an object or a group will move in a circle.

You can also set an arc movement, an oval orbit and so on. To do that, just set the movement for the whole group. Here’s how it looks in Principle: And here’s how circular motion can be used for a preloader animation: 2.

Don’t neglect outlining the flow When designers want to realize a prototype idea, they tend to focus on one cool animation that they consider the prototype’s heart and soul. However, while trying to make that one animation perfect they often neglect other elements, and eventually find the prototype to be inconsistent and unfinished. This usually leads to numerous edits in a source file, and that’s never a pleasant thing. To avoid such situations and save yourself a lot of time and nerves, you should always thoroughly plan the whole prototype’s flow. First, make a blueprint of the future prototype on paper (or make it as a flowchart), then design it in Sketch or Photoshop, showing all transitions between screens.

The screens can also include all interim states like scrolling, movement, translucency and so on. Planning the flow will help you understand in advance which elements should be clickable. This will allow you to avoid logical inconsistencies in the prototype’s flow. The flow of one of my Dribbble shots 3. Select a suitable resolution Make sure the size of your Principle document matches the rules of the platform you will demonstrate your prototype on. For example, to prepare a live preview for a client, you should make a prototype in @2x or @3x, while for a Dribbble shot @1x would be enough.

Hence, on Dribbble, your prototypes won’t downsample, and they will look good on a device with high DPI as well. If you don’t take these parameters into account, enlarging or reducing the resolution of your project afterwards will be quite problematic. Use vector objects and texts Everything is quite simple when it comes to using texts and vector graphics. They save time while prototyping and editing. They also positively affect the final image quality.

There’s one caveat to vector graphics in Principle, however: you’re limited to creating rectangles. You can change fill colors and stroke, and can round corners. It’s not much, but you still shouldn’t disregard vector objects: the import of bitmap assets affects your further work with the prototype and puts limits on 1) masks using, 2) resolution changing, 3) applying changes to the prototype’s logic, and 4) assets updating.

Don’t forget about groups Like any decent tool, Principle loves order. That’s why it’s important to name and group all interrelated objects right when you create them. Quite simply because an object placed into a group can move both with the group and in relation to the group. If you group objects at later stages, you’ll probably run into some problems. Also, consider that you can apply drivers to several “highlighted” or “grouped” objects at once, which makes prototyping much simplier.

Use Masks By moving objects into a group or shape, you can turn on and off the Clip Sublayers parameter. Thus, you can create a mask for one or several objects. Of note, the same group can be a mask or not be a mask depending on the artboard it’s on. This feature alone provides a lot of room for creativity. Creating a mask in Principle 7. Divide actions into parts Another particularity of Principle is that it’s quite difficult to achieve complex interactions using only default solutions and tools. For example, I faced problems trying to implement paging of separate elements that animate when you drag them.

Principle For Mac Vs Flinto

The same issues appear when you need to include several simultaneously animated objects. To solve this problem, I decided to break actions down into component parts, where the first part of an animation starts when you interact with the interface, and the second part happens when you release the finger. You can achieve that by experimenting with Drag Begin/Drag End. Therefore, you get the following chain. Screen 1: Drag Begin. Screen 2: Animation 1 – Drag End.

Screen 3: Animation 3 In the same fashion you can divide actions for object animation while using Scroll Begin/End/Release. To achieve smoother and more natural animations, I suggest using the interim state drivers for active and inactive objects. Card swiping I achieved using drivers and not implementing paging 8. Balance motion graphs and timelines Working with animation timings and graphs is pretty much like working with text. In order to accelerate and streamline your workflow in Principle, you should consider the following key points:. The order and the logic of actions.

Balance in actions speed. Animation graphs. Actions must be precise, logical and subtle.

What’s important here is not to overdo bounce (spring), and to follow the logical rhythm. I highly recommend you study what. Make the impossible possible with substitutions and images One of Principle’s biggest drawbacks is that it doesn’t provide any means to morph vector objects.

This is where Principle loses out to After Effects and Apple Motion. But there is a workaround. Think through the animation’s logic, break it down into components, then use masks and put your objects in the appropriate order. The preloader we mentioned above is an excellent example of how this can be done.

Also, to achieve a fancy distortion effect, you can substitute objects at the moment of animation by giving them the same names on the connected artboards. That works for groups as well. Here’s what it can look like: Source: 10. Use tricks while importing There are several ways to import materials for your prototype into Principle:. Drag and Drop directly from Sketch.

Create an image library in an appropriate format. Import from Sketch function. The latter appeared in the recent 1.1. Update and made the process of importing much more comfortable. To use this function you must have your project’s design file opened in Sketch. Great thing here is that you can choose desirable resolution for your project. The main drawback, though, is the impossibility of importing separate artboards and pages.

How to import your artboards to Principle? Here are some tricks:. You can update images simply by dragging them from Finder to the Image menu on the right-hand panel. Drag and Drop from Sketch imports an element while preserving its original size. It’s very convenient to use an element’s coordinates from Sketch to organize elements in the prototype.

The coordinates are identical if you use the same document resolution in both apps. Also, copying and pasting two artboards pastes all events between them. This makes your life easier while merging multiple designs and performing repetitive actions. Export prototypes as MOV or GIF In a recent update, Principle acquired extended possibilities for prototype recording and exporting into MOV and GIF formats. While MP4 is easy to understand, working with the GIF format may cause some issues. While Principle’s developers managed to decrease the size of GIF files significantly, the format is still heavy and unadjustable.

Personally, I prefer the following long but effective approach to creating GIFs for my prototypes:. Record MOV. Assemble video and mockup in After Effects. Export it as a PNG sequence.

Using Adobe Photoshop, assemble the sequence into a GIF animation and adjust its size and quality according to requirements. Also, you should decide which cursor to use while recording the prototype. Starting with version 1.1. Principle allows you to include a tap animation, but unfortunately it still can’t visualize Force Touch. That’s why I prefer to record without a cursor and add it afterwards in After Effects. What’s also cool about Principle is that you can always provide the original file and another designer or a client will be able to open and test it using the. Final advice: Always keep experimenting and researching Most of what I have written here I’ve learned by experimenting with Principle’s tools and by studying works of other designers.

And, as experience shows, this is a great way to discover Principle’s hidden potential. Here’s my final advice: always experiment and seek unorthodox solutions to tough problems. Some valuable and inspiring resources for working with Principle.