GUIDE · SITE BUILDERS

From a site builder
into Figma.

Webflow, Framer, WordPress, Shopify, Squarespace, Wix: LilLabr does not care which one built the page, because it reads what Chrome rendered. What differs between builders is what you should do before you capture. Here is the checklist, builder by builder.

By Geetansh Saini · LilLabr’s creator · 14 October 2026

Any builder, the same way in.

A site builder is a way of writing HTML and CSS. By the time the page is on screen in Chrome, the builder’s output is an ordinary rendered page, and that is what LilLabr serializes: text with its font names, weights and sizes (not the font files), images with their bytes, icons as vectors, fills, strokes, shadows and layout. You do not need an export from the builder, access to its editor or the site’s source. Open the published page, or the builder’s preview, open the panel from the toolbar icon and capture. The step-by-step guide covers the capture modes and the routes into Figma.

Builders do differ in how their pages behave: how aggressively they lazy-load images, how much they animate on scroll, how many overlays they add. Those behaviors decide what ends up in the capture, so they are worth a minute of preparation.

Before you capture a built site.

Close what you do not want. A cookie banner, a newsletter pop-up or a chat launcher that is visible is captured, because it is on the page. Dismiss it first, or capture it on purpose on its own with Pick element.
Let it load. Builders lazy-load images below the fold. Capture full page scrolls through the document first so lazy images and reveal-on-scroll sections get a bounded chance to appear, but a slow image that still fails is recorded in the asset ledger and blocks the import. Wait, then capture again.
Pick the carousel slide. A slider is captured in its current state: the slide that is showing, at the position it is in. Stop autoplay if the builder offers it, and capture each slide you need separately with Capture screen.
Decide about animation. Elements mid-animation are captured where they are at that moment. Scroll to where the animation has finished, or capture the screen once things have settled.
Check the fonts. Builders either serve Google Fonts, which both routes handle, or self-host a font: the paste measures that text as Inter, and the plugin loads it only if it is installed on the Figma machine, otherwise the closest weight of Inter, then Roboto. How fonts are resolved.
Choose the width. The capture records the viewport you capture at. Narrow the window for the mobile layout.

Builder notes.

These are the behaviors to expect from each builder’s output, based on how their pages are commonly built. They are starting points, not test results; the one measured capture is described in the next section.

Builder	What to watch for	What to do
Webflow	Interactions that animate elements in on scroll; sliders and tabs with one visible pane; collection lists that paginate.	Capture full page scrolls first so scroll-triggered sections can appear. Capture tabs and slides one state at a time with Capture screen.
Framer	Heavy lazy loading and image optimization; appear-on-scroll effects; sticky and fixed sections.	Expect a longer full-page capture while images arrive. A sticky or fixed section appears once in the capture: with Capture screen where it sits on screen at that moment; in a full-page capture one anchored to the top stays at the top and one anchored to the bottom, such as a chat launcher or cookie bar, moves to the bottom of the page.
WordPress	Themes and page builders add their own lazy loading and overlays; cookie and consent plugins; self-hosted fonts.	Dismiss the consent plugin first. If a theme font is not on Google Fonts, install it on the Figma machine before importing.
Shopify	Product image galleries and carousels; cart and menu drawers; currency and region pop-ups; password-protected development stores.	Open the drawer or gallery state you want and use Capture screen. A password-protected store works because you are already signed in to it in Chrome.
Squarespace	Image loaders that swap in higher-resolution files; galleries and lightboxes; announcement bars.	Let the higher-resolution images finish loading before a full-page capture. Close the announcement bar unless you want it.
Wix	Pages positioned absolutely rather than with flex; many small background and overlay layers; animations on load.	Expect fewer auto layout frames: hints come only from flex, one-dimensional grid and simple block stacks, so absolutely positioned boxes keep their fixed positions, and the plugin puts any converted frame back to fixed positions rather than let auto layout move anything. Finishing auto layout by hand.

One measured example, dated.

LilLabr’s integration notes record a full-page capture of a Framer-built marketing site on 2 September 2026 through the real extension in headless Chromium at 1280 pixels wide. The page captured at a height of a little over 14,000 pixels with roughly 700 layers, including 232 text layers, 38 images and 68 vectors, with no warnings, in under nine seconds, most of it the lazy-load scroll pass and image fetches. Run through the plugin’s builder in a test harness that fakes the Figma plugin API, the capture had between a third and a half of its hinted frames put back to fixed positions by the auto layout check, which allowed 1px at the time, depending on how the harness measured text. The harness ships only Inter, Roboto and Georgia, so it substituted Inter for the site’s Google Font; that capture was not imported into Figma Desktop. That is one site, one date and one build; it shows the mechanism, not a promise for every builder page.

Your own site, a client’s, or someone else’s.

Capturing your own site, a client’s site you are redesigning, or a staging site you have been given access to is the ordinary case, and it works the same whether the page is public, behind a password or on localhost. Private pages. Capturing another company’s site for reference is also common design practice; treat the result as a reference, respect their copyright in images and copy, and keep real customer data out of anything you share. If a captured page should stay on your computer, turn Save captures off in Settings before capturing. LilLabr’s own Terms of Use are the ones you agree to with the box on the first capture step.