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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
