HTML to Figma: turn any website into an editable Figma design in seconds
Paste a URL, and htmltofigma converts the page into real Figma layers: text, images, icons, and auto layout. Copy, paste into Figma, and start designing.
Try it now Free · no sign-up
Paste a URL and get an editable Figma design on your clipboard.
Watch it in action
A live page imported into Figma as editable layers — including the cleanup that makes the result look great.
How it works
From URL to Figma in three steps, faster than rebuilding a page by hand.
Paste a URL
Enter any public website address and pick a screen size.
Convert
htmltofigma renders the page and turns the real DOM into Figma layers.
Paste into Figma
Copy the design and press Cmd+V in Figma. Start editing immediately.
Why designers use htmltofigma
Editable text & layers
No screenshots. Everything arrives as real Figma objects you can select, edit, and style.
Images & icons preserved
Logos, photos, and icons are embedded as image fills so your design looks like the live site.
Auto layout
Flex and grid layouts become native Figma frames with spacing and padding where possible.
No plugin, no sign-up
Works in any browser. Copy, paste into Figma, done.
Guides & tutorials
Learn the workflows designers use every day with htmltofigma.
How to import a website to Figma
Step-by-step: turn any URL into real Figma frames, text, and images.
Video: live website to Figma
Watch the full walkthrough, including cleanup and auto layout.
A/B testing with Figma
Copy a live section and build test variants as editable layers.
Shopify to Figma
Convert a storefront into clean, editable design layers.
Frequently asked questions
Is htmltofigma free to use?
Yes, converting a page and pasting the result into Figma is completely free. There are no sign-ups and no credit card required.
Do I need a Figma plugin to use htmltofigma?
No. htmltofigma copies the design to your clipboard, and you paste it straight into Figma with Cmd+V (macOS) or Ctrl+V (Windows). No plugin needed.
What does the converted design look like in Figma?
You get real, editable layers: text stays text, images and icons stay images, and containers become frames, with auto layout where the source layout can be reproduced.
Which screen sizes can I convert?
Desktop (1280px), tablet (768px), and mobile (390px). You can also capture the full page height or just the first screen.
Do I need coding skills to use it?
No. Paste a URL, pick your screen size, click Convert, and paste into Figma. If you can copy and paste, you can use htmltofigma.
How accurate is the conversion?
Honestly? It's not 100% perfect, but it does most of the job. Text, images, colors, and layout convert cleanly on most marketing pages; complex JS-rendered content and animations are captured as their rendered state. Expect to delete a few hidden layers and apply auto layout here and there after pasting.