How to Export Adobe XD to HTML - Anima Blog
Design to code

How to Export Adobe XD to HTML4 min read

Reading Time: 4 minutes Automatically Generate HTML from an Adobe XD Design

How to Export Adobe XD to HTML

How to Export Adobe XD to HTML4 min read

Reading Time: 4 minutes

Anima allows designers to create prototypes that feel real inside Sketch, Adobe XD, and Figma. Developers can export designs as HTML & CSS, or React code.

Overview & Requirements

In this article, we will go over everything you need to know to export your Adobe XD document to an HTML code package.

To convert an Adobe XD design into code, you will need:

  1. A design made in Adobe XD using Anima [Download our XD sample file]
  2. Download and install the Anima plugin for Adobe XD
  3. An Anima account with a Pro Plan

How To Export Code

The code can be exported either directly inside Adobe XD or from Anima’s web app.

Via Adobe XD:

  1. In Adobe XD, open the design you created using Anima [Sample File]
  2. Click Export Code at the bottom of the plugin panel
  3. Select where the Code Package will be saved and click Save.

how to Export Code from designs with AnimaClick Export Code, then save the Code Package locally.

Via Anima’s Web App

This is an excellent option for developers and others who do not have access to the Adobe XD document.

Before other team members can export it as code from the web app, the design must be synced to the Anima Project.

get code from designs with AnimaClick Preview in Browser > Sync to Project.

  1. Once the design is synced to the Project, click Download Code in the top right corner.
  2. Select where the Code Package will be saved and click Save.
Download HTML code for Adobe XD designs

Download HTML code for Adobe XD designs

Inside The Code Package

Now the code has been exported as a Code Package in a zip file that contains the HTML files, CSS files, images, and fonts.
Want to see what it looks like? Download sample Code Package.

Code Package from designs

Code Package

Once the files are unzipped, they can be previewed locally in the browser with all its Smart Layers and interactions just like a live website!

Open HTML files locally in your browser for designsOpen HTML files locally in your browser

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

Design to html with AnimaHTML file

CSS file for a design with AnimaCSS file

• Each screen design gets it’s own HTML and CSS file.
• Screens with Breakpoints share the same HTML and CSS file

Export Code F.A.Q.

Absolute and Relative Positioning

By default, Anima uses position:absolute in order to generate pixel-perfect prototypes. Turn on Auto-flexbox to get position:relative 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.

To turn Auto-Flexbox on, click on the Export Code settings and check Auto-Flexbox.

Now, when we have a longer title, it pushes the content below instead of overlapping it.

Auto-Flexbox with Anima in action.

Auto-Flexbox in action.

Is the Code Responsive?

Yes! If you applied Adobe XD’s Responsive Resize to your design, the exported code, and preview in the browser, will be responsive. Learn how it works.

Design with Responsive Resizing previewed on AnimaDesign with Responsive Resizing previewed on Anima

How do Breakpoints work?

Breakpoints allow 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.

Desktop, Tablet, and Mobile BreakpointsDesktop, Tablet, and Mobile Breakpoints

Breakpoints are efficient since it uses native CSS media queries. It allows the browser to display only the screen design that fits the current browser window size.

Another bonus is that images are loaded only for the user’s screen size, sharp and not oversized. And, we’re loading it top to bottom for making it even slicker.

All Breakpoints in one CSS fileAll Breakpoints in one CSS file

Hosting a Website with Forms

When you’re hosting your website on Anima, we also give you a tiny backend server to support your forms. It allows form submissions to be sent to that server and stored 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.

Ready to Start?

Download Anima plugin for SketchAnima for Adobe XD, or Anima for Figma.
Visit our Anima 101 for more resources

|

Marketing Content Manager

An avid writer and a research machine. Passionate for telling the story behind every product. An extrovert and a people person. Loves nothing more than a good ol’ pamper day.

Leave a comment

Your email address will not be published. Required fields are marked *