A magic button that converts Sketch files into HTML

Sketch to HTML Cover

Here we are again. Reflecting on the past year and visualizing about the new one. This is the time of a fresh start where anything is possible. When I think about the past year, a lot of design things comes to mind – one of them are the “Should designers code?” articles that we could find all over the place through the year.

While I won’t go into this debate, I’d like to point out that every designer should at least be familiar with the fundamentals of the medium they’re designing for. And no, I’m not even talking about learning how to code.

If you’re designing websites, spend a few hours with a front-end developer. Ask them about their struggles and limitations. Just by learning about the problems they’re facing with will make a big difference on how you design websites. All of that without learning a single line of code.

Please don’t get me wrong, knowing the coding part can be extremely useful. All I’m trying to say is that it’s nothing wrong if you can’t code. Although I do know how to code websites, I stopped taking on front-end development projects because I like designing more. For the last few years, I’ve been specializing in mobile design. The last front-end project I’ve done was in late 2015 when I built my personal website.

Becoming a unicorn is not necessarily a good or a bad thing. Everything has pros and cons. My advice to you is to follow your passion. If you don’t like to code, then don’t do it.

Today I’m going to show you a magic trick that will help you convert your Sketch app designs into static HTML pages with just one click. Whether you know how to code a website or not this is going to be useful, that’s a promise.

To achieve that 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 app file which you’d like to convert into static HTML site. If you don’t have any designs, you can download the one I’m going to use as an example. 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!

Export as front-end project

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.

Protoship Annotation

Layer Structure

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.

Naming Convention

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, I’m going to 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 I’m going to rename it to headerBackground. Then I’m going to rename all the header navigation links into a link. Home navigation link is a component because it has underline, so I’m going to 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 and Team. Inside Team component, there is another component called Team Member. I’m going to rename these components using UpperCamelCase. Section Header will become SectionHeader and so on.

In TeamMember component there are three elements: Avatar, Name, and Bio. Because they’re just layers, I’m first going to 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 I’m going to group these two layers and convert it into an image (Layer > Flatten Selection to Bitmap). I’ll rename this layer to an avatar. This is how About Us section looked before and after following UIPad structure and naming rules.

Before and after structuring

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 app 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.

Preview design in browser

While there are still some things to do after downloading this project, I’m blown away 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!

Feel free to let me know if you encounter any barriers when converting your designs into static HTML pages with UIPad.