How to export Figma to HTML4 min read

If you’re wondering how to convert Figma to HTML without writing the code yourself, you’ve come to the right place. In this article, we’ll show you how to export your Figma designs as production-ready HTML in a few simple steps using Anima.

Anima lets you create high-fidelity code-based prototypes in Figma, Adobe XD, and Sketch, and then export those prototypes as developer-friendly code in just a few clicks.

Going directly from Figma to HTML will allow you to create live web-based prototypes, deploy your own simple websites or landing pages, and hand developers clean code packages for the entire UI to speed up development.

So let’s get to it!

***Are you a visual learner? Check out our Figma to HTML YouTube tutorial.***

How to convert Figma designs to HTML

You can export a complete HTML code package or get individual component code from your Figma design. Here are two easy ways to get HTML and CSS from Figma, using Anima:

👉Option (1): Export an HTML code package directly from Figma’s Dev Mode (available with read-only access in Figma):

Step 1: Enable Dev Mode in Figma

First, open Figma and navigate to the Inspect panel. At the top of the panel, you’ll find a green toggle for Dev Mode. Click it, and then switch to the ‘Plugins’ tab.”

Step 2: Run the Anima Plugin

Next, you need to open Anima’s plugin for Dev Mode.

If you don’t see it in the list, you can type Anima into the search field (see above). From there, you can run the plugin, or pin it to the top of the panel for easy access. 

Step 3: Select a Figma Component, Layer, or Frame

Select any Figma component, layer, or frame to get its corresponding HTML code in real-time. You can then copy the code from the panel, open it in CodeSandbox, or download the code package.

This option is the fastest and the most straightforward for individual components and screens. It is perfect for developer handoff since Dev Mode is accessible in Read Only.

But if you want to export a full project, with several pages and interactions, you will need to use Anima’s web app. But worry not, it is still pretty easy and quick!

👉 Option (2): Get HTML code for a full project with Anima’s web app (edit access required)

Step 1: Run the Anima Plugin in Figma’s Edit Mode

First, open your Figma project in Edit Mode (the main mode) and run Anima’s plugin.

If you already ran Anima in Dev Mode, it will show up under “Recents”. 

Step 2: Sync the Figma project you want to export as HTML

In order to open the Figma project in Anima’s web app, you will need to sync it. (Learn how to sync your design). 

When your design is successfully synced to Anima’s web app, you will get notified in the Anima plugin. Click “Go to Anima” to open a browser tab with a preview of your Figma design.

Step 3: Select your export options (HTML and CSS) and export code

Click “Export code” on the top right, and select “Full Project”. It will then open a popup to confirm the framework you want to export. In this case, we will select “HTML”, “Pixels” (Px), and “Flexbox” (to keep the responsive behavior set in the Figma design).

Click Download ZIP, and voila. Your project’s Code Package is ready.

What’s in the Code Package?

The downloaded Code Package is saved 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).An HTML code package automatically generated by Anima

Once the files are unzipped, you can preview them locally in the browser by double-clicking the HTML file. You’ll be able to see all of your responsive elements and interactions, just like the final product!

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.

Ready to export production-ready HTML code for your Figma designs?

Welcome aboard, let’s get you going!

• Anima plugin for Figma
• Signup for Anima
• Want to learn how to make responsive websites, and add videos, links, interactions, and more? Check out our YouTube channel