Every product designer should know about Principle & Sketch.
So work has been piling up pretty heavily now that the end of the year is finally nigh, and frankly, I’m elated. I think we can all collectively agree to give a big ole’ double-middle fingered salute to 2016.
If I really went into it—I mean, really brought the hammer down on this year, then this Medium article would probably never end. So I’ll save the bitching and moaning for another piece.
With the metric gigaton amount of work that has been coming down the line, I’ve had to resort to semi-nonconventional ways of producing legible design deliverables.
Typically we deliver code as the quintessential design requirement, being that if the development team assigned to the project has a question regarding the functionality of the design, we can simply tell them to click around so-to-speak.
Nine times out of ten when a developer has a system workflow question about the design, it is almost always provided in the code that we have previously delivered. Even when deadlines are tight, and product managers are breathing down my neck, I put as much leg-work in as I can into delivering code.
I almost always deliver code. However, we have been using Sketch lately for more app related design deliverables.
My co-twerkers @richhemsley and @joeytwotweets also introduced me to Principle, which is an app that allows you to add animation, and things like click events and scroll functions to your Sketch designs.
Although they are much more adept than I am with Sketch & Principle, I wanted to share what I have learned and benefited from using these apps together lately—more specifically, Principle.
I’m still learning all there is to know about Principle, so please spare your cabbage throwing if you find a blatant impediment in any examples I attempt to portray. I’m still learning all there is to know about Principle. Just leave a friendly comment. Or don’t.
1. Directly import Sketch files into Principle.
This feature alone implies the cohesive intent of Principle’s purpose to work seamlessly with Sketch.
Granted, even though this feature is awesome and incredible, I’ve found that with my large Sketch designs, with their many layers, it becomes almost ambiguous discerning distinct layers that I’m actually going to animate, vs individual layers that could really just be merged together as a single entity.
It surprised me furthermore that I could literally copy an element from Sketch, and paste the bastard into Principle AND IT AUTOMAGICALLY MAKES IT ITS OWN LAYER.
This honestly surprised me.
Once I discovered that I could copy and paste between Sketch & Principle, my speed increased. I was able to piece together the parts I wanted to animate onto my Principle design without having to save things as pngs and go through that whole process.
Today alone I was able to take some stuff I’ve been throwing together in Sketch, and almost simultaneously plan how I was going to group certain elements knowing that I’d be animating them in Principle later.
While writing this little piece I’ve decided to make a little prototype to show some quick examples. Hold on to your butts.
2. Scroll drivers. Straight up witchcraft.
So Principle has a function called drivers, and holy shit, it’s amazing. Drivers allows you to assign keyframes to scroll positions on either the Y or X axis on any given group that you dictate.
By the way, I made the above sample in just under 3 minutes.
Yeah, I know—I didn’t name my layers. But yeah, it’s incredibly powerful, given that with this simple arrangement there is a vast array of things I can do with little effort.
The control bar on the top is what controls the driver keyframes, and it was pretty easy to find out how to toggle it open. It was a little weird trying to figure out how to configure a start and end state for each keyframe, but once I got the hang of it, it was pretty easy to figure out other layer’s animations.
This is probably the feature I’m most excited about. Probably because the current project I’m on is a web related one, and everyone knows scroll-to animations are the business.
3. Click Events.
Apart from the utter badassery of scroll drivers, we have click events; which is arguably the bread and butter of Principle.
It’s pretty self explanatory (which is awesome):
- You select a group or layer for the click event
- You define the type of event (tap, hover, bop, twist or pull)
- Decide which art board it goes to, or, duplicate current art board with whatever changes you want to happen.
4. Media Uploads
I lazily dropped a video onto Principle like an asshole, and it just added it amongst my layers, and that’s it. It was that easy.
No upload types or hidden import options. No invalid file types (so far) and it auto played as I demoed it on the prototype screen. I didn’t even crop the video like this. It cropped the video within the parameters of my art board.
I mean, I’m trying to mess this up by any other program’s standards, but the assholes that decided to make this apparently impenetrable piece of software have alleviated any past headaches I can remember having from attempting similar things on other Adobe products.
I tried using this video within my scrollable rectangles and it seemed to play nice within that clipping as well.
Today even I was able to use a video as a motion background with a gradient overlay with relative ease. I can’t actually show that of course because the nature of my actual work is confidential, but you get the picture.
So the badass at Sketch Together created this incredibly helpful and adorable tutorial on how easily you can make previously considered complex animations using differentiations between artboards in Principle.
For Christ’s sake, the dude makes a dancing donut in eight minutes using just Principle alone. It’s goddamn impressive, and left an apparent impression on me that this app was worth dropping $129 benjamins on.
If you’re a product designer, just get Principle.
So, like I said, I’m still learning Principle.
Previously, to even get close to some of the basic fundamental animations and interactions I’ve been able to do within Principle, I had to use things like Keynote, or just code it up myself.
What really takes the cake though, in my opinion, is it’s unquestionable compatibility with Sketch—which has become arguably the pinnacle of user interface design creation.
Simply having the ability to not only export your interactions as video, but also mirror your prototype on your phone or ipad is incredible, and I haven’t even gotten that far yet.
Now, it isn’t a perfect piece of software, it still has some bugs. Like if I start to have too many artboards they’ll start to stretch and skew until I zoom out and zoom back in. Sometimes It’ll crash, but for the most part it’s taken most everything that I throw at it.
So if you want to make cool shit rather quickly, just get Principle already you dingus.
Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a…principleformac.com
Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally…sketchapp.com
❤ ~ C