Free Web to Figma — page, area or lasso
3 ratings
)Overview
Copy any part of a live web page into Figma as editable layers. Works on Figma Free, no login. Area, lasso, element or page.
Copy any web page into Figma as real, editable layers — free, no account, no login. WORKS ON THE FIGMA FREE PLAN No paid seat, no Figma login, no plugin window. One gesture: copy on the page → Ctrl+V on the Figma canvas. The official Figma capture extension asks for a paid plan; this one does not. NATIVE FIGMA NODES, NOT A FLAT PICTURE By default the capture lands as Figma's own nodes: auto layout on flex containers, shadows of every kind (including inset and text-shadow), input placeholders, gradients, corner radii, editable text. Need something universal instead? Switch the engine to SVG in one click — that one also pastes into Penpot, Canva and Illustrator. FOUR THINGS NO OTHER IMPORTER DOES ➰ Lasso — draw a freeform outline and get layers clipped by your exact contour, not a rectangle. ▢ Area — drag a rectangle: everything inside becomes layers, clipped to your selection. ✦ ::before and ::after — arrows inside buttons, badges, icon-font glyphs come across too. Other importers silently drop them. 🅰 Brand fonts vectorized — a font that is not installed on your machine is rebuilt from the page's own @font-face files, pixel-perfect, instead of being swapped for a lookalike (SVG engine). NOTHING LEAVES YOUR MACHINE Not a single network request — no cloud rendering, no upload, no account, no quota, no tracking. The capture goes straight to your clipboard. That is also why it works where cloud importers cannot: pages behind logins and paywalls, localhost, internal dashboards, banking UIs. OPEN SOURCE Every line is readable: https://github.com/Rreerreea/HTML34 FOUR CAPTURE MODES ▢ Area — drag a rectangle: everything inside becomes layers, clipped to your selection. ➰ Lasso — draw a freeform outline: layers clipped by your exact contour. ◉ Element — hover-highlight like the DevTools inspector, click to copy a block. Shift+click adds more blocks, ↑/↓ walk up and down the DOM tree. ▤ Page — one click captures the whole page, top to bottom. SMART FONTS (SVG ENGINE) The "Auto" text mode decides per font: fonts installed on your system stay as editable text, missing fonts are vectorized from the page's own font files for a pixel-perfect look. Or force "text" / "SVG" for everything. WHAT YOU GET IN FIGMA • Auto layout rebuilt from flex containers — vertical, horizontal, wrap, with the real gaps • Shadows: drop, spread, several on one box, inset, text-shadow, blur • Text becomes editable text nodes (font, size, weight, color, letter-spacing preserved) • Divs become frames and rectangles with fills, gradients, corner radii and borders • Images become image layers, inline SVGs stay vector • Input, textarea and select arrive with their placeholders • Rotated elements keep their rotation, gradient text keeps its gradient • Layers get human names (button: Buy, h1, image) • Recent captures list — one click puts any of the last 5 captures back on the clipboard THREE UI SKINS Flip the toolbar between a clean dark "default", a retro "win95" and a neon "keygen" look — one click on the skin icon. GOOD TO KNOW Area and lasso always use the SVG engine: clipping by a freeform contour is not possible with native nodes, so those two modes come without auto layout and shadows. On the native engine a text node carries one font, so a glyph missing from that font will not be drawn.
5 out of 53 ratings
Details
- Version1.8.0
- UpdatedAugust 24, 2026
- Offered bykzkoffff
- Size627KiB
- Languages2 languages
- Developer
Email
kzkoffff@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
Support
For help with questions, suggestions, or problems, visit the developer's support site