Features

All our features, neatly explained.


Introduction

C4 Studio is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off. It bridges the gap between design and development by generating native code that can be directly incorporated into larger more complex projects by a developer.

Our focus on making C4 Studio a production tool that exports code allows designers to have far more impact on the final product of development cycles. The simplified interface we have created is easy to learn and adopt.

Sketch Integration

C4 Studio taps directly into your Sketch files, meaning that you don’t have to change the way you work!

Real-time Updating

When you edit or polish your designs C4 Studio will keep itself up-to-date in real-time.

Artboards Become States

The main way to think about designing in Sketch is to create states. For example, one one artboard you can design the starting state of a closed menu, then on a second one you modify the original design to look like the end state. In C4 Studio, you link the two states and everything animates automagically.

Plugin

Our Sketch plugin adds a simple functionality that gives C4 Studio the ability to automatically generate transitions between two artboards. When you’re happy with the starting layout of your design, you simply duplicate your artboard (with our plugin) and then edit the end state.

Interface

The current interface is reminiscent of Flash. You are able to see the two states of a single transition and preview the change in between. Once two files are linked the preview stage is populated, and the timeline viewer is automatically filled with default transitions for only those objects whose properties change between states.

Simplicity

The core idea behind the interface is simplicity. For the most part, you already have an image of motion in your minds and want to express that. So, instead of presenting you with an overloaded interface of features, we opted for one that lets you focus on building expressive animated transitions.

The Stage

The stage is where you link projects, connect artboards and see your animations in action. There are two spaces to the left and right of the stage for previewing the start and end states of a transition. There is also a preview area that you’ll use for checking the timing of your transitions.

After creating a new C4 Studio project you’ll need to do some linking.

First, you’ll need to connect your beautiful Sketch file to the new project. You do this by clicking the little link icon in the center of the stage, and then select a Sketch file you want to animate.

After linking the Sketch file you’ll see two empty preview areas to the left and right of the stage.

By clicking the link icon below the start and end preview areas, you can link their respective artboards from the Sketch file you recently connected:

After linking the two states, the preview area will automatically populate itself. You can now preview the default animation between your two states.

Timeline Viewer

This is where the magic happens. The timeline viewer allows you to see a list of all the transitions you’re working on, and edit the groups and properties that animate between the start and end states you designed.

Duration

You can easily change the duration of a transition by clicking on the clock icon to the top-right of the timeline viewer. All the animations in a transition will scale up or down whenever you change the duration.

Expanding

You can expand a transition so that all of it’s animatable properties can be seen.

Tweaking Timeline Animations

In C4 Studio, editing the animations is very straightforward.

Resizing

Resize timeline bars in order to customize the animation. Hover over the left or right of a timeline bar and click and drag the now visible DragElement.

Snapping

Snap to other timeline objects and time interval column lines. (Hold Option while dragging)

Groups

Resize parent layer will scale all its children timelines.

Shifting

Move entire timeline bar by clicking, holding and dragging in the middle of the bar.

Individual Properties

You can edit the individual properties of each object. For example, if the size of an object changes between states, you can edit the width and height properties independently.

Easing

You can add the following four basic types of easing to your animations: Linear, Ease In, Ease Out, Ease In + Out. Add them by selecting the easing icon to the right of the timeline’s name.

You can also select multiple timelines at the same time before applying easing!

Disable Animations + Lock Layers

You can disable a layer’s animation by clicking the eye. So, if you want to quickly see the outcome and compare it to where you’re at, you can toggle the eye icon.

You can also lock layers to keep from accidentally editing them.

Other Fancy Things

There’s a lot more that the current version of C4 Studio has to offer. Here are a few of the nice ones:

If two objects get unlinked, or you want to test linking a different set of objects, simply click, hold and drag from an object on one artboard to another on the second artboard.

Multiple Transitions

You can create multiple transitions in the same project. This handy ability lets you do a couple different things. You can quickly see the difference between versions of an animation. You can also choose a new set of artboards, allowing you to package multiple animations in the same project.

Playback

Hit spacebar or tap the icon under the preview to play back your animation. Drag the little icon above the timeline to scrub back and forth through your animation.

Properties Panel

The properties panel – soon to be editable! – shows you the specific details of a selected object.

Exporting

There are two main ways you can export your animations: to video, and to code.

Exporting Video

You’ve created something great and now you want to show someone on your team, or a client to get approval. You can easily create a video of the animation you put together in C4 Studio.

Exporting Code

This is where C4 Studio starts to shine. We’ve created a sophisticated set of code export functionalities that allow you to choose simple and useful settings for generating dev-ready files.

Code Preview

First, there’s a code preview window that allows you to see the animation code for a specific object. Select an object on the stage and you will see the details of how it animates from start to finish.

Exporting Views

The basic export option will allow you to export the view code for a given transition. Every object will be represented by a view, and every animation will be encompassed in a transition class.

Exporting Controllers

If you want to get a bit more out of C4 Studio, you can choose to export the view controllers that handle the objects in your design. The controllers come with methods for triggering transitions.

Exporting Xcode Projects

Going a step further, if you want to see your designs working on an iPhone, you can export a full Xcode project whose structure contains all the assets necessary for building and running an app.

Asset + Code Management

Whether you’re exporting views, controllers or projects, each type of export will contain all the assets necessary for building and running - no need for generating them yourself. Also, exporting generates a default set of code for running transitions created with C4 Studio - these are a set of consistent files that only need to be included once in your final projects.

Modifying Exported Code

More than likely you’ll need to tweak a few things after exporting. This is no problem with C4 Studio’s exported files. Our export functionality is architected to produce very flexible and modular code that can easily be subclassed and modified.

Including Exports in Interface Builder

All visual elements are exported as @IBDesignable classes. This means it’s easy for you to drop generated objects into Interface Builder files. It’s also easy to swap standard UIKit elements for those you just designed yourself.

Feedback

Found a bug? Want a new feature? Have a question? Use the feedback form by clicking on the icon in the toolbar.