Principle - Animate designs (like a simple Quartz Composer) (principleformac.com)
over 7 years ago from Aubrey Johnson, VP Design & UX at Dosh. Led design: @scienceinc, @color, @twilio
over 7 years ago from Aubrey Johnson, VP Design & UX at Dosh. Led design: @scienceinc, @color, @twilio
This app just blew my mind. Exactly what I've been looking for. This is Sketch for animation.
Exactly.
Im confused. If I make UI in sketch and I wan to animate it, I have to import into this? Does it import with layers?
Yeah. Seems like right now you can only bring in Sketch files as images. Judging from the UI though, a Sketch plugin seems imminent.
"Images can be imported into Principle by dragging from Finder, or pasting from any app that supports PNG or JPEG export. If you're a Sketch user, copying from Sketch flattens the selection to a single PNG image. We know this is annoying if you have a big hierarchy, and we're working on it. "
Wow. Wow for real.
I've just tried the free rial of Principal and the UI and workflow is quite simple and intuitive. I have not used the tools you've mentioned, but how would you rank them by ease of use?
(easy) Pixate > Origami / Form / Quartz Composer > Framer (hard)
I don't use them extensively though.
I honestly had never used Pixate before. Tried both Principle and Pixate and the former wins. It's just better designed, more intuitive and much faster.
You’re probably right. None of them are optimal solutions. But if you’re serious about prototyping, you’d better invest in Framer.
You're probably right about that as well! Framer looks cool.
Where would you place Principal in that hierarchy?
Principal is more expressive than Pixate. But on the fidelity scale it’s worse. Another consideration is feature parity, e.g. Framer (and partly Origami) is the only one integrated with design tools.
Personal use software doesn't need to be standardized, though... You know, free market etc. etc. Within an organization things should be standardized for the sake of collaboration, sure. But Principal isn't trying to get itself an ANSI number.
Surely the picture is a bit abstract. But who wouldn’t want to be an industry standard? In any case, I welcome the competition.
The tool looks very impressive! :)
Off-topic: Isn't this misleading at first glance? And, does this qualify as a dark pattern?
Such interaction design tools often use logos of companies which use their product, on their homepage.
Ehhhhhh, this is a bit disengenious, even if the text provides context.
Kind of like those fake "A finalist in the XYZ Film Festival That No One's Heard Of" wreaths on movie posters.
I thought the same thing.
Very cool app. I watched the first tutorial then jumped in and made a decent master/detail transition in about 20 minutes: http://d.pr/v/1b6OK
Some of the things I like about Principle's approach:
The viewport isn't fixed to any particular device, but is based on the size of your largest artboard. In theory you should be able to prototype for any platform, from watch to digital billboard.
The way transitions work is super intuitive. Copy a layer from one artboard to another and change its appearance; Principle will automatically tween these two states and allow you to fine-tune the transition.
The key-framing interface lets you tune the timing of a number of dimensions (x, y, width, angle, etc.) independently. I wouldn't want to get too precious with fine-tuning animations here (I would do this in Xcode alongside an engineer if possible), but it's nice to have it when you need it.
I really like being able to draw rectangles directly on the canvas without having to import assets. I look forward to using this as a very quick way to test assumptions before getting too invested in a direction.
On the note of being able to draw rectangles without important an asset, it would also be great to draw other simple vector shapes like a circle & a line.
This is pretty amazing. It feels a lot like AfterEffects but slimmed down for the sole purpose of prototyping so it's extremely easy to get familiar with. It also has a lot of fun things about it, like this:
Also, the ability to record the test in that window and automatically export as .mov or .gif is worth $99 right there. So easy and quick. I'm on the trial right now, but I see myself buying the application very soon.
EDIT:
Closing the window causes the application to stay open with a "Untitled" window which, when clicked, opens this:
Upon force quitting the application solves this, thankfully. Nothing too surprising from a seemingly 1.0 application.
We're aware of this, will be fixed in an upcoming update!
Thanks, Dan! It's a killer app, so keep it up!
I just poked around with this for a couple of minutes, wow. Once there's an easier way to share prototypes on device with teammates other than directly mirroring, this could be a game changer.
Built this after about 10 min of getting acquainted with the tool: https://twitter.com/patrickswong/status/633713520157294593
Jaw is on the ground, and it's staying there for the foreseeable future.
Was I the only one dancing all the way through the video?
This is amazing. Normally I would say a $99 price tag is a little high, but honestly for software of this caliber it well worth it. Continued development on this could make it a game changer.
Just played with it. Kinda disappointed with the limited linear animation. The timeline made me assume it was more like flash. Come on version 2!
Super excited about this! Very promising for a 1.0. Keep up the good work!
Mind = Blown.
Can we have this type of functionality within Sketch?
I think it's best to keep the two things separate. I want Sketch to focus on making Sketch better and this to focus on making this better, you know? Don't make things too complex.
That being said, integration and seamless Sketch importing/interaction would be amazing!
It would be great to have the background blur function for a shape that Sketch does so well to be integrated in Principle. It's for the translucency effect for our iOS designs. I tried to import a tab bar with background blur from Sketch to Principle but it just ended up copying the translucency of the layer behind it from my Sketch design.
This looks awesome.
This tool is great. I've been using Atomic.io for quite a while and I like it. Principal shares some concepts with Atomic, which made it a lower learning curve for me. Im really glad there are prototyping tools that aren't confusing and get the job done nicely. I'll be watching both tools for a while then decide which i'll be using as my main tool.
Small issue with Principal: - There isn't a good way enter Hex code in the color picker. Thanks to Skala color picker, or it'd be a pain to copy/paste a Hex code.
Keep the good work!
Imagine if Sketch integrated Principal...
The tool OF ALL TOOLS.
I think this will be really good in about a year or two. But, the sharing options are not very mature, no support for Android , no Photoshop support and fairly hefty price-tag out of the gate means I will probably not be using it for any production work.
Fast to use, art-boards are cool, animation export is really solid.
I'm playing with it right now but I'm stuck at making one little interaction. So if I'm scrolling down, my action bar will hide in half (Clip), but how do I show it back in full if I scroll upwards?
Two words: GAME CHANGER This is like the feel of the appearance of Sketch back then and the switch from Fireworks/Illustrator to it. Just a lot of fun!
The app itself is just pure responsiveness! Bravo for the 1.0 release.
Im late to the party... all i can say is, Holy Crap, Yes! Can't wait to mess around with this later.
Principle Mirror iOS app is U.S. only? ;-(
sweet manna from heaven... (༎ຶ⌑༎ຶ)
Exactly what I've been waiting for, bravo to all involved!
I've been looking for something like this as well!
I checked out Proto.io last week which is very powerful and can do some amazing things, but I found myself yelling at some javascript trying to get a slider to work.
I planned on trying Pixate out next after reading a bit more trying to find a simpler option, I'd be interested to see how Principal stacks up against Pixate.
Anyone?
https://www.dropbox.com/s/e34nzjaky88120b/Share.mov?dl=0 This is 15 minutes after watching the header video. Powerful toy.
awesome work!
I hope this is as cool as it appears. I will gladly play for it. I've tried many of the others and found it too difficult to manage.
This is exactly what I've been waiting for. Man, if only I could import a sketch document...
We're working on it. Let @sketchapp know on twitter that they should work with us to integrate
OMFG!!! New sheriff in town!
Does anybody know how to control transition animations from 1 artboard to another? Like when you tap a layer the next artboard will push in from the right of the screen. Sometimes it does automatic transition which sucks. Not anything about this on the tutorial. Thanks!
mind=blown!
At first look, it seems really great. Super easy to get some quick animations in.
Wow, the intro video sold me, but after following the first tutorial they can have all my money. Finally! Praise Apollo!
I'm very impressed because in 5 min I created animation of view for Dev to show. The "key step of view" type of animation is very easy and intuitive. Next type of native mac design tool like Sketch as far I think :) PS: I cannot download iOS mirror app, it's not available in Poland app store?
Waiting for app store approval. should be available any day now.
Impressive! Looks so intuitive.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now