Did you know that you can now convert your @sketchapp designs into static HTML pages? That’s right, there is a magic button that converts Sketch files into HTML. Whether you know how to code a website or not this will surely be useful.
Our friends from Twitter user @SketchTricks, posted a tweet about this really cool trick. Here’s how to do it. You can read the whole article here –> https://sketchtricks.com/sketch-to-html-with-uipad/
To converts Sketch files into HTML, we’re going use Protoship’s fantastic UIPad Sketch plugin. This plugin is currently still in private beta, but you can request an invite on their website.
Download and install their plugin and open a Sketch file which you’d like to convert into static HTML site. If you don’t have any designs, you can download the example here. Now go to Plugins > Protoship > Export as front-end project and wait a few moments (depending on how complex your designs are). This is where all the magic happens!
First time around you’ll have to create a Protoship account. As you log in, they’ll ask you to create a new project or to choose from any previously created projects. Upon selecting a project, Protoship will open a new page in your browser. This is where you’ll be able to preview the site in your browser, see its front-end code and download the whole project as a static HTML site.
You might have noticed that some layers are missing. For UIPad to work properly and produce usable code, we have to follow some ground rules such as layer structure and naming conventions that I’ll go through below.
There’s a basic layer structure that should be followed. Group together all the layers that are part of the same component. If you’re familiar with the Atomic design methodology, these components are called Molecules. Another idea is to convert any reusable components into Symbols.
When naming your layers and groups there are two rules that you should follow. First, convert all layer names into lowerCamelCase using only letters and digits (e.g. headline, galleryItem1, footerBackground). Groups that are components should be renamed using UpperCamelCase (e.g. Header, ContactForm, BtnFollowUs).
While these are the only two rules you have to follow for UIPad to produce results you wanted, don’t just do it for the sake of it. Layer organization can save hours, in the long run, so take it seriously.
Rename Layers as soon as you create them and be as descriptive as possible. UIPad creates classes in the code and assigns them to all of the layers based on layer’s name. This is why it is so important for you to organize your documents.
Renaming Layers Following UIPad Naming Conventions
Duplicate your web design artboard, then start renaming the layers and groups following the rules mentioned above. If you’re following my example, I’m going to rename the sections first. They should be converted into UpperCamelCase because these sections are components.
Next, select a Header’s background group and convert it into an image by going to Layer > Flatten Selection to Bitmap. This is not a component, so lets rename it to headerBackground. Then rename all the header navigation links into a link. Home navigation link is a component because it has underline, so let’s group it and rename it to LinkSelected.
I won’t write exact step by step for all the layers I’ve renamed, but I’ll go through About Us section because it might be tricky at first.
In About Us section there are two main components:
- Section Header
Inside Team component, there is another component called Team Member. Let’s rename these components using UpperCamelCase. Section Header will become SectionHeader and so on.
In TeamMember component there are three elements:
Because they’re just layers, let’s rename them using lowerCamelCase. The avatar is made of two layers – an image and oval shape with a mask. Since UIPad doesn’t recognize masks let’s group these two layers and convert it into an image (Layer > Flatten Selection to Bitmap). Let’s rename this layer to an avatar.
This is how About Us section looked before and after following UIPad structure and naming rules.
After you’ve gone through the whole document, run the plugin again, and you should be able to see the difference. If some layers don’t look like in the Sketch file, you’ve probably missed something. Three things could go wrong:
- Layers that represents a component aren’t grouped together
- Incorrect use of the camel case naming convention
- Elements with multiple fills and masks aren’t converted into bitmaps
Now you can preview your design in a browser to see how it looks live. Once you’re happy with the result, you can download the whole project as HTML or React.
While there are still some things to do after downloading the project, it’s pretty amazing how UIPad optimizes the design to code process. It can save you hours if not days in development time. Whether you code or not, I’m sure you’ll find this plugin beneficial.
From here all you need to do is to open you favorite text editor and add interactivity by connecting pages together. There you have it, a fully working website!