Figma Code Export 101: HTML, CSS, and More?

Figma is an online design tool famous for its convenience among UI/UX experts. We love using it, too: for many reasons. One of the most valuable features it provides is code export options or, rather, opportunities. We prefer calling them opportunities because, for most of the part, you’d have to try harder than you might expect to put together a decent-quality code file that would recreate your design in a website. So, how do you go about extracting HTML, CSS, and Figma code export in general?

You may hear different opinions regarding code export in Figma: that this feature is the most helpful thing a layout designer could hope to have; that it misleads the non-pro folks with promising a lot more than it actually provides; you name it. In short: all of them are only partially true. We’d like to review the tools people currently use the most (at least, according to what we read in the reviews) to show more of the picture. Hopefully, that will help you find your perfect way of working with it.

TL;DR: Getting CSS from a Figma design is all good, but the rest is trickier. There are plugins you can try using, but the truly cool solutions are still on the way. They won’t keep you waiting for long though!

That clarified, let’s move on to converting Figma designs into code.

What makes a website, if we simplify it to the very basics, is the structure, the style, and the logic behind how it all behaves. In other words, to create a website, you need to build things, to prettify them, and to add life to your product.

How can you take these out of a Figma design project? There are options! We’ll go one by one.

It would be fair to start with the most obvious option, which would be finding the CSS of a design. We call it obvious because Figma provides the style properties for each element of the design project (you can find it in the right sidebar). You click on an object of your selection and check under the Code tab, and there it is (in fact, you can also export the properties in XML or Swift for Android or iOS, respectively).

If you don’t have the editor access to the Figma design project, you can copy the code from the Inspect tab. It works regardless of your Figma plan or access level (available under the Can view access).

You can take the code from there and paste it into the .css file of your website, but that would not suffice for the style export. As we’ve mentioned before, you need an HTML file to go along with the CSS, and all the elements must be correctly referred to in both files.

Now, things get a bit more intricate when it comes to the structure of a design. There’s no direct way to export HTML from Figma yet. But that’s not the dead-end of the problem. Unless you plan on hand-coding the structure yourself, your choice should fall on some third-party solutions.

The capabilities of Figma as design software stretch beyond the initially implied functionality. Figma, already a super powerful tool, can let you achieve even more with the help of plugins: much like WordPress. Most of the plugins are the invention of enthusiastic web engineers that wanted to adapt Figma designs for further development.

This is the creation of the Figma community. With this plugin, you can export the HTML, CSS, or fonts from your design element by element – a lengthy process, but still an option. You get a ready-to-copy HTML with the corresponding CSS, which you can use for your future site’s structure. It’s as simple as clicking on an element, selecting the tab according to what you need to copy (HTML, CSS, or Fonts tabs), and taking the code from there. This code goes to your target files, which means that you either know well how to create ones or use some plain base for your website. On WordPress, you can find a starter theme that will serve as a template on which you’ll apply your design.

This plugin allows both importing and exporting the HTML of your Figma designs. It goes by layers instead of by elements, which may be more convenient and less time-consuming. As the name implies, the plugin is capable of replicating the overall geometry of the layout of your Figma design. However, it comes with a bunch of limitations.

In essence, it means that the design conversion product would require a lot of fixing and fine-tuning. So, if we compare this Figma plugin to the previous one, it provides more automation for the price of losing some of your design on the way. 

For the app developers, there’s another tool that performs the conversion. Even though this app isn’t aimed at web development assistance (it doesn’t export HTML or CSS), we believe it’s still worth mentioning. The reason for it is that in Bravo Studio, they’ve gone a bit further than other tools managed to do in automating the conversion process. Maybe with some of their future updates or new version releases, we’ll see the turn of tides in no-code development based on Figma designs.

This plugin turns your Figma designs into XML for Android or Swift for iOS completely automatically, leaving no need to code anything manually. Instead of coding, they offer you to work in a non-developer-friendlier environment, where you make corrections to the data exported.

This is a Figma plugin made specifically for exporting banners from designs. Just like with any other solution, you can convert them into code and use the result for your website. A serious advantage of this tool is the export of animated elements. Unfortunately, that’s about it for interactivity export – the plugin doesn’t take out any JavaScript as the plugin developers seemed to have initially mentioned as their goal.

Bannerify developers claim a cat can use it. Though we’d say don’t skip the tutorial, using it is indeed a breeze. Only make sure you understand what to do with the outcome.

We should also mention that it’s a commercial tool. The pricing plan for it varies depending on your needs and starts from $19 billed monthly.

Here’s where we’ve come to the limit of what you can automate in the process of enlivening your design. Apart from the banner animation that the plugin from above helps export, there’s no way to get anything non-static without getting knee-deep into coding. So, interactivity-wise, Figma code export still has no actual shortcuts.

With that in mind, you might wonder what good is in converting a Figma design into HTML and CSS at all if you don’t get a nice live website out of it?

Well, let’s try a different take on it. We see these tools as helpful because:

However, the convenience of all this software doesn’t entirely compensate for coding skills. A design is still mostly a picture, and it can’t easily be turned into a logical form. As of the current situation, neither of the solutions allows someone outside the web development domain to build a website (yet?..).

The improvement in no-code design-to-website doesn’t change the principle of the process. It lets those who develop a digital product not waste time on something that can be automated.

Since we know a lot about Figma to WordPress custom conversion, we’ve managed to work out an automated solution. Fiwy is the app we’re about to launch: it’s going to convert Figma to WordPress automatically and provide you both code and block versions of your interfaces. That is, you can simply insert a link to your design file and get it turned into HTML, CSS, and JavaScript or into Gutenberg blocks. And it stands for the entire website interface – right, Fiwy is that cool!

If you have a design in Figma and want to turn it into a quality website, you’ll be on the safe side getting help from professionals. But, soon enough, Figma code export will be possible and widely available – solutions for it progress day by day.

We always recommend editing code only when you’re sure about what you do, and we won’t say anything different here. However, if you have a decent understanding of layout design as a web development aspect, you can even try and make a website out of a Figma design.