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. Organized layers make it easier to automatically correct 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, keep in mind the importance of consistency: repeating text styles and symbols will make your design process more fluid across artboards, and will help you move quickly across pages in RapidUI.
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 individually.
Blend modes & other effects
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.
RapidUI does not support folder effects; instead, use the effects on each specific layer, or merge the folder layers.
If elements of your design don’t look exactly the same way they do in Sketch, try one of these two methods:
- Flatten selected elements to bitmap (don’t forget — your layers won't be editable once flattened!)
- Export all of your desired layers to one layer, and upload them to RapidUI as images.
We can't stress this enough: name your layers.
In the interest of Future You, be super-diligent from the start when you're building your design. Name your layers! Delete layers you're not using! Go wild for folders!
This is because all of your visible layers will become part of your RapidUI site, but invisible layers are still a part of the upload process, and sorting them out adds to your upload time. For simple, happy uploading, go clean out those extra layers - and make it snappy.
Every object needs its own layer, because every layer is its own object. Two objects on one layer will function as one.
However, if you do want certain objects to stick together and function as one, such as an icon, group them together! Grouping will help when going responsive; because grouped elements will stick together in smaller screens, so editing one object will automatically edit the rest of the group's elements to match.
Lastly, there is no need to upload several photos to the same spot, and we would greatly appreciate if you didn't. When you're designing sliders, galleries, or anything where images will replace each other, RapidUI's best practice is to upload one image as a placeholder and upload the rest separately once you've started your project.
Text layers are text layers. Don't try to make them something they're not!
- Never convert text layers to outlines
- Don’t convert them to images
- Don't change the layer type
- Don't rasterize your text!!!
Why? If it's not uploaded as a text layer, you will not be able to edit the text.
Your text settings (font-family, font-size, line-height, color, etc.) will be copied directly as you set them in Sketch (but can be changed easily). Pay attention to detail because even if your text looks fine, the sizes have to make sense. For example, a title may have a font size of 18px, but a line height of 200px. This will make the line height in your web 200px and can negatively affect the responsiveness of your project.
Also, make sure text direction is always set properly (left-to-right or right-to-left)
Read more in our styling guide.
**Important note - Do not use shared text styles (for now) — we currently don’t support shared text styles. Style your text directly if you want it to upload perfectly (symbols work fine though!). If you have already created your design file using shared styles you can always change this by selecting No Text Style (as pictured below).
A quick note about fonts
Over at RapidUI, we're font-friendly people. We work with Google Fonts, but if you have something more exotic, you're always welcome to upload your own.
Updating your Sketch design
Any changes made in Sketch (after uploading your design to RapidUI) will not be updated automatically. However, there are two ways to upload changes from your design file / upload a new design onto the platform:
- Upload your file as a whole, and show only the layers you wish to upload (hide the layers you wish to be hidden in the platform)
- Create a container on the platform - and upload your PSD/Sketch file containing only the new layers.
RapidUI only supports the RGB color model.