Web to Figma extension to capture pages and components and import them into Figma as editable designs. No more screenshots.
Web to Figma Extension
Web to Figma lets you import full webpages using the plugin, or import specific components from a website, using our Chrome Extension.
Import components or webpages using the Chrome Extension:
1. Download the Web to Figma Chrome Extension
2. Go to any page in your Chrome Browser
3. Invoke the extension, and then choose if you want to capture the entire page or a single component
4. Once the extension captures the page, save the page/component to a Collection
5. Go to Figma and run the plugin
6. Go to the Collections tab of the plugin
7. Find your latest capture and click on Add to Figma
Import webpages using the plugin:
1. Install the plugin
2. From within any file, run the plugin by going to Plugins menu and selecting Web to Figma
3. In the Import tab of the plugin, enter the URL of the webpage that you want to import. For example, https://github.com/home
4. Choose the relevant settings
5. Click on Import
Benefits
1. Create a library of design inspirations using Collections
2. Create a moodboard
3. Collaborate with developers by importing their implementation and comparing against the reference design
4. Learn how some of the more complex websites have been structured
5. Quickly explore various design patterns when solving a new task
Source Manifest.json
"update_url": "https://clients2.google.com/service/update2/crx",
"icons":{"16":"icon16.plasmo.6c567d50.png",
"32":"icon32.plasmo.76b92899.png",
"48":"icon48.plasmo.aced7582.png",
"64":"icon64.plasmo.8bb5e6e0.png",
"128":"icon128.plasmo.3c1ed2d2.png"},
"manifest_version":3,
"action":{"default_icon":{"16":"icon16.plasmo.6c567d50.png",
"32":"icon32.plasmo.76b92899.png",
"48":"icon48.plasmo.aced7582.png",
"64":"icon64.plasmo.8bb5e6e0.png",
"128":"icon128.plasmo.3c1ed2d2.png"},
"default_popup":"popup.html"},
"version":"0.0.7",
"author":"Web to Figma",
"name":"Web to Figma",
"description":"Web to Figma extension to capture pages and components and import them into Figma as editable designs. No more screenshots.",
"background":{"service_worker":"static/background/index.js"},
"permissions":["storage",
"debugger",
"alarms",
"activeTab"],
"content_scripts":[{"matches":["
"js":["export.95967a33.js"],
"all_frames":true,
"css":[]},{"matches":["
"js":["overlay.c561ff86.js"],
"css":["font.464325b6.css"]}],
"externally_connectable":{"matches":["https://api.web-to-figma.design/*"]},
"web_accessible_resources":[{"matches":["
"resources":["1cX0aUPOAJv9sG4I-DJeR1CQhuCp_-AOoQ.5634b319.woff2",
"1cX0aUPOAJv9sG4I-DJeI1OQhuCp_-AOoQ.5d0f7d3d.woff2",
"1cXxaUPOAJv9sG4I-DJWiHGFq8Kk1Q.3186db86.woff2",
"1cX0aUPOAJv9sG4I-DJee1KQhuCp_-AOoQ.b7833dc7.woff2",
"1cX0aUPOAJv9sG4I-DJeV1WQhuCp_-AOoQ.3e13ed40.woff2",
"1cX0aUPOAJv9sG4I-DJeM1SQhuCp_-AOoQ.5b2d714e.woff2",
"overlay.e4d4ab6c.css",
"overlay.5229e772.svg",
"overlay.1e9f7e32.svg",
"overlay.93a5d608.png"]}]}
Similar Extensions
SVG Export 10,000+ 211 ★ 316KiB
Site Palette 10,000+ 344 ★ 297KiB
CSS Peeper 10,000+ 363 ★ 279KiB
HTML to React & Figma by Magic Patterns 10,000+ 10 ★ 392KiB
Figma 10,000+ 27 ★ 1.36MiB
html.to.design 10,000+ 72 ★ 333KiB
Muzli - Design inspiration hub 10,000+ 728 ★ 3.51MiB
HTML to Framer 10,000+ 38 ★ 35.35KiB
Designer Daily Report 10,000+ 383 ★ 65.9KiB
Element to Figma 10,000+ 1 ★ 197KiB
Heurio - One-Click Bug Report & UX Check Tool 10,000+ 76 ★ 5.86MiB
HTML to Figma — Import Webpages to Figma 10,000+ 1 ★ 99.73KiB
HTML to Figma - by DemoWay (Pixel-Perfect Web to Figma Design) 10,000+ 9 ★ 9.59MiB
Relume Chrome Extension for Webflow 10,000+ 37 ★ 2.28MiB
HTML to Figma - by Builder.io 10,000+ 46 ★ 343KiB
Markflow: Copy Elements to Figma, React, etc. 10,000+ 4 ★ 1.6MiB
Panda Helper 10,000+ 3 ★ 14.44KiB
Enable UI3 Beta for Figma 10,000+ 36 ★ 108KiB
Builder.io 10,000+ 4 ★ 393KiB
SVG Gobbler 10,000+ 95 ★ 1.18MiB
Pixelay for Figma 10,000+ 4 ★ 391KiB
UX Check 10,000+ 84 ★ 1.32MiB
Page to wireframe 10,000+ 4 ★ 2.15MiB
Responsive Viewer 10,000+ 298 ★ 639KiB