Kite App: Animation & Prototyping with native code output (kiteapp.co)
almost 7 years ago from Ruban Khalid, Product Designer interested in prototyping and motion design.
almost 7 years ago from Ruban Khalid, Product Designer interested in prototyping and motion design.
Holy shit, there's a new sheriff in town
how so? what does this do that Paintcode or Avocode don't?
Can't compare it with Avocode or Paintcode as the primary focus is on animation prototyping. Main competition will be Principle, Marvel or Flinto.
You can absolutely prototype animation with both of those tools, so I'm confused. And presumably, the program whose primary focus is exporting the code and not primarily animation should in theory be getting the technical part better.
I’ve been using Kite a bit and it’s very capable. It’s a little different to the other animation and prototyping tools. I think it augments the stuff I’ve been using, rather than replacing it. Shockingly able for a 1.0, too. Haven’t hit any bugs yet (another surprise for such a new app).
Definitely worth taking for a spin, imo.
The haptic feedback you get when you drag things around the canvas or timeline is so. ridiculously. satisfying.
Would love to see this in other tools.
(For people with Force Touch trackpads)
Honestly thats one of the few things that bugs me. The vector pen tool feels like you're pulling a bowstring, which is cool.. but it gets old after a while.
I do wish more apps implemented haptic feedback for things
Fiddled with it for a brief moment yesterday and it has potential. Not as easy to get started with as Principle for instance. LOVE LOVE LOVE that you can create animation paths.
Now I'm off to scare my devs with some cray animations. Peace.
Right?? My devs are going to hate me now haha
Good thing your animations have all the native values right there for reference!
Spacebar (or some other shortcut I can activate with my left hand) to toggle play/pause would be really helpful.
Has anyone come across any tutorials yet? Would love a basic walkthrough of some of the features. I'm coming from After Effects and Principle, this seems really powerful but haven't found it particularly approachable so far.
I put up a short 11 min workflow orientation today.. https://designers.how/episodes/learn-kite-compositor (starter sketch file here: http://tiny.cc/sketch-start)
Hope you find it useful for at least getting your bearings. I've been digging deeper and it's blowing my mind. I'll be posting more videos over the rest of the week and beyond. Pretty sure its my new favorite tool!
This is great, thanks for sharing!
Chris, how do you do page transitions? Have you managed to figure this out?
Hey Ruth, Sorry i didn't notice this comment! https://www.dropbox.com/sh/bh34ro3rc1r84mo/AAAae3jZmfMc4B52Y-omasCUa?dl=0
There's a little sample of an ios-style push transition, with some detailed animation. Basically I picture the whole thing as one unit - its actually very similar to iOS dev in that way - the nav bar is not technically part of the incoming screen, its a level above.
This method is too complex to be efficient for very long flows, but it allows you a fine level of control on the transition.
It's pretty good, I can see this becoming my default tool for all prototypes. The learning curve is a bit crazy steep and the lack of tutorials is a pain. After some persistence and fumbling through the UI and hurting my brain fathoming how the UI all works... I'm now animating things pretty well. Still cannot figure out how so change between pages - assumed it would be a Action?!?!?
Definitely worth a look, It's not as quick as Principle for smashing out ideas but has the ability to get right down to the fine detail and produce some really precise, elaborate and complex interaction with multiple level stuff way beyond Axure, Flinto, Principle.
I've also grabbed the Xcode libraries and can send the animation to my phone pretty easily to test. Really needs a dedicated Kite preview app rather than compiling the Xcode viewer every time to see your DOD (design on device).
Rock solid build, Not quick to learn (I'm still learning), great results if you put the time in to develop and understand it.
I'm also stuck on doing page to page animations, do I have to reduce the opacity completely or do an animation to move the canvas components to the left? It's not exactly clear to me.
Is it just me or is the "Web Animation" example in the showcase (https://kiteapp.co/showcase) suppose to be Stripe?
This I like: "Object inspector values directly coorespond to the exact same values you use in iOS and macOS projects."
First weird thing I've noticed about Kite is that the layers work backwards compared to most apps. If the layer is on the top in the layers panel its actually below all the layers in your prototype. A bit strange and annoying.
This is actually the same way it works in Xcode. I actually rather like that everything I do in Kite feels very much like what happens at implementation time.
Ah right, I might have to get used to that then.
Looks good!
Related question: Is there something like this that produces html/css animations?
Perhaps Webflow?
For CSS / HTML you can try Hype: http://tumult.com/hype/
I've been developing an SVG vector graphics animation software for Mac. It's called Keyshape and you can find a free beta at https://www.pixofield.com. It can export SVG with CSS animations. The produced CSS can also be useful for HTML developers.
My app actually looks similar to Kite. It's good to see that I'm not the only one with ideas about timeline based animation. :)
Note: Keyshape is not really a prototyping tool. It's more like an icon/graphics animation tool.
awesome! exactly what i've been looking for :)
I'll try it out today.
Great! Let me know if you have any questions, comments, or if you think that it should be improved somehow.
hey you are hijacking this post. But I'm OK with that :D Anyway how can I re-produce animation just like you have on the landing page : https://www.pixofield.com/images/heart.svg
Sorry! I won't do it again.
There will be tutorials later on the website.
Isn't it weird that this product is based on JavaScript but does not provide web export?
This one looks interesting. Is there any tutorial available somewhere? The help in mac app is not available
Does this thing spit out core animation Cocoa and Swift code?
If it does I'm sold!
Have a look on quartzcodeapp http://www.quartzcodeapp.com or lottie http://airbnb.design/lottie/
What about android? :/
I know you can prototype them but can you view the prototype on android devices or pass it over to a dev? Pretty big deal breaker for me if it's not possible…
Ok so, I'm a designer. I manage to build this awesome prototype of weather app with lightning animation & stuff. I show it to the developer, he freaks out. Now what?
If I'm reading their page right, they're building using the same technologies available to iOS development, so a developer shouldn't freak out too much as they'll have the same tools available to re-create in the app itself.
I read that part but I didn't know it was replicable for a developer. Thanks! maybe now the only problem is if the developer uses Mac or Win haha.
Cheers!
I think because the underlying tech is the same, it constrains what a designer makes to what a dev can reproduce. As for Mac/Win, if they're making iOS apps it's gotta be on a mac.
Hey Horacio,
The nice part about designing an animation in Kite is that all of the features are built on the Core Animation API. This means that you can give a .kite document to a developer to pull the exact layer values, animation timing curve values, etc. All of these values correspond to the exact values you would use in the code.
The only feature that is exclusive to macOS is the CoreImage filters you apply to as Content Filters on a layer. For example, like gaussian blurs, etc. Those don't exist on iOS.
Optionally, you can also use the KiteKit framework to embed and play the .kite document as-is in inside your macOS or iOS app if that would suit your needs for an animation.
Damn. Now you got me.
Thank you!
So many prototyping apps. I'll give it a shot though because that timeline seems wonderful.
It really has exploded in the last few years. I think we'll see a period of consolidation too, where a lot of these fade away or get bought (some of this has been happening already with Marvel and Invision aiming to acquire some singular but flagging services). Still impressive to see what people are doing and how far they're willing to try and push it.
now THAT looks nice.
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