In this article we will go over:
- How Anima converts Sketch documents into code
- How to export your Sketch document to an HTML code pack
- What the Package Code looks like
- Frequently Asked Questions
Anima allows designers to create Responsive and Interactive websites right inside Sketch, and export full HTML & CSS, ready for deploy.
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
When hosting with Anima, we're doing numerous optimizations to improve the speed of the site loading time.
- 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 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:
For our example we are using a sample Portfolio website: 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.
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 😎
📲 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 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.