Auto layout from
a website capture.

What the capture records.

Every rendered box is recorded from the browser with its exact position and size. That is the ground truth, and it never changes. On top of it, containers that the browser laid out as flex rows or columns, as one-dimensional grids, or as simple block stacks also carry an auto-layout hint: the direction, the spacing between children and the padding. A two-dimensional grid carries no hint, and neither does a block stack with an inline, floated or absolutely positioned child or a negative margin, because LilLabr only records a hint it can express as one row or one column with a single gap.

The 0.5px rule.

The plugin’s Use auto layout option, under Import options on its Import a file tab, is on by default. For every frame with a hint, the plugin applies auto layout and then compares the result with the recorded boxes. If the frame or any in-flow child would end up more than 0.5px from where the browser drew it, or change size by more than that (a text layer is allowed 4px of height so that only a wrapped line counts, and the width of text that sizes itself is left to Figma), that frame is put back to fixed positions. The frame keeps the positions the browser recorded; it just does not reflow yet.

This is deliberate. An auto layout frame that is 6px off is worse than a fixed frame that is right, because you would not notice the drift until you had built on top of it. The fixed frame tells you the truth and leaves the choice to you.

Why a frame stays fixed.

• Uneven gaps. Children separated by different margins cannot be expressed as one gap value, so the frame stays fixed.
• Two-dimensional grids. A CSS grid with rows and columns is not a single direction.
• Overlap. A negative margin between children, or an out-of-flow child (absolute or fixed) in a plain block stack, breaks the one-after-another rule. A badge or sticky bar positioned over a flex row or column is kept as an absolutely positioned child inside the auto layout frame instead, and the check ignores it.
• Transforms. A child moved by a translate() transform is recorded where the browser drew it, not where flow would put it, so its frame fails the check. A plain 2D rotation is recorded as rotation on the layer; skew, scale and 3D transforms are not reproduced.
• Wrapped rows. A flex row that wrapped onto several lines is converted with Figma’s wrap mode. It stays fixed only when Figma’s wrapping would put a child somewhere other than where the browser did.

In LilLabr’s integration notes of 2 September 2026, a full-page capture of a Framer-built marketing site, run through the plugin’s builder in a test harness that fakes the Figma plugin API, had roughly a third to a half of its hinted frames put back to fixed positions, depending on how the harness measured text. That is one page, one date and one build, made before the tolerance was tightened from 1px to 0.5px; it shows the mechanism, not a rate to expect. The notes name block-flow gap folding and grid rows as the hints whose improvement would raise the applied count. Improving the hints is serializer work, not a setting you need to change.

Paste and plugin behave a little differently.

Finish it in Figma.

1. Select a frame that stayed fixed and press Shift+A to add auto layout. Figma infers the direction from the children; adjust the gap and padding to the values you can read from the recorded boxes.
2. Work from the inside out. Convert the smallest repeated pieces first, a button, a card, a list row, then their containers.
3. Rebuild two-dimensional grids by hand, using the imported frame as a measured reference beside your rebuild rather than converting it in place.
4. Keep the original imported frame untouched as a comparison, as the redesign guide does.

Related: the plugin’s options, the property map from CSS to Figma, and the step-by-step website-to-Figma guide.