Tutorials

Learn how to get started making interactive prototypes in the newest player in the prototyping game, Kite Compositor.

With a timeline based app, it can be tricky to toggle between states. Kite has a pretty elegant solution, and once you learn this trick you'll be able to build almost anything.

Kite can do complex multi-stage animations pretty easily because of the granular approach to animation. Since easing/timing/etc are not tied to a layer, you have more flexibility in animating.

Creating an iOS-style push transition can seem a little tricky in Kite, due to everything being on one canvas. Check out some useful tips for making these interactions!

To kick off our Advanced Kite course, we're going to quickly review the basics and do some UI building and micro-interactions in this lesson.

Scripting in Kite is really where the most power is. Learn how to get started writing scripts for your UI elements, and how it all ties together.

Learn how to combine scripts and actions to create a functional timer component, with a variable time. We'll also cover important methods of keeping your code modular.

We'll kick off with a quick review of how to import your design from Sketch, then we'll add animations and actions to our input fields.

Now that the basics of our input fields are set up, we can start to add some more delightful micro-interactions. In this episode we'll add an animated field label that appears on focus.

Learn how to combine scripts and actions to create a functional timer component, with a variable time. We'll also cover important methods of keeping your code modular.

One giant step toward realism is incorporating live features like input validation when the user is typing. We'll be adding that to the email field now.

This first episode is all about just getting our sketch design into Kite and animating it. With Kite being so new, we figured a quick refresher is in order!

Code export is finally available in Kite, and we'll use it to get our checkbox out and into Xcode as Swift code. It's a great starting point for customization, as all the tedious drawing code is done for you!

Learn how to combine scripts and actions to create a functional timer component, with a variable time. We'll also cover important methods of keeping your code modular.

One giant step toward realism is incorporating live features like input validation when the user is typing. We'll be adding that to the email field now.

The finishing touch for this checkbox component is an initializer that sets it up with the desired text, and we'll fix the frame based on the length of text.