Daniel Immke

Earlier this year when I was designing this site, I had a bit of a problem: I wanted to go above and beyond with the animations and interactions, something more than basic CSS. I’ve always been interested in animations on the web, and I’ve had the experience of building out advanced CSS animations, using the GSAP library and even working with SVG animations in the past. But I’ve had a persistent problem during all this time: I didn’t have an easy way to mock up interactions, so I had to visualize how they would go in my head and then code them.

I think in browser design is great, and I use it here and there, but for complicated animations it is really tricky. In the past, I have spent hours building one interaction only to figure out that it doesn’t really work the way I thought it would or I can’t get the timing quite right. This is incredibly frustrating.

I knew that if I really wanted to build something I was happy with, I needed a way to design and view the animations before they went into code. Eventually, I settled on the application Principle. I’ve decided to write a guide that will get you the background you need and making your own designs in Principle in as quick as 10 minutes!

Picking the right tool

It’s crazy to me that up until this year, I was still doing the majority of my design in Photoshop and Illustrator. I think my hesitance towards motion design tools came from that place: I knew that the tool that a lot of the pros were using for this kind of work was After Effects, and I was intimidated by the thought of having to learn how to use the same program people use to put CGI in movies with to figure out how to make a button do some cool stuff when you hover over it!

Luckily, just as when I discovered Sketch and realized there were quite a few very innovative screen design applications that didn’t have the same amount of bloat and baggage as Adobe’s tools, I discovered that there were many easier motion design options to choose from that focused specifically on user interface animation. In fact, there were so many that it was almost overwhelming!

When comparing tools, the thing that jumped out at me about Principle was how easy it was to get started and its integration with Sketch. After watching a few videos about how an interaction could be built in a minute, I was hooked.

Using Principle

Principle’s user interface is simple it almost doesn’t even need an explanation. Basically, you use the same concept of “artboards” that other design applications use, but you modify them and connect them with an interaction, with Principle doing the tweening and animation magic.

So if you have an artboard in Sketch with a button and you want to figure out what the hover state will look like, you simply need to paste that artboard into Principle twice. Then, you can the second artboard to be a hover state and connect the two via the “mouseover”to the interactions. Then, you can actually interact with the button in a preview panel to make sure it works exactly the way you intend. I love it because it took something that could be very messy and complicated and made it dead simple.

Now, you might be thinking “Isn’t this overkill?” For many cases yes, mocking up a button hover is indeed overkill. However, on my site I wanted something complex for my calls to action. I wanted a border to form and the arrow to move. It was much easier to put it together in Principle than working out and tweaking the code for hours.

Principle is very easy to use but has a surprising amount of depth. I mentioned tweening earlier. Principle will take care of the heavy lifting automatically, but you can actually go in and tweak all settings on how that tweening works, including using timing functions. I haven’t had need to get heavily into that area yet, but it’s nice to know if I ever want to do something advanced the option is there without having to use a different tool.

Conclusion

Ultimately, Principle served exactly the purpose I had for it: Whenever I was stuck in a design, I could copy and paste my Sketch artboard and generally mock up what I wanted in a few key frames. It is not the most powerful tool on the market, but if you aren’t looking to achieve total mastery and instead want an easy way to level up your skills in this area, it’s a no-brainer. Head over to their site and download the trial today!