Export Sketch to HTML

Guide Overview

In this guide we will go over:

  1. How Anima converts Sketch documents into code
  2. How to export your Sketch document to an HTML Code Pack
  3. What the HTML Code Package looks like
  4. Frequently Asked Questions

How Does Export Code Work

Anima enables designers to export full websites HTML & CSS, directly from a Sketch design.

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:

Nevertheless, sometimes our customers are interested in exporting the package of files to host on their 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.

To learn more, take a look at our guide on How to Publish a Website and Host it With Anima

How To Export Code

Well, it’s pretty straightforward, just click Export in the Export tab.

Export to Code

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

The Code Package

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

Sample Code Package — Download

Code Package Files

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

HTML Files locally

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

CSS Structure

CSS Structure


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.

Yup, you can see it working inside Sketch. Cool

Dynamic Content

How do Breakpoints work?

Breakpoints allows you to create an artboard for each screen width — for example Mobile, Tablet and Desktop. When generating code, Anima 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.

Breakpoints Code

Why did my Forms break?

When you’re hosting your website with us, 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.