Anima allows designers to create Responsive and Interactive websites right inside Sketch, and export full HTML & CSS, ready for deploy.
Host it with us or Export it
Export code with a single click, or host it with Anima.
Converting design to high-quality code is Anima’s core mission.
In this article, we will go over how to export your Sketch document to an HTML code pack, and what it looks like.
Would you like to learn how to make your website responsive, add videos, links, effects & more? Visit our learn page.
How To Export Code
- Download Anima plugin for Sketch, or Anima plugin for Adobe XD.
- In Anima Panel, click the Export Tab > Code Export.
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.
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.
Automatic Flexbox Layout
Anima Auto-Flexbox is an automatic process that aims to replicate the thought process that developers do.
We used algorithms from the Computer Vision world and built an automated solution that takes any design, and applies Flexbox layout to it.
By default, Anima uses
position:absolute , in order to generate pixel-perfect prototypes. Turn on Auto-flexbox to get
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.
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.