How to export Figma to HTML3 min read

Updated January 31, 2022

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, 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  pixel-perfect HTML from Figma using Anima:

👉 Option (1): Export an HTML code package directly from Figma

1. Download and open the Anima for Figma plugin.
2. Select the frames you want to export as HTML, and click “Preview in Browser” at the bottom of the plugin panel.Entering Anima's Browser Preview from Figma
3. Once you’ve confirmed that your browser preview matches your Figma design, click the “Get Code” button in the top right.Getting code for a Figma frame in Anima's Browser Preview  
4. When the pop-up appears, click “Sync & Get Code,” which will send you to your synced project in the Anima web app. Sync your Figma file to your Anima project and get code
5. In the ‘Export Options’ window that appears, select the “Zip File” option at the top (make sure you also select “Pure HTML” under ‘Code Framework‘ and “Auto Flex” under ‘Layout‘), then click the “Export” button at the bottom.Exporting an HTML code package as a zip file from the Anima web app
6. When your download is complete, unzip the file from your browser’s download bar to view the contents.

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).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 Smart Layers and interactions, just like the final product!Anima's auto-generated HTML rendered in a live browser

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!

👉 Option (2): Get HTML for individual components 

1. Sync your design draft to your Anima project (Learn how to sync your design draft).
2. Go to your synced project in the Anima web app and select the screen you want to get the code from.Selecting a screen from a project in the Anima web app
3. Click the “Code”  icon at the top to switch to code mode.Opening Code Mode in the Anima web app
4. Select any component to instantly inspect and copy its associated HTML and CSS code.View and copy the HTML code for individual components with Anima's Code Mode

Ready to hand developers production-ready code for your Figma designs?

Welcome aboard, let’s get you going!

• Download Anima plugin for Sketch, Anima plugin for Adobe XD or Anima plugin for Figma
• Want to learn how to make responsive websites, and add videos, links, interactions, and plus more? Get started here.