Prototyping with Kite Compositor – An Introduction

by

Earlier 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. I use Sketch quite a lot in my design process to create wireframes, and Kite Compositor allows me to paste text styles and layers directly from my Sketch projects.

In this tutorial, I’ll go through how to set up a project, create layers, and then how to set up basic animations.


Prototyping with Kite Compositor

Getting to know the interface was difficult at first, but through trail and error I managed to get a basic animation going. Here are my steps to creating your first animated prototype with Kite Compositor.

Starting A Project

There are two ways to do this – “New” and “New from Template”. I recommend starting with a template if you know in advance which device you’re designing for. In my case, I wanted to create an animation for an iPhone.

Kite App New Project
New From Template
kite prototype project
“New” – but you can change the dimensions of the canvas.

Adding Layers

Now that you have your project set up, it’s time to start adding layers. What’s cool about Kite Compositor is that it’s possible to copy a layer in Sketch, and paste it directly into Kite Compositor as a layer. This ability to almost ‘drag and drop’ make this an excellent companion to Sketch.

To create a shape, I just hit the “R” key to create a rectangle, exactly as I would’ve done in Sketch. If you want to create a text area, hit the “T” key – also like in Sketch.

I should also mention that the layers at the bottom of the list on the left are the ones that are at the top of the canvas – notice how the iPhone is the layer that is at the back of the canvas.

kite project
Adding a Layer, I just hit the “R” key to start drawing a rectangle.

Adding Text

To add a text layer to your project, tap the “T” key. I’m sure there is another way to do it, but this is the way I’ve been doing it. You’ll see the crosshairs to create a text area. If you want to add text, however, you’ll need to enter it into this box on the top right. What I’ve discovered, though, is that if you copy text from a Sketch project, and paste it into this box, the font, size and colour will be pasted with it.

text kite prototype
Kite Compositor will keep the font style information if you select and copy it from your Sketch file.

I also found out that it’s possible to have multiple styles in the same text area. This is something I’ve missed from Sketch, and it was a pleasant surprise.

When you create a text area, Kite Compositor will automatically give it a border, and I’ve manually been turning this off. If anyone knows how to switch this feature off completely, please let me know on twitter.

Layout & Alignment

So if you want to centre things, just select the layers you want to arrange and right click.

Layout Kite Prototype
Arranging items in Kite Compositor is the same in Sketch – right click to see this menu.

Groups in Kite

If you’re like me, then you like to keep your files organised by using groups for items that go together. For instance, I created 2 rectangles and a text layer to create a primary button. I put these 3 layers in a group, and for some reason Kite gives this group a border and a background colour. I’m not sure why it does this, and I would love if there was an option to switch this feature off, but for now I’ve just been manually switching them off whenever I create a new group.

groups in kite
When I created a group with a few layers, Kite automatically gives it a border and a background colour.

Building The Interface

So below is the interface I’m going to work with. I created the input fields with rectangles and the field labels are just text areas. I haven’t really messed around with the drawing tool yet, so I just copied and pasted in the cloud and kite from a Sketch file I had open.

Kite Interface
This is the basic interface that I am using to create a slight animation.

Creating an Animation

Right click the sprite you want to animate – in my example, I’m using the illustrated kite. The first item in the menu is “Add Child” which will reveal a sub menu that contains animations near the bottom. For this example, I selected “Basic Animation” – and we can always change this easily later.

kite compositor animation

When you add a ‘Basic Animation’ you should see your timeline open up, and an animation duration will appear, with the word “bounds” written on it. To change “bounds” to something else, go to the ‘Animation Property’ dropdown (located in the Inspector Panel on the right) and select whatever you like. I chose ‘Position > X’ because I want to animate the position of the illustrated kite.

animation kite compositor
The animation properties panel in Kite Compositor.

Directly beneath the ‘Animation Properties‘ dropdown, you’ll see the values ‘To Value‘, ‘From Value‘ and ‘By Value‘. I selected the ‘To’ and ‘From’ and inserted the values for ‘X’ that I wanted for my animation.

I did the exact same for the y position of my sprite. Here is the result – not very interesting… Just a diagonal movement, but at least it’s an animation.

 

Kite Compositor Animation

Now, of course you can experiment with whatever animation effects you like. You have the ability to add easing, rotation, and use keyframes – so I recommend just playing around with it.

It’s possible to export the animation either as an .mov or a .gif.

Kite Timelines
The timelines for the above animation – just a diagonal movement back and forth.

 


 

So that’s my introduction to Kite Compositor, I hope you found it useful. I’m going to keep working on Kite Compositor over the next few weeks to see what other cool features are available.

You may also like