Convert any Webpage into fully editable figma design. Requires the figma plugin with the same name.

Latest Version

Version
1.0.1
Update
August 23, 2024
Size
99.73KiB
Developer
www.livepolls.app/chrome_addons
Category
Users
462
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
Tabs
ActiveTab
See more

HTML to Figma — Import Webpages to Figma Extension

Import websites into Figma to iterate, redesign, benchmark and more, without building each element from scratch.

2000+ components
Pixel-perfect capture
Light and Dark themes
multiple viewport sizes

This Chrome extension is a companion to the figma plugin with the same name, and you’ll need to install the Figma plugin first.

Install the Webpages to Figma Chrome Extension from Chrome Web Store
Go to any website in your Chrome Browser
Invoke the extension, and then choose if you want to capture the entire page or a single component
Once the extension captures the page, save and download the page/component data
Go to Figma and run the plugin
Upload the data you just downloaded
The plugin automatically converts the data into a figma design.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "HTML to Figma \u2014 Import Webpages to Figma", "description": "Convert any Webpage into fully editable figma design. Requires the figma plugin with the same name.", "version": "1.0.1", "permissions": [ "tabs", "activeTab" ], "action": { "default_popup": "src/popup/index.html" }, "icons": { "16": "img/16.png", "48": "img/48.png", "128": "img/128.png" }, "content_scripts": [ { "js": [ "assets/index.ts-loader-DT4KzRj3.js" ], "matches": [ "" ], "css": [ "assets/index-cZyaGdXu.css" ] } ], "web_accessible_resources": [ { "matches": [ "" ], "resources": [ "assets/useChromeMessage-DboUbIU0.js", "assets/index.ts-LmQBJpxF.js" ], "use_dynamic_url": true } ]}
Read more