Convert any Webpage into fully editable figma design. Requires the figma plugin with the same name.
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
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.
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