RapidUI Guide: How to make your Sketch file ready for development

(Hey you: this is our second post in the RapidUI Guides series. Want to read about building PSDs for web design? Click here.)

Building better, faster websites starts in the design platform, so we’ve put together a list of best practices for structuring your layers in Sketch that will make your design-to-live transition quick and easy.

We promise, when you sit down to build you’ll be happy you took the time to get organized: working with an orderly layer system saves you buckets of time in the platform, and lots of potential headache.

And, of course, results in cleaner code.

Sketch gives you total freedom to design killer websites, but it’s not always simple to translate them into websites. To make the transition from design to live in RapidUI easier, we’ve put together a step-by-step guide to optimizing your design for web, from layer names to text settings.

The most important thing to remember is the importance of tidiness: working with a layer hierarchy, folders, and named layers will help make your transition to live easier and simpler. Think about how much easier it is to maintain a clean room, versus to clean a messy room — it’s the same in Sketch. (And in the kitchen. But that’s for someone else to write about.)

Organized layers make it easier to automatically generate code — and easier to work in RapidUI.

Consistency is key

Across your website, you’ll probably find yourself working with repeating fonts, layouts, and symbols. We’ll get into the nitty-gritty of working with artboards in a moment, but while you’re reading it, keep in mind the importance of consistency: repeating text styles and symbols will make your design process more fluid, especially across artboards.

Tip 1: Tidying up your layers

Before you upload your design, take care to organize your layers into groups, name layers properly, and delete hidden/unnecessary layers, so your website will function as smoothly as possible.

• Name your layers: In the interest of Future You, do yourself a nice thing and name your layers! Think about how you’ll find these layers in a sea of shapes, symbols, and images, and name accordingly. Go all the way with organizing layers in folders and groups — anything you can do in the pursuit of tidiness.

• Group ’em up: If you want certain objects to stick together in all resolutions, group them together! Think about icons: if you want an icon to stay with its text (and you do), put them in a group together. You’ll really feel the benefits of grouping when you go responsive; because grouped elements impact each other’s placement, grouped elements will stick together in smaller screens, so editing one object will automatically edit the rest of the group’s elements to match — super fast.
• Go element-by-element: Two objects on the same layer will function as one in RapidUI. This means if you want objects to function separately, the time to separate them into different elements is now; this will make things way easier during the editing/going responsive process, and will help you out when you’re customizing your elements’ functionalities.
• One image per spot, please: You don’t need to upload more than one image in the same spot. And we prefer that you don’t. For galleries, sliders, and so on, upload one image with your design file; once you’ve made that element interactive, you can add the rest of your images. Uploading all of the images together will only slow down the upload process and add extra steps to your workflow.

A quick note about artboards:

In RapidUI, each artboard will be uploaded as a separate page. When you upload your design, if it contains multiple artboards you’ll be asked which artboard you’d like to use.

You can add as many pages and artboards as you like;they’ll just have to be worked on separately.

Tip 2: Get to know your blend modes

While most, if not all, of Sketch’s blend modes and effects are supported in RapidUI, advanced effects that aren’t supported in CSS might look different in your design.

We’ve found that flattening complex un-supported layers to bitmap will often help us generate websites that look much more like your design. Think about a base image layer, with secondary layers with advanced blends or effects above it; combine these elements into a single layer (flatten selection to bitmap).

If elements of your design don’t look exactly the same way they do in Sketch, try one of these two methods:

1. Flatten selected elements to bitmap (don’t forget — your layers wont be editable once flattened!)
2. Export all of your desired layers to one layer, and upload them to RapidUI as images.

Tip 3: Keeping up with text layers

For your website to come out pixel-perfect, you have to pay attention to the details of your text styling: for example, font family, font size, and line height.

The most important piece of advice we can give you is: never convert text layers to outlines! If it’s not a text layer in Sketch, it won’t upload as a text layer to RapidUI.

• Take care of your text settings: Even if your texts look fine, the sizes have to make sense, so keep an eye on line height and font size.

Example: a title’s text layer can have a font size of 18px, but a line height of 200px. In that case, the line height in your web will be 200px — which will look super weird. By paying attention to detail, that can easily be avoided.

• Make sure that text direction is always set properly: Your left-to-right settings (or right-to-left) will be written into your code, and even though they can be changed — that’s just making your life complicated.
• Double-check your text settings!!!: Always use the same text settings for the same text type. If you are using the same headline format several times in your site, make sure that their styles are the same.
• Watch out for shared text styles: It’s something we’re working on, but we currently don’t support shared text styles. If you want your text to translate perfectly, style the text directly — and stay tuned for updates from our end!

The web development process starts with design. By incorporating these tips into your workflow, you’ll be able to start building websites faster and easier — and see better results.

When it comes to building with RapidUI, what you see is what you get — and that starts in Sketch.