Interactive chat

Step 1 of 6

Let's set up our
first project

1 ➔ Drop a link to your design project in Figma

0% completed
May 25, 2021

How To Turn Figma Designs Into HTML And CSS

How To Turn Figma Designs Into HTML And CSS

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.

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 and 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 most of them require a lot of follow-up works and tuning.

A few things you need to know before reading further:

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

Where’s the code in Figma?

Simplifying what makes up a website to the very basics of it, there are the structure, the style and the logic behind how it all behaves. In other words, you’ll need to build things, to prettify them and to add life to your product.

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

Style properties

It’d be fair to start with the most obvious option, which would be finding CS of a design. The reason we say so is that Figma provides the style properties for each element of the design project 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 in 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.

Structure

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. Your choice, unless you plan on hand-coding the structure yourself, would have to be 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.

HTML Generator

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 has to go to your target files, which means either you know well how to create ones or you 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.

HTML <> Figma

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. 

Bravo Studio

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 an environment friendlier for a non-developer, where you make corrections to the data exported.

Bannerify

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 JavaScript export. No other Figma plugin provides that option. The trade-off for it is that it’s an ad hoc thing: it’s only good for banners, which means exporting any other logic from a design is still a problem to solve.

The 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.

Logic

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.

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:

  1. They take some of the work from you. Even though you still can’t automate the entire process, significant progress has been achieved in this field. You can save your time doing the tedious work and leave more for creativity.
  1. They push the progress forward. The no-code revolution in web design and development may not occur in a while, but the world is definitely moving away from manual work to automated conversion where possible.

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

Summing up

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 if you just want to get the basic code elements from your designs, some Figma plugins can help you do it.

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.

More From Our Blog