UX Hacker & Sketch TV's video: Introducing C4Studio Make Animations And Export Dev Ready Code Tools - UX Hacker

Introducing C4Studio | Make Animations And Export Dev Ready Code Tools - UX Hacker. Check it out at c4studio.co / For more post, please Like and Subscribe - also check out uxhacker.co --- A new class of motion design for mobile. Built for Designers AND Developers, C4 Studio lets you easily animate designs and generate production-ready code that a developer can use right away. 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. 1. Sketch Integration C4 Studio taps directly into your Sketch files, meaning that you don’t have to change the way you work! 2. Real-time Updating When you edit or polish your designs C4 Studio will keep itself up-to-date in real-time. 2.1. 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. 2.2. 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. 3. 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. 3.1. 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. 3.2. 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. 3.2.1. Link the Sketch File 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. 3.2.2. Link the Start + End 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. 4. 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. 4.1. 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. 4.2. Expanding You can expand a transition so that all of it’s animatable properties can be seen. ... More at c4studio.co/features