How to Convert Figma Designs to HTML and CSS

Quick summary

Converting Figma designs to HTML and CSS lets designers and developers extract production-ready code directly from their design canvas. Using the Figma to HTML and CSS plugin, you can select any layer, open the Code tab, and copy styled markup in seconds.

Steps

1. In your Figma design canvas, find and select the layers you want to convert to HTML and CSS.
2. Head to the bottom section of the panel and tap Actions.
3. Search for 'Figma to HTML and CSS' and select it from the suggested results.
4. In the pop-up window, navigate to the Code tab.
5. The selected layers are now converted to HTML and CSS — click the Copy to Clipboard icon next to Style and Code to use them externally.