Screen for states.
Open the hamburger menu, the filter sheet or the bottom drawer, then press Capture screen. Each state becomes its own phone-sized frame. The same approach works for app screens.
GUIDE · MOBILE AND RESPONSIVE
Capture the mobile view
of a website.
A LilLabr capture records the viewport it was taken at. Narrow the Chrome window to a phone width, capture the screen or the full page, and bring the responsive layout into Figma as editable layers.
The capture keeps the viewport.
Every capture records the viewport width and height and the device pixel ratio it was taken at, and the plugin’s file view, on its Import a file tab, shows those dimensions beside the capture mode before you import. A Screen capture becomes a clipped frame of exactly that size in Figma; a full-page capture keeps that width and grows as tall as the loaded page. So the way to get a mobile layout is simply to capture while the page is rendering its mobile layout.
Narrow the Chrome window.
- Drag the Chrome window narrower until the site switches to its small-screen layout. Sites choose their own breakpoints; many change below roughly 768px, and the layouts you see on a phone usually appear at around 400px.
- Open the LilLabr panel with the toolbar icon. It opens beside the page, in Chrome’s side panel, not over it, so the page is captured at the width it has beside the panel. If the layout changed when the panel opened, narrow the window again. The panel is never in the capture.
- Let images and fonts finish loading at the new width, then capture. Once the Privacy Policy and Terms box is ticked, the keyboard shortcuts work at any width and do not need the panel open, so with the panel closed the page keeps the whole window width: Option+Shift+P or Alt+Shift+P for the screen, Option+Shift+S or Alt+Shift+S for the element picker. (A shortcut pressed before that box is ticked opens the panel on its first capture step instead.)
Chrome DevTools’ device emulation has not been verified with LilLabr, so resize the real window rather than relying on an emulated one.
Screen or Full page at a narrow width.
Full page for whole pages.
Press Capture full page to capture the complete loaded mobile page as one tall frame. LilLabr scrolls the document first so lazy images get a bounded chance to load. With a modal open, the modal is captured as the page.
Capture several widths.
Capture the desktop, tablet and phone layouts one after another, resizing between captures. Each paste or file import becomes its own frame named after the page; a file import lands at the centre of your current view, so move each frame aside to build the responsive set side by side. With Save captures on and the plugin connected with a setup code (Finish setup, the Figma card, Show setup code), capture the widths in order and use Import all N pages on the Captures tab of the plugin, which lays the pages out left to right. Keep the originals untouched and build on duplicates.
Limits.
- LilLabr runs in desktop Chrome. Chrome for Android and Chrome for iOS do not run extensions, so you cannot capture on the phone itself.
- A hover state does not exist on a touch layout, and a state only appears in the capture while it is showing.
- Images are embedded as the image files the page served, fetched again from the page’s hosts: LilLabr tries the source the browser chose at that width first, and other responsive candidates only if that one fails. Fonts are not embedded; a family that is not available in Figma falls back to Inter. Restoring fonts.
- A page that serves a separate mobile site at a different address is captured at whatever address Chrome shows; open that address directly if the site redirects by device rather than by width.
Related: the step-by-step website-to-Figma guide and what becomes auto layout.