An easy trick to end up with Crazy Flying objects at Principle for Mac

Have you ever got this when doing an interaction at Principle?

This is the kind of Crazy Flying objetcts I am talking about.

Principle is a great tool for Interaction Design. It allows us to show our client and developers how we want our app to look and feel. It is easy to use, a perfect match to Sketch and we can do simply and complex micro-interactions. For example, we can do and export this in just 30 seconds:

But we need to understand how it works. Principle is based in element’s name. When we have two elements in a different Artboard with the same name, it considers it is the same element and Principle does the best to show an easy flow between them.

This is perfect to move, grow, change color or opacity of the elements. Principle makes organic transitions so easily that suprise the first time you use it.

The problem is when you try to do it with many elements. Principle doesn’t recognize Sketch symbols so renames all the elements that are in every appearance of the symbol. Also, even when we name correctly Sketch items, it is hard to name them considering that we have to name all of them and only repeating names when we want them to flow in Principle. So the result can be similar to the first image of this article.

The video shows how two items have the same name in different Artboards and the consequences of it.

We have a tough option or an easy solution. The tough one is to check the name of every item in every Artboard and rename as much as we need. It may take a lot of time.

The easy trick:

1. Before exporting the Artboards from Sketch to Principle, we make different groups of the elements we want to flow and the ones we don’t want to flow.
2. At Principle, we cut the group of the elements we don’t want to flow from one of the two Artboard we are linking, and we paste them in the other Artboard.
   Principle doesn’t allow two items to have equal name in the same Artboard, so it will rename the ones we paste.
3. We cut them again and now we paste them in the Artboard they came from.
4. Place them in the layer level they were and we might have to redo some linking if we lost it. You got it! There will be no uncontrolled transitions, no more Crazy Flying objets.

I have applied the cut and paste system twice because I still had problems with the footer, so after it, I relinked it.

This is how it will finally look:

Did it work for you? Let me know and share it if you think it can help other people.

Finally I have to point one of the many great advice that Samuel Hermoso and Óscar Santos Pérez gave me at Ironhack: Principle is for doing small interactions. For showing the whole navigation use InVision. So if you don’t really need it, create an specific Sketch file for the transition you want to animate at Principle and don’t mess up with a lot of elements.