How to Export Figma to HTML

Get developer-friendly HTML code from your Figma design

Overview 👀

Anima lets designers create high-fidelity prototypes with Sketch, Adobe XD, and Figma, whilst allowing developers to export developer-friendly code in a matter of a few clicks. The end result is a clean code which is why developers love to use it.

Exporting your Figma design to HTML is geared more toward developing high-fidelity prototypes and websites. In this article, we will guide you through how to do this, what it looks like, and just how easy it is.

How To Export Code?

You can export HTML code directly from Figma, or alternatively directly from Anima’s web app, here are three ways in which you can export HTML from Figma:

👉 Option (1): Exporting Code directly from Figma

1. Download the Anima for Figma plugin.
2. Select the components that you want to get the HTML code for.
3. Select “Export Code” at the bottom of the plugin panel.

Click “Export Code” on the bottom left corner on your Anima plugin in Figma

👉 Option (2): Exporting Code using Anima’s Web App

Here you can download the code for your designs directly from the Anima’s web app.

The interesting thing about this option is that it allows you to get code for a specific component as well, rather than the full design package.

Here’s how you can do it:

1. Sync your Figma design to your Anima project (Learn how to sync your design draft).
2. Select the screen you want to get the code of.
3. Switch to code mode, select any element and get the HTML code.

Choose an element and copy the HTML code

4. You can also simply click Download Code in the top right corner of the Anima web app, and download the full code package to your desktop.

Click on “Download Code” on the top right corner to get the full code package

What’s in the Code Package?

The downloaded Code Package saves on your computer as a zip file in your selected location. In this zip file, you can find all the files for your design (this includes the HTML, CSS, images, and fonts files).

Download the code package to your desktop to preview your files locally

Once the files are unzipped, you can preview them locally in the browser, you will also see all its Smart Layers and interactions, just like the final product!

From Figma to developer-friendly HTML code

Opening the files in a text editor will present to you a well-structured HTML and CSS code.

• For every designed screen you are provided with its HTML and CSS file.
• The screens with Breakpoints share the same HTML and CSS file.

Want to check out a sample Code Package? We thought you might be, click here to download!

Want to get started with Anima?

Welcome aboard, let’s get you going!

• Download Anima plugin for Figma, Anima plugin for Adobe XD or Anima plugin for Sketch,
• Want to discover how to make responsive websites, how to add videos, links, different effects (plus more)? Learn more here.