Log InSign up
 

Kite Compositor

A UI animation and prototyping application for Mac & iOS

#4 Product of the MonthMarch 2017
+2

Kite is a native animation and prototyping design tool for the Mac. It features an intuitive timeline editor, WYSIWYG canvas, and a robust scripting interface. The iOS companion app, Kite Compositor for iOS, allows you to interact with your Kite designs right on your iPhone or iPad.

Around the web
Kite Compositor, Prototyping and WYSIWYG v. CodingRobust programming environments for animation and prototyping like Origami are powerful, but it's no accident that the player in this category that has so far captured the most mindshare among designers is Principle. Though it has its limitations-it's perhaps too linear and it can be laborious to create large-scale prototypes-Principle is beautifully elegant and rewardingly easy to learn.
Subtraction.com
What to Choose: Flinto, Principle or Kite Compositor?For several years I have used After Effect for animating my designs. I think almost everyone knows how cool is this app for animation but not for prototyping. If you use Sketch, you have some issues while preparing your work for animation.
PrototyprVitaly Dulenko
Prototyping with Kite Compositor - An Introduction - OnePixelOutEarlier today I began prototyping with a new tool - Kite Compositor - and I've been lucky enough to get to know it's massive range of features. What I've discovered is that Kite Compositor integrates very nicely with Sketch.
OnePixelOutEllie

Reviews

 +1 review
View all 2 reviews → 
Helpful
  • Shannon PotterUX Prototyper at Lyft
    Pros: 

    Incredible visual access to practically every aspect of Core Animation

    Cons: 

    Limited support for vector editing in-app

    Kite Compositor is my new go-to prototyping tool. As a long time iOS developer, most of my prototyping was just done in Xcode because I had complete access to Core Animation. Kite, unlike other tools, is built on top of Core Animation and exposes all (or most) of its features directly. As a result, the animations it builds are almost guaranteed to look exactly the same on device.

    Beyond that, it's just a well-designed app. As with most professional applications, the UI takes a bit of poking around at first to figure out how to do everything, but after just a day of playing with it, I became familiar with most of its capabilities.

    Comments (0)
  • Mihaela Mihaljević JakićiOS Freelance developer
    Pros: 

    Follows Core Animation to the letter. Exports Swift code.

    Cons: 

    None

    Amazing tool for UI and learning Core Animation.

    Mihaela Mihaljević Jakić has used this product for one week.
    Comments (0)

Discussion

