The best HTML to Figma plugins in 2026
The most-used HTML to Figma plugin is html.to.design by divRIOTS, with 2.7M users. You give it a URL and it rebuilds the page as editable Figma layers. It's a paid plugin, listed at $18 a month in our data.
Top 20 picks
html.to.design
#1 · 2.7M users
Quick answer
Our top picks
- #1
Most used
html.to.design
by divRIOTS
html.to.design converts a live website into editable Figma layers and works in Figma Design, FigJam and Figma Slides. It suits redesigns, audits and competitor studies where you'd otherwise redraw a page by hand. It's a paid subscription at $18 a month in our data, which is a lot for occasional use.2.7M 39KFree + $18/mo - #6
Best for PDFs
pdf.to.design
by divRIOTS
pdf.to.design imports PDF pages as editable layers or as pixel-perfect images. Its listing says files stay on your machine and never reach a server, which matters for contracts, reports and client decks. Complex PDFs can still come in with fragmented text boxes, so check the layers before editing.245K 2.7KFree - #8
Best free website importer
HTML to Figma
by ReforeAI
HTML to Figma by Refore turns web pages into editable Figma designs and says it handles AI-generated pages too. It's listed as free with no in-app purchases in our data. At 129K users it's much smaller than html.to.design, so expect fewer tutorials and a smaller track record on tricky layouts.129K 1.6KFree
The full list
The 20 most-used Figma plugins for website to figma
- 012.7M39KFree + $18/mo
- 02
Convertify Sketch/Adobe/Google
Export to Sketch, XD, After Effects, PSD, InDesign — or — Import XD, Illustrator, PSD, InDesign, PDF
Free + paid · 5.3K likes
539K5.3KFree + paid - 03
337K2.7KFree - 04
Codia AI Design
Capture, Transform, Create! Transform Screenshot into Stunning Editable Figma Designs with Ease!
Free · 6.1K likes
334K6.1KFree - 05
Web to Figma
Import any website or HTML code to Figma editable design. Goodbye screenshots.
Free + paid · 3.5K likes
267K3.5KFree + paid - 06245K2.7KFree
- 07
Image To Figma Design
Turn any UI screenshot into fully editable Figma layers — real components, auto layout, text & color
Free · 863 likes
148K863Free - 08
HTML to Figma
Transform any webpages into fully editable Figma design, AI-Generated page also support
Free · 1.6K likes
129K1.6KFree - 09
92K2.2KFree - 10
57K373Free - 11
54K1.2KFree - 12
Screenshot2Design
Convert screenshot into editable design files! Mock up customizing in just a matter of second 🔥
Free · 345 likes
49K345Free - 13
code.to.design playground
Instantly transform your code snippets into fully editable Figma designs.
Free · 973 likes
49K973Free - 14
47K1.1KFree - 15
html-to-figma DEV-plugin
Free · 139 likes
46K139Free - 16
HTML to Figma
Convert any website, HTML,CSS,JS into editable Figma designs with one click. Just 3$/month/unlimited
Free · 383 likes
45K383Free - 17
45K1.1KFree - 18
illustrator.to.design
Import your Adobe Illustrator files (.ai) as fully editable Figma designs
Free · 709 likes
42K709Free - 19
UXMagic
Generate editable Figma designs from prompts, screenshots, websites, sketches, PRDs, & system fast.
Free · 397 likes
39K397Free - 20
CodeTea
Magically transform any screenshot into 100% editable Figma designs in seconds.
Free · 190 likes
39K190Free
Buying guide
What to look for
Figma Design imports .sketch files natively (drag the file in or use File > Import), and Sketch symbols become components. It has no native import for web pages or PDFs, so both need a plugin. If you only need a reference, a full-page screenshot is still the quickest route; import to editable layers when you plan to change the design.
This list covers three kinds of import: live websites read from their HTML and CSS, documents (PDF, Photoshop, Illustrator, Office), and screenshots rebuilt by AI. divRIOTS makes six of the top 20. A URL import reads the real page structure, so it usually beats a screenshot rebuild for text, fonts and spacing.
- 01
Fidelity
Look for text that stays live text, real fonts, images as image fills, and layout converted to auto layout where possible. Test on a page with complex CSS before committing.
- 02
Viewport control
Importing desktop, tablet and mobile widths of the same page saves a lot of manual resizing. Check whether the plugin lets you set widths or only captures one.
- 03
Pages behind a login
A URL importer can't see dashboards or staging sites that need you to sign in. Some tools offer a browser extension or HTML paste for those pages; check before you buy.
- 04
Privacy
PDFs and internal pages can hold sensitive content. pdf.to.design says it processes files on your machine; most other importers send the content to a server.
- 05
Pricing model
The top importer is a monthly subscription, while several alternatives are free or sell extra imports inside the plugin. If you import a few pages a year, a free option is probably enough.
FAQ
Frequently asked questions
Can you import a website into Figma?
Not natively. You need a plugin such as html.to.design, Web to Figma or HTML to Figma by Refore, which read a URL and rebuild the page as layers. The result is a starting point: expect to rename layers and tidy auto layout.
Can Figma import a PDF?
Figma Design has no native PDF import. pdf.to.design and Codia AI PDF import pages as editable layers; PDF to Figma brings them in as images, which is enough for reference or markup.
How do I turn a screenshot into an editable Figma design?
Use an AI rebuild plugin like Codia AI Design, Image To Figma Design or Screenshot2Design. They guess the layout from pixels, so results are rougher than a URL import. More options are on our AI plugins list.
Is html.to.design free?
It's listed as a paid plugin in our data, at $18 a month. Check its Community page for a trial or free allowance before you subscribe. HTML to Figma by Refore is a free alternative with fewer users.
Can I import Sketch, Adobe XD or Photoshop files into Figma?
Sketch files import natively through File > Import. For XD, Illustrator, Photoshop and InDesign you need a plugin, such as Convertify or the psd.to.design and illustrator.to.design plugins. See also our import and export plugins.
Keep exploring
Related lists and guides
Figma to Code
turning designs into code
See the top picks
Import & Export
importing and exporting files
See the top picks
PDF & Print
PDF export and print-ready files
See the top picksGuides
- How to Import a Website into FigmaImport a live website into Figma as editable layers with Figma's Chrome extension or html.to.design, and move Canva or Uizard designs in with SVG or PDF.
- How to Export Code from Figma MakeExport code from Figma Make as a zip or push it to GitHub, run it locally with npm, open it in VS Code or Cursor, and copy the preview into Figma as layers.