Design + Sketch App — Medium | Anima App

Automatically Generate HTML from a Sketch Design

For our example we are using a sample Portfolio website: http://doe.myportfolio.design/

☝️Background

Launchpad is a plugin for Sketch that enables designers to publish real websites directly from Sketch.

Our process of transforming a Sketch design into a website involves many steps. Basically, we’re converting Sketch artboards and layers into a bundle of files that includes HTML, CSS, images, and font files, ready to deploy.

🖥 Host it with us or Export it

Once the bundle is generated we’re doing numerous optimizations to improve the speed of the site loading time. Stuff like zipping text-based files, optimizing PNG image files, using Cache-Control headers for browser caching in our hosting servers and more.

Nevertheless, sometimes our customers are interested in exporting the package of files to host on thier service or add some custom logic to it.

👩‍🎨 We believe the design is yours. And while we encourage you to host it on our fast servers, whenever you want to export it — Well, that is your right.

In this article we will go over how to export your Sketch document to an HTML code pack, and what it looks like. If you’d like to know how to make your website responsive, add videos, links, effects & more, explore the docs, or start with this 101 tutorial.

👉 How To Export Code

Well it’s pretty straightforward, just click Export HTML Code.

For our example we are using a sample Portfolio website: http://doe.myportfolio.design/

And here is a video tutorial (4:10):

📦 The Code Package

The Code Package is a zip file that contains HTML files, CSS files, images and fonts.

A sample package of exported Sketch to HTML — Download

Opening the HTML files locally present the website perfectly in your browser.

If you open the files in a text editor you’ll see a well structured HTML and CSS.

Ready to Start?

Get Launchpad here, Explore the docs, or start with this 101 tutorial.

FAQ

In order to keep your website pixel-perfect, easily made responsive, load crazy fast, yet clean & readable — We made some choices for you about the code style. Here are some questions we get about code packs.

📐 Why Absolute Positioning?

Developers tend to use CSS relative position, while Launchpad composes CSS with absolute position by default. The upside here is getting high fidelity, bringing your design as close as possible to pixel-perfect in browser. You’re not likely to see a line break where you didn’t expect it (relative position downside).

✂️ How to work with Dynamic Content?

Usually, most of your content is static, rather than dynamic — i.e logos, titles, menu buttons, backgrounds, etc.

However, if you give your exported code to a developer, and need layers to move relatively to one another, simply use the Stacks feature. When you use Stacks, layers expand and push each other. The composed CSS uses Flex-boxes rather than absolute position.

Stacks also support symbol overrides for text, and hiding layers to realign.
The cool thing is that it’s also visible inside Sketch 😎

Yup, you can see it working inside Sketch.

How do Breakpoints work?

Breakpoints allows you to create an artboard for each screen width — for example Mobile, Tablet and Desktop. When generating code, Launchpad makes a single HTML file and a corresponding single CSS file from these artboards.

Breakpoints are efficient since it uses native CSS media queries. It allows the browser to skip rendering everything that isn’t relevant for the current screen size.

Another bonus, is that images are loaded only for user’s screen size, being sharp and not over sized. And, we’re loading it top to bottom for making it even more slick.

Why did my Forms break?

When you’re hosting your website on Launchpad, we also give you a tiny backend server to support your forms. It allows users to send to that server, and we store it for you.

This server-side code cannot be simply exported and included in the code package, as it needs to run on a server rather than on the browser (which is called client-side code).

Therefore, when exporting code with forms, you’ll have to implement your own server to capture form submissions, and store your data.

👋 We hope you enjoy creating awesome websites using Launchpad. If you want to share what you’ve created join us at https://www.facebook.com/groups/animaapp/

How to Export Sketch to HTML was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.