Hunter
Joe Rhodes
Makers
Joe Rhodes
You need to become a Contributor to join the discussion - Find out how.
Javi@ios_javi · Digital Comm Student. Future PM.
A Sketch plugin would be awesome 🙌🏽
Upvote (32)·
Lisa Dziuba@lisadziuba · FlawlessApp.io Founder
@ios_javi yeah! Deep integration with Sketch makes the work much more faster!
Upvote (8)·
Joe RhodesMaker@jrho
@ios_javi Kite has a Sketch plugin that it uses internally to do the native import. You can actually pull the Kite.sketchplugin file out of the Kite.app bundle (at Kite.app/Contents/Resources/Kite.sketchplugin) and load it into Sketch yourself if you'd rather kick off the export from Sketch itself.
Upvote (15)·
Avadh B.S. Dwivedi@avadhbsd · Designer
I guess @ios_javi said it right, sketch plugin is not just awesome, its critical to success of any prototyping shit.
Upvote (2)·
Jamie Shoard@jamie_shoard · Design/Founder Combo Studio
Excited to give this a proper go. Looks incredibly powerful. Principle really got me hooked because of it's learning curve and the fact it did 1 type of prototype extremely well. For me, my thinking has always been along the lines of 'if you cant recreate the whole prototype from scratch in an hour, you're probably building out too much'... because the nature of the iterative process, i don't like to spend huge amounts of time building a prototype when the designs should be changing day to day. Definitely could do with some tutorials and basic lessons to get started, especially as I only have 14 days to decide. Couple of small bits: - It's running pretty laggy on my 2017 MBP - Vertical/Horiz align are probably my most used tools, had to root around to find them in the toolbar - I kiiiind of understand why, but having the default anchor point top-left just reminds me of the hours i used to spend in AE moving them to centre (this also makes vert/horiz align pretty frustrating!) - Havent figured out how to add the iphone frame to a blank doc if i dont start from template - Pushing people to open the examples templates on first launch would be useful (I mean the example projects, rather than just the phone frames) - Touchbar timeline is neat, but a bit odd that it only relates to the portion on screen, meaning i cant scrub through from start to finish... maybe this would get too sensitive, but 4:10 is quite a long default timeline anyhow..? Overall, looks like it could be huge! Definitely just need to start with some basic tutorials if you're to convert the masses from their scattered tools of choice. Bit gutted that by the time some of these lessons come out my trial might be over and i'd not be ready to commit $99
Upvote (17)·
Arroisi@aroro__ · Visual UI Designer
@jamie_shoard is the result only animation like origami or touchable hotspot like framer.js or invision?
Upvote (2)·
Eon@eonpilot · Swift dev @ eon.codes
@aroro__ @jamie_shoard User interruptible animation?
Upvote ·
Daniel.@danielrakh · Product Designer | iOS Developer
Awesome. Reminds me a lot of Principle. Besides the UI, are there any other differences between this and Principle? In other words, whats the case for me to switch over from Principle to use this?
Upvote (13)·
Joe RhodesMaker@jrho
@danielrakh Thanks for checking it out, Daniel! I think the major differences between Kite and Principle is the focus on the timeline-based animation and the ability to use the JavaScript scripting environment to enhance interactions with custom logic.
Upvote (11)·
Abhinav Chhikara@abnux · UI/UX Designer, Co-founder @ Lisn App
@danielrakh there's also custom movement paths, more control over designing within Kite and a bunch of smaller stuff, from what I can tell from the landing page!
Upvote (2)·
Spencer P ShulemHiring@spshulem · Founder, WeDo
@danielrakh *cough* doesn't charge $130/year. (Looks awesome, excited for some of those prebuilt animations).
Upvote (1)·
Catalin Pop@catapop84
Impressive. Is there a way to export those animations to the real app?
Upvote (10)·
Joshua PinterPro@joshuapinter · Product at CNTRAL. Maker of ntwrk.
@catapop84 ^ This right here. One of the biggest additions that Framer.com just added. Edit: Wait, just checked out Framer again and not convinced it actually copies the animation code, just the settings like tension and friction. Haven't tried it yet, tho.
Upvote (3)·
Spencer P ShulemHiring@spshulem · Founder, WeDo
@joshuapinter @catapop84 I think Facebook Origami is one of the only ones that does it.
Upvote (2)·
Joshua PinterPro@joshuapinter · Product at CNTRAL. Maker of ntwrk.
@spshulem @catapop84 Do you know if Origami exports to React Native's Animated format?
Upvote ·
Joe RhodesMaker@jrho
@catapop84 Hey Catalin – You can use the KiteKit framework to embed and play .kite documents in your own iOS or macOS apps just as they appear in the desktop app.
Upvote (5)·
Paul Martens@paulmartens · The golden rule applies to design
@catapop84 you want to look at QuartzCode and CoreAnimation....both available on the App Store. However, I can't vouch for both fully as I haven't tried the Kite framework yet.
Upvote ·
Joe RhodesMaker@jrho
Excited to finally share this to a wider audience!
Upvote (9)·
Bady@bady_qb · UI/UX Designer, Wego
@jrho Hi Joe, is there any tutorial for this? would love to try it
Upvote (2)·
Jesse Wallace@jesse_wallace · Sr. UX Designer, Dragon Army
@bady_qb @jrho I agree - a tutorial is greatly needed. I have used principle before, and I picked it up right out of the box. I'm thoroughly confused by this product.
Upvote ·
Joe RhodesMaker@jrho
@bady_qb Many have been asking for tutorials. I'm going to put together an introductory tutorial soon to help people get the feel for using the app.
Upvote (1)·