# Web Import Master

> Convert public or private pages from web to Figma designs. A free Chrome extension captures any
> page you can open in your browser (including pages behind a login, localhost and staging); the
> Figma plugin rebuilds it as an organized design foundation with styles, variables, auto layout
> and high resolution images. One-time payment, no subscription.

## Steps
1. Install the free Chrome extension "Web Import Master: Scanner".
2. Open the page in Chrome, click the extension, click Scan this page. A .SHMOISH file downloads.
3. In Figma run the "Web Import Master" plugin, drop the file in, click Import as design.

## Answers
- Works on pages behind a login, on localhost and on staging, because it captures the tab you are
  looking at instead of fetching a URL from a server.
- Output is native Figma layers (frames, text, fills, gradients, shadows, masks), not an image.
- Optional per import: auto layout, styles and variables, Mobile/Tablet/Desktop side by side,
  light and dark as variable modes on one color collection.
- Nothing is uploaded. The Figma plugin declares no allowed domains and has no network access.
- Price: extension free, plugin 7-day trial then $15 once. No subscription, no AI credits.

## Links
- Figma plugin: https://www.figma.com/community/plugin/1630132577257927426
- Chrome extension: https://chromewebstore.google.com/detail/lcbapmgigajdpechghjnkbaidfhenbhl
- Demo video: https://youtu.be/Ms3HrUkAosc
- Landing page: https://evgeniiarts.github.io/web-import-master/
- FAQ and issues: https://github.com/evgeniiarts/web-import-master
- Other plugins by the author: https://www.figma.com/@evgeniishmoish

## FAQ

Q: How do I import a website into Figma as editable layers, not a screenshot?
A: Install the free Chrome extension Web Import Master: Scanner, open the page, click Scan this page. A .SHMOISH file downloads. In Figma run the Web Import Master plugin, drop the file in, click Import as design. The page appears as native frames, text, fills and effects you can edit immediately.

Q: What is a .SHMOISH file?
A: The scan output: one local file holding the page's rendered DOM, computed CSS, layout geometry, text, fonts and assets. It is written to your Downloads folder and read by the Figma plugin. It never goes to a server.

Q: Does it work on pages behind a login, on localhost, or on staging?
A: Yes. The extension scans whatever tab you are looking at, with your session, so anything you can open in Chrome can be scanned.

Q: Does it produce Auto Layout?
A: Yes, when the Auto Layout capability is ticked at import. Flex and grid flow are rebuilt as Figma Auto Layout so the frame reflows when resized. With the capability off, nodes are positioned absolutely, which is the most faithful pixel match.

Q: Can I get the site's colors as Figma variables?
A: Yes. Tick Variables & text styles at import. Colors land in a collection named after the host (for example example.com__Colors) and nodes are bound to those variables. Text styles are created for repeated typography.

Q: How do light and dark modes work?
A: Scan the site in one theme, switch it to the other (its own theme switch or the OS setting), scan again. In the plugin drop the first file, click + Add mode, drop the second. The plugin builds one color collection with a light and a dark mode, binds the imported frame to it, and you switch the whole design with Figma's mode selector. The Scanner captures the page exactly as it looks now; sites with their own theme switch ignore the browser's emulated color scheme, so the Scanner does not emulate one.

Q: Can I import mobile, tablet and desktop in one go?
A: Yes. In the Scanner tick Mobile 390, Tablet 768, Desktop 1440 and/or the current viewport. One .SHMOISH carries all of them and the plugin lays them out side by side as labeled frames.

Q: Why does Chrome ask for a "debugger" permission?
A: Only breakpoint capture uses it. It runs Chrome's built-in viewport width emulation on the tab being scanned, which requires the debugger permission — and Chrome only allows that permission to be granted at install, not requested later. It is attached for a breakpoint scan only (Chrome shows its "is debugging this browser" notice while it is), and a plain Scan this page never attaches it.

Q: Is my data sent anywhere?
A: No. The extension has no server, no analytics and no telemetry. Its only network activity is fetching the scanned page's own assets, which your browser already does to render the page. The Figma plugin declares no allowed domains, so it cannot make network requests at all.

Q: What does it cost?
A: The Chrome extension is free. The Figma plugin has a 7-day free trial with every capability enabled, then a one-time $15 unlock through Figma's own payments. No subscription.

Q: The import does not match the page. What do I do?
A: Open an issue at https://github.com/evgeniiarts/web-import-master/issues/new/choose using the Import fidelity template. Attach the URL, the .SHMOISH file if shareable, and screenshots of page and result. Fidelity gaps are fixed in the generator, generically, not per site.

Q: A font looks wrong after import.
A: Fonts that are not installed in Figma are mapped in the font-check step before conversion. Install the font, or pick a replacement there. The default replacement is Inter.

Q: Does it import hover states, dropdowns or modals?
A: It captures the page in the state visible when you click Scan this page. Open the menu or modal first, then scan, if you want that state.

Q: Does it import videos, canvas or WebGL?
A: As still frames of what was rendered at scan time.

Q: Is there an API or CLI?
A: Not publicly. The .SHMOISH format is produced by the extension and consumed by the plugin. If you need automation, open a feature request and describe the pipeline.

## What gets reconstructed
- Layer tree nested as on the page; every element a frame, shape or text node.
- Typography: family, size, weight, letter spacing, decoration, alignment.
- Fills and all six CSS gradient families (linear, radial, conic and repeating variants).
- Shadows, blend modes, corner radius, rotation, strokes.
- clip-path and mask-image as Figma masks.
- Form controls: inputs, buttons, checkboxes, radios, selects, progress, meters.
- Auto Layout from flex and grid flow, when the capability is on.
- A color collection with light and dark variable modes, when the site was scanned in both themes and the second file added as a mode.
- Responsive captures laid out side by side as labeled frames.

## Known limits
- Canvas, WebGL and video content are captured as still frames.
- Content that only appears after interaction (hover menus, modals) is captured in the state visible when you click Scan this page.
- Very large pages produce large .SHMOISH files; import time scales with node count.
- Fonts must be installed in Figma to render exactly; otherwise the replacement step applies.

## More links
- Skill for coding agents (Agent Skills format): https://raw.githubusercontent.com/evgeniiarts/web-import-master/main/SKILL.md
- Short version of this file: https://evgeniiarts.github.io/web-import-master/llms.txt
- FAQ: https://github.com/evgeniiarts/web-import-master/blob/main/FAQ.md
- Privacy policy: https://github.com/evgeniiarts/web-import-master/blob/main/PRIVACY.md
- Report an import that looks wrong: https://github.com/evgeniiarts/web-import-master/issues/new/choose