How do I export HTML and CSS from Figma?

How do I export HTML and CSS from Figma?

Figma is a great tool for designing and prototyping web pages. Unfortunately there is not simple way to get your design to export to an actual website or get actually useful HTML and CSS code out of it. 

There is a way to see the CSS of your layers in Figma, you just have to go to Inspect -> Code and select either CSS, Android or iOS but you can't just copy paste it into a web page and expect it to look like your original design. It will not work as you expect. 

How do I export HTML and CSS from Figma?

I've made a recent post about how to convert your figma file to an actual website and I've mentioned that at the moment there is really no simple tool that exports it properly.

There are a few plugins that advertise that they do but the end result is just broken and non responsive. It's not useable as a final product or a live website. You can read more about it here:

How do I turn my Figma design into a Website?

Personally I almost never use the CSS code outputted by Figma. The only uses are the hexadecimal colors, the gradients, shadows and the sizes - but even those might not always work and you have to manually convert them to other unit guides and sizing. 

To summarize, you can't really export your Figma wireframes to HTML and CSS properly. There are plugins but they don't work as they should and the code is non responsive so it's pretty much useless. The only resource is the CSS outputted by Figma but it only works for individual layers and some of the times it doesn't work on actual pages.