Tutorials
Kite Techniques
A video tutorial series by Amos Gyamfi
-
Orientation
11:17Learn how to get started making interactive prototypes in the newest player in the prototyping game, Kite Compositor.
-
Toggling States
8:43With 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.
-
Complex Animations
2:59Kite 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.
-
Screen Transitions
10:17Creating 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!
-
Build Some Buttons
4:46To 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.
-
Intro to Scripting
5:38Scripting 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.
-
Building a Functional Timer
2:59Learn 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.
-
Importing from Sketch into Kite and Hooking Up Actions
7:18We'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.
-
Making Styled Text Inputs in Kite
5:36Now 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.
-
Adding Detailed Micro Interactions to Input Fields
9:13Learn 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.
-
Live Input Validation
4:14One 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.
-
Import and Animate the Checkbox
5:51This 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!
-
Export Swift Code
4:35Code 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!
-
Creating Checkbox Functionality
1:54Learn 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.
-
Adding New Properties
2:31One 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.
-
Give it a Custom Initializer
8:25The 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.