A Matter of Principle

LaTiesha Caston
Jul 21, 2017 · 3 min read

Throughout my career as a designer, I’ve used a ton of programs. You’ve got your standard Photoshop, Illustrator, and Indesign, and the now deprecated Flash and discontinued Fireworks. I’ve dabbled in Light Room and Cinema 4D, generally know my way around After Effects and XCode and then BOOM, Sketch happens.

I learned Sketch around the same time that I learned how to get around in XCode. I was learning to code for iOS, so I loved its ability to export the same asset at different sizes all at once, and I still think it’s its best feature. Sketch was the first program I’d come across in a long time to be a mainstay in my workflow. But I do admit that sometimes I exhibit some of the small side effects of having worked in different programs. I look for photoshop effects in Illustrator, or use Sketch shortcuts in Keynote. I figured I’d adjust over time.

Then this spring, we got an email from Huge School instructing us to learn a new program: Principle.

But then my shock turned to intrigue. I *do* love a challenge, and I’d been hearing a little about Principle and how it was great for prototyping, a skill I’d been wanting to pick up. So I went into it with open arms, ready to make some cool shit. And it REJECTED ME.

The workspace is a mix of a few different programs. It’s got a standard layers panel like any program, but the inspector is pretty limited. The interaction for transitioning between artboards reminds me of clicking and dragging to create an outlet in XCode. It has a *version* of a timeline but its not as robust as After Effects, with nowhere near the amount of control and variety of animations.

Actually is has *two* versions of a timeline. The animate panel allows you to control how long an animation lasts and adjust easing. And Drivers are a sort of timeline, but instead of it being based on time, its based on some event. And on top of that is doesn’t even have *rulers*.

So of course, the first time I had to use Principle on my own, it was a disaster. I couldn’t figure out drivers and I fucked up a presentation.

Principle and I were officially BEEFIN’.

So, in order to squash the beef, I’ve decided to try to get a little more comfortable with Principle by trying to recreate a couple of interactions on my own. I know me and Principle can be friends, we’ve just gotta feel each other out first.

Spinner Animation

Thanks to a tutorial I found right here on medium, I learned a lot about clipping masks, groups, timing, and good ole’ trickery, and I created this spinner animation!

I was a little confused at first but I didn’t move a step until I understood what was happening. This is basically just animating two masks.

Hamburger Menu

For this one, I decided to pick an animation I liked on Dribbble and try to recreate it in Principle. I know hamburger menus can be quite controversial, but I think this one is pretty clever.

Dribbble version:

My Principle version (no tutorial):

Yeeey I did it!

Making this one taught me a lot about folders and masking and got me more acclimated with the animation timeline.

I’m really happy with my progress! I really love Principle. Its a powerful prototyping tool that adds another layer of fidelity to prototypes. I still have much more I want to play with and Im excited. You know what? Maybe…maaaybe Principle and I can be besties. Here’s hopin:

)

LaTiesha Caston

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade