HTML to Figma - Zatelital Labs

Capture any web page and paste it on your canvas as editable layers.

HTML to Figma turns any web page into editable Figma layers. This isn't a screenshot: text stays text, blocks stay frames, and colors, fonts and spacing come across exactly as they were on the site. Copy, paste onto your canvas, keep designing. HOW IT WORKS 1. Open the page you want and click the extension icon. The side panel opens along with the capture toolbar on the page. 2. Choose what to capture: • Capture page — the entire page, top to bottom. • Select element — point at a specific section (a header, a card, a form) and fine-tune the selection with the ↑ ↓ arrow keys until you hit the exact container. • Viewport — switch screen size before capturing: Mobile (375, 390, 430), Tablet (768 and landscape), Laptop (1280, 1440) and Desktop (1920). You capture the real responsive layout, not a shrunken desktop view. 3. Hit "Copy as Figma layers" and paste with Ctrl+V (Cmd+V) into your Figma file. What you paste is editable like any other design. The side panel keeps every capture from the session: review them, copy them one by one or all at once, and dismiss the ones you don't need. WHY INSTALL IT • Stop rebuilding sites by hand. Redesigning a site, documenting a client's current state or putting a moodboard together stops being hours of redrawing boxes. • Real reference, not an approximation. Sizes, colors and fonts come from the live site, not from you eyeballing a PNG. • Faster audits and pitches. Capture the before, put it next to the after, show the difference on the same canvas. • Actually responsive. Capture the same page at mobile, tablet and desktop and compare all three side by side. • No account, no sign-up. Install it and it works. No login, no subscription, no trial that expires. • Your data never leaves your machine. Captures are processed in your browser and go straight to the clipboard. Nothing is uploaded to any server. KEYBOARD SHORTCUTS Capture page and Select element ship with no keys assigned. Set whatever you like at chrome://extensions/shortcuts — the extension's options page takes you straight there. PERMISSIONS The first time you click the icon, Chrome asks for permission to read the pages you visit. That's what lets the extension read the page's HTML and CSS to rebuild it as layers. You grant it once, and from then on the toolbar shows up on its own when you switch tabs. Chrome doesn't allow capturing browser-internal pages (chrome://), the Web Store itself, or PDFs. To capture local files (file://), turn on "Allow access to file URLs" on the extension's details page.