# How to Turn a Figma Layer into Code

> To convert a Figma layer into code using Builder.io, select the target layer from the left-side panel, click Actions at the bottom of the canvas, and choose Builder.io. Tap Export to Code, select View Code, and then click the Copy to Clipboard icon to use the generated code in your projects.

Canonical: https://livedemo.ai/tutorials/how-to-turn-a-figma-layer-into-code/
Apps: Figma
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5005ab56e05a00ffc9a0/preview?step=1

## Steps

1. Head over to the left-side panel and select the layer you want to convert into code.
2. After that, go to the bottom section your design canvas and click 'Actions'.
3. Search for 'Builder.io' and then select it from the suggested results.
4. Tap 'Export to Code' afterwards.
5. Subsequently, click 'View Code' to proceed.
6. After completing these steps, the selected Figma layer will be converted into code. Click the 'Copy to Clipboard' icon to use the code in your projects.