Export Design to HTML

Anima enables designers to export full websites HTML & CSS, directly from an Adobe XD or Sketch App design.

Our process of transforming a design into a website involves many steps.

Basically, we’re converting Adobe XD artboards and layers into a bundle of files that includes HTML, CSS, images, and font files, ready to deploy.

Adobe XD to Code

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

There are two ways to export code:

1. Via Adobe XD:

  1. From the Project drop-down menu, select the Anima Project you want to export
  2. Click Export Code at the bottom left corner of the plugin
  3. Select where to save the Code package and click Save.

Download Code from XD Plugin

2. Via the Web App

  1. First, create a Preview in Browser by clicking the button at the bottom of the Plugin panel
  2. Once you open the Preview in the browser, click Sync to Project in the top right corner
  3. And now the Export Code button will appear

Download Code from web app

❗️Important

  • The design must be Sync’d to the Project before it can be exported directly from the web app
  • This is great for developers and others who do not have access to the design file!

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

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