How do I export code from Figma?

How do I export code from Figma?

Great, so you just finished designing your website in Figma and you're now looking for a way to export it as code so that you can put it on the internet. Unfortunately it's not that simple, there's a reason there still are front end and back end developers that are getting paid a lot of money to code. 

How do I export code from Figma?

Here's a few options you have when it comes to getting code out of your designs:

You can either use the CSS tool that's already in Figma, but clicking an element -> inspect -> code.

Or you have a second alternative if you're looking to export a whole page with HTML, CSS and all the images.

There's a plugin called FIGMA to HTML which is currently free, all you have to do it is select a wireframe then launch the plugin.  Once it pops open you'll be able to see all the HTML code, if you want to see the CSS use the dropdown menu on top. 

To export everything in a ZIP file just click the Download Code button. 

The tool is free to use currently and it will probably continue to be free to use. 
The downside is that the exported design is not accurate enough and not even close to the original layout. Especially if your files are relatively complex. 

In short - unfortunately there is not easy or real way to export designs from figma directly and ready to be published as standalone websites. You can use figma to export simple CSS or you can use plugins to export complete website but you'd have to work a lot on sanitizing the code and fixing alignment issues so at the end of the day if you're looking for something highly polished and responsive I would suggest you look for a developer.

Currently there is no such tool and you can't do it in figma. And I don't think there will be anytime soon because it's just way too complex and difficult to do. 

If you're looking for a nocode alternative to designing website I suggest you give webflow a try.