Capture your websites as code layers or design layers
Use Capture to bring your live website into Figma as interactive code layers, or structured design layers. Start from what you already shipped without rebuilding from scratch.
Bring your live websites into Figma
Turn your live website into editable design or code layers. Import HTML to Figma in one click with the Figma Chrome extension.
Figma Chrome Extension
- START FROM PRODInstall extension
- page to protoype
Bring in a full page or multiple elements
Install extensionCapture a full page or select the elements you need straight from your browser, then paste them onto the Figma canvas. No codebase, terminal, or coding agent required.
- riff side by side
Explore code and design side by side
Install extensionCompare how experiences look and feel, then refine ideas with your team. Interact with captured code layers or edit text, colors, and layout in design layers, all on the same canvas.
Use the Figma Chrome extension to capture your live website or select multiple elements straight from your browser, then paste them onto the Figma canvas.
To get started, install the Figma Chrome extension and sign in with your Figma account. Open the webpage you want to work from, choose Capture code or Capture design, and capture the full page or select the elements you need. Then paste your capture into a Figma file. You don’t need access to the website’s codebase or a coding agent.
Choose based on what you want to do with the captured content:
- Capture code brings your web content onto the canvas as code layers, so you can interact with and build on your user's existing experience. Captured code may not fully reproduce the original website’s interactions or functionality.
- Capture design converts your web content into editable Figma design layers. Use it when you want to change text, adjust colors, rearrange the layout, or explore a new visual direction.
For example, you can paste a captured code layer next to an updated design experience to compare your proposed changes. Both live on the same canvas, so your team can review them together.
Yes, the Figma Chrome extension is free to install. Bringing your captured content into Figma as code layers is currently in beta. This does not consume AI credits. However, AI credits may be used if the coding agent needs to fix errors or make adjustments to help the content run properly.