How to Get CSS Code From Figma Designs
- George Apostolov
How to Get CSS Code From Figma Designs: step-by-step guide
Inside your Figma design canvas, find and select the layer you want to convert into CSS code.
After that, go to the bottom section and click 'Actions'.
Search for 'Figma to HTML and CSS' and select it from the suggested results.
Head over to the 'Code' tab afterwards.
Finally, the CSS code generated from your Figma design will be displayed under the Style section. Click the 'Copy' icon next to it to use the provided code.
Quick answer: To get CSS code in Figma, select the design layer, click Actions at the bottom, and search for Figma to HTML and CSS. Then, open the Code tab and click the Copy icon next to the generated CSS code under the Style section.
About this Figma tutorial
Extract CSS code from your Figma designs quickly. Select a layer, run the code plugin, and copy your stylesheet. This guide shows how to get CSS Code From Figma Designs in 5 steps, starting with "Inside your Figma design canvas, find and select the layer you want to convert into CSS..." and finishing with "Finally, the CSS code generated from your Figma design will be displayed under the Styl...". The interactive demo above is a click-through copy of the real Figma interface, so you can rehearse each step before doing it in your own account.
Frequently asked questions
How many steps does it take to get CSS Code From Figma Designs?
5 steps. Each one is listed in order above, and the demo highlights exactly where to click.
Can I try it without changing my own account?
Yes. Clicking through the demo doesn't touch your Figma data or settings. Once you know the flow, repeat it in your own workspace.
This tutorial is filed under Figma. Related guides: How to Get to Figjam in Figma, How to Group Objects in Figma and How to Hide Comments in Figma. Last reviewed 05 Oct 2026.
Create your first interactive demo in minutes
No credit card required • Start building today
