CAPTURE SCREEN
What is on screen.
Press Capture screen, or Option+Shift+P (Alt+Shift+P on Windows and Linux). Records the currently mounted state inside a fixed, clipped frame. The right default for web apps, dashboards and feeds.
GUIDE · WEBSITE TO FIGMA
Convert a website
to Figma.
Turn a live webpage into editable Figma layers in four steps: install LilLabr in Chrome, choose what to capture, paste into Figma or import a .labr file, then inspect what came through.
What “convert a website to Figma” means here.
LilLabr does not upload an HTML file and it does not trace a screenshot. It reads the page Chrome has already rendered, with its CSS applied, its scripts run and its fonts loaded, and writes the supported parts of that page as Figma layers. The result is a starting point for design work, not a pixel-perfect copy, and complex pages can need cleanup.
| On the webpage | In Figma | Notes |
|---|---|---|
| Text | Editable text layers | One layer per text block. Font family, weight, italic, size, line height, letter spacing, color, underline, text-transform and alignment are recorded per run. The font files themselves are not embedded. |
| Images, video posters, canvases and CSS backgrounds | Image fills | Embedded as PNG, JPEG or WebP bytes. Cover, contain and repeating tiles are kept. A background placed with background-position or sized in pixels is stretched to its box. |
| Inline SVG icons and .svg files | Vectors | With currentColor resolved. On the paste route, an inline SVG that uses gradients, clip paths, masks, filters or text arrives as one image; the .labr import keeps it as vectors. |
| Solid colors and gradients | Fills | Linear, radial and conic gradients, and multiple backgrounds in the right order. |
| Borders and rounded corners | Strokes and corner radii | Per-side widths, dashed and dotted lines, per-corner radii. A CSS triangle drawn with borders becomes a vector. |
| Shadows, blur, opacity, blend modes, rotation | Effects and layer properties | Drop and inner shadows in order, layer blur and backdrop blur. |
| Flex rows and columns, one-dimensional grids, simple stacks | Auto layout, where it fits | The plugin checks every converted frame against the recorded geometry and puts it back to fixed positions if auto layout would move anything by more than 0.5px. |
| Form fields | Text showing the value or placeholder | Passwords and identified card fields are masked. Capture is not a complete redaction system. |
| Hidden, invisible and fully transparent elements, scripts | Skipped | A closed tooltip’s bubble is not exported. |
1. Install LilLabr in Chrome.
Add LilLabr from the official Chrome Web Store listing and pin it to the toolbar. A welcome page opens once after a new install; follow its steps or leave it. The Google sign-in it offers is optional, and capturing never needs it. Open an ordinary http or https page. Chrome does not let extensions run on its own chrome:// pages or on the Chrome Web Store, and the panel tells you so. A local file:// page works once you turn on Allow access to file URLs in the extension’s details.
Click the LilLabr toolbar icon to open the panel. It opens beside the page, in Chrome’s side panel, for that tab, and the icon closes it again. On first use the panel shows the first capture step. Read the Privacy Policy and the Terms of Use (the link in the box opens a short summary), then tick I agree to the Privacy Policy and Terms. No capture starts before the box is ticked. In a new installation, ticking it turns Save captures on, for that capture and future captures: that first capture is uploaded to the service as part of agreeing, and Settings is not shown until the first-use steps end. From then on, open Settings at the bottom of the panel and turn Save captures off before capturing a page you want to keep on your computer.
2. Choose what to capture.
Open the panel’s Capture tab. Capture full page is the main button, with the small buttons Capture screen and Pick element beside it. Choose one of three modes.
CAPTURE FULL PAGE
The whole loaded page.
Press Capture full page. LilLabr scrolls the document and eligible inner scrollers so lazy content has a bounded chance to load, then captures what loaded. With a modal open, the modal is captured as the page.
PICK ELEMENT
One component.
Press Pick element, or Option+Shift+S (Alt+Shift+S on Windows and Linux). Hover to see lilac corner marks, press ↑ to grow the selection to the parent, ↓ to go back down, Tab for the next focusable element, Enter or click to capture, Esc to cancel. In the picker, P captures the full page and V the screen.
The panel shows progress and warnings. A capture that worked is one quiet line under the capture buttons, and Latest capture offers Copy to Figma and Download capture. Read any warning before moving on. A blocked image stops paste and import for that capture, so wait for the page to finish loading and capture again. A missing font is substituted at import; the fonts guide explains how to put it back.
3. Bring it into Figma.
Paste. The fastest route.
A successful capture already put a Figma-compatible payload on your clipboard. Open a Figma Design file, click the canvas and press ⌘V, or Ctrl+V on Windows. The plugin is not needed. Use Copy to Figma only to copy the cached capture again. If a paste ever lands as plain text, Figma changed its clipboard format; use the file route instead.
Import a .labr file. Works offline.
Choose Download capture. Open LilLabr Import in a Figma Design file, go to its Import a file tab, choose or drop the file, check the title, source URL, capture mode, counts and the fonts line, then choose Import into Figma. No setup code and no account. What a .labr file contains.
A third route, Save captures, uploads each future capture to the developer-operated LilLabr service so the plugin’s Captures tab can list it. To connect the plugin, open the panel’s Capture tab, press Show setup code on the Figma card under Finish setup, and paste the one-time code into the plugin. It is convenient for multi-page flows. It also means the operator can read what you saved, so read the privacy policy first. The setup guide covers the setup code and flows.
4. Inspect before you edit.
Expand the imported frame in Figma’s Layers panel. Check that headings are text layers, that icons are vectors and that the image fills you expected are present. Then duplicate the frame and make your first change on the copy, keeping the original as a reference. The redesign guide walks through one verified example: a Screen paste of an owned sample page in which eleven text layers came through and one heading was edited and read back.
Text that wraps differently from the website usually means a font substitution. Why fonts change after import, and how to put them back.
Know the limits.
- Fonts are not embedded. The plugin loads the same family when it is installed or is a Google Font, and otherwise falls back to the closest weight of Inter, then Roboto, and says so in its log.
- Content that exists only while visible, such as virtualized lists and infinite feeds, can be missing from a full-page capture. Use Capture screen for the state you can see.
- A failed asset blocks the import. If an image, icon or background did not load during capture, LilLabr records it and blocks paste and file import for that capture rather than importing a placeholder. Wait for the page to load fully and capture again.
- Embedded frames are captured as editable layers at their own scroll position. A frame that cannot be read at all is left as a grey placeholder and reported, without blocking the import.
- Cleanup is normal. In the verified sample, header wrapping and navigation spacing still needed tidying after paste.
- Paste is unofficial. It writes a Figma-compatible clipboard payload through an MIT-licensed library, not an official Figma API, so a clipboard-format change can break it. The .labr file route does not depend on it.
Stuck on a specific message? Fix a failed capture or import, read the frequently asked questions, or compare LilLabr with html.to.design.