This guide will show you how to use Protoship UIPad to convert your Sketch designs into code. Let’s start with a quick demo!

Building that entire application took 20 minutes — 2 minutes to download the generated code, and the rest to wire up the interaction logic.

There are a couple of things to note before we begin:

This is Beta Software

If you are currently working on a project that needs HTML/React code, UIPad will save you thousands of dollars and months of effort despite its limitations. There is a learning curve, but you will receive extensive support through chat and email, directly from the Protoship developers during this beta.

But if working with a product in its early, ugly stages is not something up your alley, we’d love to have you back when we hit a paid public release.

And it is no magic bullet!

UIPad can produce usable code only if the supplied Sketch file is well structured. Most design files in their original form are not good candidates for UIPad. These are the rules for a well-structured Sketch file:

All layers of a component are grouped together. There are no layers floating around independently.

All layers are named well.

All reusable components are made into Symbols.

If it reads like the preconditions of a meticulously structured design file, it is. But in return you not only get a maintainable Sketch file, but also great code that saves you a ton of sweat and time.

1. The Basics

This is the UIPad code preview page. You can see a preview of the generated code here, and if you’ve named all the layers well and the code looks good, you can download the project by clicking on the Download Project link.