Capture a web app
screen into Figma.

Why Capture screen is the right mode for apps.

A marketing page is one long document. An app is a shell with regions that scroll on their own, lists that only render the rows in view, and panels that exist only while they are open. Capture screen records the boxes that are mounted right now, at their browser coordinates, inside a fixed and clipped frame the size of your viewport. The navigation stays where it is, the open drawer stays open, and nothing is replaced by a screenshot. The frame you get in Figma is built from text, image, vector and layout layers.

Full-page capture is still available for apps, and since LilLabr 1.0.1 it handles an open full-screen modal as the page, keeps sticky footers at the end of their form, and no longer cuts drawers and sidebars at one screen. But a list that only renders what is visible cannot be forced to render everything, so Capture screen remains the recommended default when you want the state you can see.

Prepare the state before you capture.

• Set the window size. The capture records the viewport width and height, and the Figma frame matches it. Resize Chrome to the width you want to design at before capturing.
• Get the app into the state you want. Open the drawer, select the row, expand the section. A hover state is captured only while something is hovered, and the capture cannot hover for you; a tooltip that is closed is skipped on purpose.
• Let the data finish loading. A spinner is captured as a spinner. An image that failed to load is recorded in the capture’s asset ledger and blocks paste and import, so wait for the screen to settle.
• Think about what is on screen. Real customer names and balances are captured as text, because they are text. Use a test account, or turn Save captures off in Settings so the capture stays on your computer. More on private pages.

Capture, then paste.

1. Press Option+Shift+P, or Alt+Shift+P on Windows and Linux, or open the LilLabr panel from the toolbar icon and press Capture screen, the small button beside Capture full page. On a new install, the first capture asks you to tick I agree to the Privacy Policy and Terms first; no capture, shortcut included, starts before that. The panel reports progress and warnings.
2. When Latest capture appears, switch to a Figma Design file, click the canvas and paste. The frame arrives clipped to the viewport size you captured.
3. Change the app state and capture again. Each state is a separate frame, which is usually what you want for an app: list, detail, empty state, error state.
4. For a longer walkthrough, keep Save captures on (ticking the terms box turns it on in a new install; otherwise turn it on in Settings), pair the plugin once with the setup code from Finish setup → Figma → Show setup code, capture each screen in order, and use Import all N pages on the Captures tab of the Figma plugin. The flow bar under Latest capture counts the pages ready to import, and the pages of a flow are laid out left to right.

Prefer a file? Download capture works the same way for any mode and needs no setup code; open the file on the plugin’s Import a file tab.

When to use Capture full page instead.

Use Capture full page for the parts of an app that are documents: a long settings form, a help article, a pricing page, a report that renders completely. LilLabr prepares the scrollable document and eligible inner scrollers, such as a main area that scrolls on its own, so lazy content has a bounded chance to load, then captures what loaded; a scroller the capture cannot treat that way is captured as it stands. Rows of a virtualized table that were never mounted are not, and the capture does not pretend otherwise. If you need a long virtualized list, capture it screen by screen.

A third mode, Pick element (Option+Shift+S, or Alt+Shift+S on Windows and Linux), captures one component such as a sidebar, a card or a toolbar: hover it, press ↑ to grow the selection to the parent and ↓ to go back, Tab for the next focusable element, Enter or a click to capture, Esc to cancel.

Signed-in apps work because it is your Chrome.

LilLabr serializes the tab you are looking at. Your session stays in your browser, no LilLabr server fetches the address, and nothing asks for your password. The panel offers a Google sign-in, but it is optional and capturing never needs it. Embedded frames such as a chat launcher or an email preview are captured as editable layers inside their box. Form fields show their values; passwords and identified card fields are masked, and populated fields inside embedded frames are masked too. Capture is not a complete redaction system, so review what you paste or share.

What to expect, honestly.

• LilLabr’s automated checks for app shells run against synthetic test apps, not the real products you use. Expect to inspect the result and tidy spacing, as with any import.
• A chart drawn on a canvas that the browser lets LilLabr read arrives as an image fill; a canvas that cannot be read is recorded as a failed asset and blocks paste and import until you recapture. A chart drawn as supported inline SVG can arrive as editable vectors through the file route; an unsupported SVG is recorded in the asset ledger and blocks paste and import, and an SVG the capture cannot contain is disclosed as a limitation instead. On the paste route an SVG that uses gradients, clip paths, masks, filters or text arrives as one image.
• A dense screen produces many layers. Figma can take a moment to place a large paste.
• Fonts are not embedded. On the paste route a family that is not on Fontsource’s copies of Google Fonts falls back to Inter, installed or not; on the file route the plugin loads the family from Figma’s font list when it is installed or a Google Font and otherwise uses the closest weight of Inter, then Roboto, and says so in its log. How to put it back.

Related: capture the mobile view, fix a failed capture, or compare all capture modes.