Convert any website into fully editable Figma designs. Requires the associated Figma plugin!

Latest Version

Version
0.0.152
Update
December 3, 2024
Size
333KiB
Developer
Category
Users
300,000+
Rating
4.68056 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Scripting
Debugger
Downloads
Storage
WebNavigation
See more

html.to.design Extension

With html.to.design, convert any website into fully editable Figma designs. Even private webpages behind a log-in ✨ Leverage an existing website and import its html to Figma to start your own designs, without building each element from scratch.

Before going any further, please note that this Chrome extension is a companion to the html.to.design Figma plugin, and you’ll need to install the Figma plugin first.

How it works:

1. Install the html.to.design Chrome extension by clicking on ‘Add to Chrome’.

2. Navigate and log in to the page you would like to import into Figma. (This extension is especially designed for private pages behind a log-in. To import a public website, you can use our Figma plugin without the need for the Chrome extension).

3. Click on the html.to.design extension icon in your Chrome top bar.

4. The extension will automatically start extracting html from the page. (You’ll see the following message in your browser: `html.to.design started debugging this browser`. Don’t worry, this means everything is working as expected.)

5. Once the download is complete, head over to Figma and launch the html.to.design plugin.

6. You’ll see a big box where you can directly drag and drop the file generated and downloaded by the Chrome extension.

7. html.to.design will immediately start importing the page into Figma, and you’re all set!

8. Happy designing!

-------

Powered by story.to.design technology 🚀

-------

Notes:
- In order to best map what you see in your browser to Figma, we need to access Chrome's debugging features.
- We don't store or log anything outside of your browser. Everything stays local, we might add anonymous analytics in the future.
- Keep in mind that this Chrome extension is still work in progress, and while we strive for pixel-perfect, it may not always be there yet.

Thank you for your support and patience.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "author": "\u2039div\u203aRIOTS", "description": "Convert any website into fully editable Figma designs. Requires the associated Figma plugin!", "name": "html.to.design", "version": "0.0.152", "icons": { "16": "icons/16.png", "19": "icons/19.png", "32": "icons/32.png", "38": "icons/38.png", "48": "icons/48.png", "64": "icons/64.png", "96": "icons/96.png", "128": "icons/128.png" }, "permissions": [ "activeTab", "scripting", "debugger", "downloads", "storage", "webNavigation" ], "action": { "default_icon": { "16": "icons/16.png", "19": "icons/19.png", "32": "icons/32.png", "38": "icons/38.png" }, "default_popup": "src/entries/popup/index.html" }, "background": { "service_worker": "serviceWorker.js", "type": "module" }, "host_permissions": [ "*://*/*" ], "manifest_version": 3, "commands": { "capture-full": { "suggested_key": { "default": "Shift+Alt+E" }, "description": "Capture full page." }, "capture-selection": { "suggested_key": { "default": "Shift+Alt+D" }, "description": "Capture selection." } }}
Read more

Similar Extensions

icon

HTML to Figma - by Builder.io Extension · Productivity 300,000+ 46 ★ 343KiB

icon

Page to wireframe Extension · Developer Tools 300,000+ 4 ★ 2.15MiB

icon

Element to Figma Extension · Productivity 300,000+ 1 ★ 197KiB

icon

Figma Extension · Productivity 300,000+ 27 ★ 1.36MiB

icon

Enable UI3 Beta for Figma Extension · Developer Tools 300,000+ 36 ★ 108KiB

icon

Designer Daily Report Extension · News & Weather 300,000+ 383 ★ 65.9KiB

icon

Fonts Ninja Extension · Productivity 300,000+ 696 ★ 1.72MiB

icon

CSS Peeper Extension · Developer Tools 300,000+ 363 ★ 279KiB

icon

HTML to Figma - by DemoWay (Pixel-Perfect Web to Figma Design) Extension · Productivity 300,000+ 9 ★ 9.59MiB

icon

HTML to Framer Extension · Productivity 300,000+ 38 ★ 35.35KiB

icon

Heurio - One-Click Bug Report & UX Check Tool Extension · Developer Tools 300,000+ 76 ★ 5.86MiB

icon

Flowbase Chrome Extension Extension · Developer Tools 300,000+ 12 ★ 1.59MiB

icon

SVG Export Extension · Productivity 300,000+ 211 ★ 316KiB

icon

Web to Figma Extension · Productivity 300,000+ 12 ★ 945KiB

icon

Relume Chrome Extension for Webflow Extension · Developer Tools 300,000+ 37 ★ 2.28MiB

icon

Muzli - Design inspiration hub Extension · Photos 300,000+ 728 ★ 3.51MiB

icon

Builder.io Extension · Productivity 300,000+ 4 ★ 393KiB

icon

Panda Helper Extension · Productivity 300,000+ 3 ★ 14.44KiB

icon

Site Palette Extension · Developer Tools 300,000+ 344 ★ 297KiB

icon

Protoship Teleport Extension · Developer Tools 300,000+ 11 ★ 297KiB

icon

UX Check Extension · Productivity 300,000+ 84 ★ 1.32MiB

icon

ClonewebX Softlite.io Extension · Developer Tools 300,000+ 61 ★ 24.25KiB

icon

Unstack Style Guide Extension · Developer Tools 300,000+ 20 ★ 68.29KiB

icon

Finsweet Extension for Webflow Extension · Developer Tools 300,000+ 80 ★ 531KiB

User reviews

icon

Jon Burke (ID: 0000002e51cb5735) Voted 3 ★ - Updated 11/08/2023 Plugin appears to be broken. Was working great a few weeks ago... Using it in Chrome on a MacBook.

icon

amber sonata (ID: 000000ba3f87299b) Voted 5 ★ - Updated 09/26/2023 very great!!! powerful! i like it! thanks!

icon

Sophia Ng (ID: 0000007ca639d937) Voted 5 ★ - Updated 08/04/2023 The best html to figma plugin so far!

icon

Islam Sydykov (ID: 000000706b478fba) Voted 5 ★ - Updated 06/23/2023 Saved me not hours but days of work. It is awesome

icon

Callen Hedglen (ID: 0000008e641a66ce) Voted 5 ★ - Updated 06/07/2023 Saves SO MUCH time! Essential plugin.