Principle for Mac is a powerful tool for prototyping interactions for web or mobile devices. If you’ve used it before however, you’ve probably been surprised by elements unexpectedly flying across the screen when testing your animation (see below). Luckily, I discovered a hack that can save you a lot of time and frustration.
The root of the problem is that Principle will automatically animate between two layers or two group layers that share the same name. This makes it insanely quick to start making animations, but it also means that you must properly name all layers in Sketch, or else you’ll spend A LOT of time in Principle renaming layers to correct unintended animations.
So how is this preventable? Here’s a quick hack that I discovered that has saved me loads of time. For the sake of this example, let’s pretend you want to animate a card back and forth between two positions. Here’s the correct process to prevent the above scenario from happening to begin with.
Step 1: Open the Sketch file and ungroup all elements
Select all layers on each artboard and continually press cmd+shift+g until everything is ungrouped. Sometimes Sketch acts a little funky, so double check to make sure everything is ungrouped before proceeding.
Step 2: Rename layers in Sketch
Using a handy plugin called Rename It, select all layers in the first artboard and rename all of these layers to “Screen 1” and all of the layers in the second artboard to “Screen 2.”
Step 3: Import the two artboards into Principle
Nothing to see here.
Step 4: Group and rename layers
At this point, if you link both screens together in Principle, no animation will occur. That’s to be expected because there are no shared element names between both artboards. Now you can simply rename the layers that you need to animate (or first regroup layers) and those will be the only animations that occur when both screens are linked.
Thanks for the 50 clap 👏🏻 if you enjoyed this article. This will tell me to write more like it!