How to Import a Live Website into Editable Figma Layers (Video Walkthrough)

htmltofigma · Updated 2026

Watch the walkthrough

This video shows the full flow: copy a URL, paste it into htmltofigma, convert the page, and paste the result into Figma as editable layers. It also shows the cleanup that makes the result look great — removing hidden overlays, fixing element order, and applying auto layout.

What happens in the video

1. Copy the URL of the live page you want to import.
2. Paste it into htmltofigma, choose full page or a specific section, and click Convert.
3. Wait a few moments while the page is rendered and converted into Figma layers.
4. Copy the Figma design and paste it into Figma with Cmd+V (macOS) or Ctrl+V (Windows).
5. Edit the result. Text stays editable, containers become frames, and you can restructure anything.

Cleanup tips shown in the video

• Remove hidden overlays. Elements that were invisible on the live page sometimes appear as layers. Select them and delete.
• Fix stacking order. A header that should sit at the top can be dragged back into place.
• Apply auto layout. Select the container and set it to auto layout in Figma to tighten spacing and padding — the section instantly looks more polished.

The honest part

The tool is not 100% perfect, but it does most of the job. JS-rendered carousels convert as their visible state (scroll them into place first if they matter), and an image inside a container may occasionally not transfer — drop the original back in if that happens. Everything else — headings, paragraphs, images, colors, and structure — arrives as real, editable Figma layers.