Web to Figma extension to capture pages and components and import them into Figma as editable designs. No more screenshots.

Latest Version

Version
0.0.7
Update
July 19, 2024
Size
945KiB
Developer
web-to-figma.design
Category
Users
10,000+
Rating
2.75 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
Storage
Debugger
Alarms
ActiveTab
See more

Web to Figma Extension

How it works

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
Read more

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"]}]}
Read more

Similar Extensions

icon

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

icon

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

icon

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

icon

HTML to React & Figma by Magic Patterns Extension · Developer Tools 10,000+ 10 ★ 392KiB

icon

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

icon

html.to.design Extension · Productivity 10,000+ 72 ★ 333KiB

icon

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

icon

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

icon

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

icon

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

icon

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

icon

HTML to Figma — Import Webpages to Figma Extension · Productivity 10,000+ 1 ★ 99.73KiB

icon

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

icon

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

icon

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

icon

Markflow: Copy Elements to Figma, React, etc. Extension · Developer Tools 10,000+ 4 ★ 1.6MiB

icon

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

icon

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

icon

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

icon

SVG Gobbler Extension · Developer Tools 10,000+ 95 ★ 1.18MiB

icon

Pixelay for Figma Extension · Developer Tools 10,000+ 4 ★ 391KiB

icon

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

icon

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

icon

Responsive Viewer Extension · Developer Tools 10,000+ 298 ★ 639KiB