pagetodesign.com

Convert any webpage into Figma as editable designs.

Latest Version

Version

0.4.4

Update

June 12, 2024

Size

134KiB

Developer

pagetodesign.com

Page to design Extension

Page to design lets you can smoothly and quickly capture the full page or selection of any webpage's design and save it to Figma to redesign. without building from scratch.When you come across a beautiful webpage and want to replicate the full page design for reference; when you need a specific component, image, or icon from another webpage; when you need to redesign a webpage without a design draft, and so on, this extension makes it easy for you to handle such tasks effortlessly, boosting your design process.
All conversion operations are processed locally on your device, including image capture. Therefore, whether it's for public, login-required, or locally deployed web pages, this solution is versatile and completely privacy-focused.

How it works:

1. Download the 'Page to design' browser extension
2. go to any page you would like to import into Figma
3. Click on the extension , choose to capture the full page or selection
4. Once the capture is complete, go to Figma with the current browser, open an existing design file or create a new one
5. In the design file, a prompt will show. Select import, and you're done.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "__MSG_extName__", "description": "__MSG_extDesc__", "version": "0.4.4", "default_locale": "en", "action": { "default_title": "__MSG_extName__", "default_popup": "src/app/popup/index.html" }, "icons": { "16": "src/assets/logo.png", "32": "src/assets/[email protected]", "48": "src/assets/[email protected]", "128": "src/assets/[email protected]" }, "background": { "service_worker": "service-worker-loader.js", "type": "module" }, "permissions": [ "tabs", "scripting", "storage", "debugger", "unlimitedStorage", "action" ], "host_permissions": [ "" ], "web_accessible_resources": [ { "matches": [ "*://*.figma.com/*" ], "resources": [ "src/content-script/inject-figma.js" ], "use_dynamic_url": false }, { "matches": [ "*://*/*" ], "resources": [ "src/assets/[email protected]" ], "use_dynamic_url": false }, { "matches": [ "http://*/*", "https://*/*" ], "resources": [ "assets/utils-HecgdiEZ.js", "assets/createLucideIcon-PrVFnITF.js", "assets/browser-polyfill-dthnGXbq.js", "assets/arrow-up-right-from-square-B_S_X_eY.js", "assets/chunk-E2HJRHOS-gSI8TaiP.js", "assets/chunk-QIZ4XBKF-bzu8Junz.js", "assets/html-to-layer.tsx-WXPVICRF.js" ], "use_dynamic_url": false }, { "matches": [ "*://*.figma.com/*" ], "resources": [ "assets/createLucideIcon-PrVFnITF.js", "assets/browser-polyfill-dthnGXbq.js", "assets/cache-3R5jnhLs.js", "assets/arrow-up-right-from-square-B_S_X_eY.js", "assets/inject.tsx-SQOkm36c.js" ], "use_dynamic_url": true } ], "content_scripts": [ { "js": [ "assets/html-to-layer.tsx-loader-p7eNRiIh.js" ], "matches": [ "*://*/*" ], "exclude_matches": [ "*://*.figma.com/*" ] }, { "js": [ "assets/inject.tsx-loader-8eWr8pIy.js" ], "matches": [ "*://*.figma.com/*" ], "run_at": "document_end" } ]}

Download CRX(134KiB)

Page to design

Convert any webpage into Figma as editable designs.

Latest Version

Page to design Extension

Source Manifest.json

Get source code (.Zip)

Latest Updates

Top Rated