Design to Code with Protoship UIPad
Update: The beta is currently closed. We’re working on a major product update based on early-user feedback. Sign-up here to join our waitlist.
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.
2. Naming convention
The code generated by UIPad follows a pattern similar to BEM. For this to work, there are two simple rules you need to follow in naming your layers:
- All layer names have to be in lowerCamelCase. Examples: name, profilePicture, tiledProfilePictureGallery. Just letters and digits. No spaces, underscores, or dashes. No funny characters at all.
- If a layer is a component, then it must be written in UpperCamelCase. Examples: Header, UserProfile, PrimaryButton.
What qualifies as a component? Your intuitive understanding is probably the best one, but for the sake clarity, here is an approximate definition: a component is a grouping of multiple layers that together form a functional whole, and is independently reusable. Components can be purely stylistic like Button or SectionTitle, or they can be functional like UserProfileCard or HomePage. Entire pages themselves are components too, since they form a semantic whole.
Here’s an example layer tree that follows the naming rules we discussed, and a slice of the generated code:
As you can see, UIPad automatically prefixes the parent component’s name to each of its children. Thus the link inside Footer becomes a Footer-link CSS class.
3. Preparing your Sketch file for UIPad
Meticulously naming every layer in Sketch might sound like a big chore, but it needn’t be. You can name layers in Sketch like a pro using Sketch’s awesome keyboard shortcut: CMD+R. It lets you rename the currently selected layer, but you can move to the next one by simply pressing TAB.
You can read more about renaming in Refactoring Sketch files.
In my experience it takes ten to twenty minutes to thoughtfully name an entire Artboard. But the business of naming is a big deal — the names you pick today might stay with you for the rest of your codebase’s lifetime.
4. Downloaded Project Structure
UIPad provides the generated code as a runnable project. You can start working on it right away, or integrate just the required files to your project.
In this version, we support downloading a React project that has all your Artboards and Symbols written as JSX components. Each component has its own JS file as well as an SCSS (SASS) file. The CSS naming methodology we use localizes your styles, which means you can change it confidently without ever worrying whether it’ll break some other part of the site.
The project comes with a README that will show you how to set it up for development.
5. What is coming next?
- SASS: when you avoid cascading styles and follow a very component oriented approach to CSS, it becomes hard to reuse styles. SASS mixins shine here. The next release of UIPad will abstract the typography across the design into a set of mixins, and do similarly for container styles and colors.
- ERB templates: if you don’t care about React and simply want the HTML output, or you want to use the views in a Rails application, we’ll give you the project built using ERB views.
- Responsive Layouts: This version of UIPad generates fixed-width layouts and use pixel measurements everywhere. We’ll soon introduce the ability to create responsive layouts through percentage widths, Flexbox, and media queries.
6. Reporting bugs and asking for features
You can always talk to us through the chat widget, or email us at hello@protoship.io. We get back to all messages.
If you’re currently building a web application and are interested in using UIPad, just drop us a note. We’ll help you convert your designs into code, and actively work with you till you ship!
We are working on an exciting new update. Sign-up here to join the waitlist!
