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!
A few things you need to know before reading further:
- Editing any CSS, HTML, or any other code requires some solid background knowledge of that code. 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.
- Figma provides the code only for 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. some of them do function, but you’ll most likely find they impose significant restrictions on what you can convert and how.
- However, we respect the contribution to simplifying the design-to-code transition each of these solutions makes.
- 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 clarified, let’s move on to converting Figma designs into code.
Where’s code in Figma?
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.
Style properties – Figma CSS
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.
Structure – Figma HTML
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.
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.
- 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 a non-developer-friendlier environment, where you make corrections to the data exported.
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:
- They take some of the work from you. Even though you still can’t automate the entire development process, significant progress has been achieved in this field. You can save your time by not doing the tedious part of coding 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 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.
Coming soon: Fiwy – Figma code export all in one
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.