LilLabr - Website to Figma

Website to Figma for your next redesign. LilLabr brings supported webpage content into editable layers with HTML to Figma capture, giving you an existing interface to work from instead of a blank canvas. Explore a redesign, collect useful UI references, or compare a live interface with your design. CHOOSE WHAT TO CAPTURE • Screen: bring the currently mounted page state across in a clipped Figma frame. • Full page: prepare the loaded document and eligible inner scrollers; with a modal open, capture the whole modal. Preparation is bounded, and virtualized content may only exist while visible. • Pick element: hover and select a detail with LilLabr’s on-page lilac corners and keyboard controls. MOVE INTO FIGMA Capture in Chrome, then paste into Figma. You can also save a .labr file and open it with the companion LilLabr Figma plugin. Capturing, copying and saving never need an account; a free Google sign-in is optional (see SIGN IN WITH GOOGLE). To keep a capture off LilLabr’s servers, turn Save captures Off in Settings before you capture. Figma, saved-file sharing and clipboard history or sync have their own data handling. KNOW THE LIMITS Supported text, images, vectors, fills and layout become editable; complex pages may need cleanup. Missing fonts, blocked resources and inaccessible embedded content can affect the result. HTML-to-Figma work starts from the rendered webpage in Chrome. THE PANEL Click the toolbar icon to open the LilLabr panel in Chrome’s side panel, beside the page (the page gets narrower; nothing is drawn over it). The panel belongs to the tab you open it on and works on that tab only: another tab has no LilLabr panel unless you open one there, and the panel is shown again when you come back to its tab. Click the icon again on that tab, or Chrome’s own close button, to close it; closing the tab closes it too. Its tabs are Capture and Recent. On Capture, Capture full page captures the loaded page, and the two small buttons next to it capture what is on screen or one element you pick; after a capture, a line under them says it is done and how to paste it into Figma (⌘V or Ctrl+V). Latest capture shows your last capture with Copy to Figma, Download capture (a .labr file) and whether it was saved; completed downloads, clipboard copying and saving have separate outcomes. Press a capture’s thumbnail to see a picture of the capture, drawn from the capture itself. While your flow has pages, a bar under Latest capture shows them, with New flow to start another. Until setup is done, Capture ends with Finish setup: connecting Figma and, until you have, signing in with Google, with a count of the steps done. Then it says You’re all set, with Open Figma and, once you are signed in, Connect MCP tools. AI connection options appear only once you are signed in with Google. Recent lists the pages saved in your current flow; you can remove a page (after a confirmation it is deleted from your saved captures), download all of them as one .labr file, or start a new flow. The foot of the panel has Contact (the support page) and Settings (your account, the Figma connection, Save captures, and the AI links once you set one up). Chrome’s own pages and the Chrome Web Store cannot be captured, and the panel says so. The panel also offers a 15-minute demo with the developer: Book a 15-min demo opens Google Calendar’s booking page in a dialog in the panel, loaded only when you press it, with Open in a new tab. LilLabr sends nothing when the banner is shown or used, and Google’s privacy policy applies to its page. The banner’s × hides it until you open the panel again. A short welcome runs once after you install LilLabr: agree to the Privacy Policy and Terms, capture a page, paste it into Figma, answer up to three quick questions if LilLabr is collecting feedback (or skip them) and, if Google sign-in is available, sign in, which you can skip with Not now. It appears on lillabr.com and in the panel. Updates never repeat it. SAVED CAPTURES AND LOCAL HANDOFFS Your first capture waits for a box: "I agree to the Privacy Policy and Terms" (Capture full page stays grey until you tick it). Its popup says what a capture holds and that each capture you make is saved on LilLabr’s servers for 7 days so the Figma plugin can import it. A saved capture is the complete .labr archive and a thumbnail, which can contain page content, images, visible form values and the page address. The service operator can read them; LilLabr does not provide end-to-end encryption. A second box, unticked, asks whether you want product news by email; nothing depends on it. In a new installation, agreeing turns Save captures On for future captures. An update keeps the choice you had, and an existing Off choice stays Off. Agreeing does not register a workspace or upload earlier captures. Turn Save captures Off in Settings before capturing a page you do not want saved; captures then stay on this computer. Download capture and direct paste remain available as local handoffs. The Figma card (in Finish setup, and in Settings, where Manage offers a new code once Figma is connected) makes a one-time pairing code when you ask for one (eight characters, with a ten-minute countdown) that you paste into the companion LilLabr Figma plugin; making a code while Save captures is Off keeps it Off. While the code is shown, the panel asks LilLabr’s servers whether the plugin has taken it and says Connected by itself (where the servers cannot tell, it asks you to confirm). With Save captures On your captures are saved by themselves; Send latest capture saves one that was not saved yet (for example one made while Save captures was Off), and while Save captures is Off it asks you to turn it on first. Start new flow in Recent, or New flow on the Capture tab, starts a separate flow without deleting the old one. SIGN IN WITH GOOGLE (OPTIONAL) Signing in with your Google account is optional and free, and capturing never needs it. You can sign in from th…