Copy one UI element.
Pick one card on the Field Notes sample, move it into a Figma Design file and inspect its layers before you edit.
Copy a UI element to FigmaGUIDES
Guides for moving
a webpage into Figma.
Two worked exercises on original sample pages, then step-by-step guides, references, a comparison with html.to.design, troubleshooting, answers and the AI assistant docs. Each page says what is verified and what is not.
Two worked guides.
Start a webpage redesign.
Capture the Field Notes notebook page, keep the original as a reference and change one heading in a copy.
Redesign a website in FigmaPractice samples.
Field Notes.
An original page with a green poster card, made for the element-capture guide.
Open the Field Notes sampleField Notes notebook.
An original notebook page, the source of the verified Screen paste and text edit in the redesign guide.
Open the Field Notes notebook sampleCompare all website-to-Figma workflows or get help with a failed capture or import.
Start here.
STEP BY STEP
Convert a website to Figma.
Install, capture the full page, the screen or one element, paste or import a .labr file, then inspect the layers.
Convert a website to FigmaOVERVIEW
How website capture works.
The three capture modes, the three handoffs and one verified before-and-after example.
See how website capture worksEXPLAINER
HTML to Figma, from the rendered page.
The full map from CSS properties to Figma properties, what does not map, and what to do with a bare HTML file.
Read HTML to FigmaSpecific kinds of capture.
WEB APPS
Capture a web app screen.
Why Capture screen is the right mode for dashboards and feeds, how to prepare the state, and what a full-page capture can miss.
Capture a web app screenPRIVATE PAGES
Capture a signed-in page.
Account pages, staging and localhost without sharing credentials. What is masked, what is not, how to keep it local.
Capture a signed-in pageRESPONSIVE
Capture the mobile view.
Narrow the window, capture, and bring the responsive layout in as its own frame.
Capture the mobile viewSITE BUILDERS
From Webflow, Framer, WordPress or Shopify.
The builder does not matter; what to close, load and settle before you capture does. Notes for six builders and one measured example.
Capture a built siteEXPLAINER
Screenshot or editable layers?
What each is good for, side by side, and why LilLabr does not convert screenshots you already have.
Compare screenshots with layersGetting a better result.
FONTS
Why fonts change after import.
Fonts are not embedded. How each route finds a family, when text falls back to Inter, and how to restore the original.
Restore the fontsAUTO LAYOUT
Auto layout from a capture.
What converts, why a frame is put back to fixed positions, and how to finish the job in Figma.
Finish auto layoutTROUBLESHOOTING
Fix a failed capture or import.
Every message, from a page that cannot be captured to a paste that arrives as plain text or a refused file.
Fix a failed capture or importReferences, a comparison and answers.
FORMAT
What is a .labr file?
A plain ZIP with a manifest, the editable scene and its images. Download it, open it in Figma, or read it yourself.
Read about the .labr filePLUGIN
LilLabr Import, the Figma plugin.
Files, synced captures, the two import options, flows, and what happens after import.
Read about the Figma pluginCOMPARISON
LilLabr vs html.to.design.
Routes, formats, accounts, allowances, fonts and privacy from published documentation, without a fidelity verdict.
Compare LilLabr with html.to.designFAQ
Questions about website to Figma.
Cost, browsers, FigJam, fonts, privacy, retention, .labr files, Figma to HTML and AI assistants.
Read the FAQAI assistants.
MCP
Let your AI assistant capture web pages.
The local MCP server for Claude Desktop, Claude Code, Cursor and Codex: pairing, website approval, the nine tools and the security model, and how it differs from the hosted connector link.
Read about the MCP serverWEBMCP
WebMCP tools in a Chrome extension.
Five tools the panel registers for browser agents, who can use them today, and what stays with you.
Read about the WebMCP toolsSetup, installation and policy pages: setup guide, how it works, Chrome extension, Figma plugin, privacy policy, terms of use and support.