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:
- Editing any CSS, HTML or any other code requires some solid background knowledge of it. And by any, we mean any. The farthest you can get without it is having fun experimenting. Even in Figma, you need at least a beginner-level understanding of HTML and CSS to assemble files of acceptable quality from the pieces you’ll be getting from designs.
- In the form of code, Figma provides only such design properties as color, size, spacing and so on. It doesn’t do that with the logic behind the elements. So, even having the previously mentioned part covered, you’d still get just the structure and style of your designs; in other words, the layout. But that’s still an achievement! It can save you lots of time and trouble.
- Most of the solutions for Figma are still a work in progress. They function, but you’ll most likely find they impose significant restrictions on what you can convert and how. However, we respect the contribution each of the solutions makes to simplifying the design-to-code transition.
- CSS doesn’t work without HTML as there’s nothing to apply style properties to. Keep it in mind while copying the CSS code from a Figma design. If you paste the CSS of an element into the corresponding file of your future website, make sure you do likewise with the HTML and interrelate the files appropriately.
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.
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.
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.
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.
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.
- Not all types of media and some other elements are supported;
- Some CSS properties are supported not fully or not at all;
- It has troubles reading non-Latin alphabets;
- You can’t recreate buttons;
- You must upload all fonts to Figma, or a best-effort fallback will be used.
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 an environment friendlier for a non-developer, where you make corrections to the data exported.
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.
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:
- 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.
- 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.
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.