You paste a frame copied from Figma and the tool redraws it. Then it reads the file’s numbers: size, padding, gap and sizing of every layer. It checks 17 things: first the mistakes the numbers can prove, then the choices that are usually wrong. Here is why they’re a problem; the problem’s card tells you how to fix it, when it finds it in your frame.
Content doesn’t fit
The frame has a set size, but children, gap and padding together take more room. The layout is broken now, not only when the text changes.
Scrolling list
The content goes past the frame only at the end of the main axis: for a scrolling list that’s right. In Figma it’s worth saying so with Clip content and prototype scrolling, so it looks the way it really is and developers know it scrolls.
Text bigger than its box
The text box has a fixed size and the lines don’t fit: in Figma it spills out, in the product it gets cut or overlaps.
Text box bigger than the text
The box has a hand-set size and the text doesn’t fill it: the empty space counts in the layout, shifts alignments and the gaps are no longer the ones in the panel.
Group inside an Auto Layout
A group has no padding, can’t be Fill and always measures its content: in the flow it’s a box that doesn’t respond.
Frame without Auto Layout
The children are placed by hand: if a text gets longer or an element disappears, the others don’t move.
Layers out of the flow
Absolute position takes the layer out of the layout: it doesn’t push the others and doesn’t move with them. Right for badges and overlays, wrong for the rest.
Text at the limit
A Hug text widens with its words. Going up through the Hug containers you reach the first one with a set width: there is almost no room left, one more word and the layout breaks.
Wrap with a fixed height
With wrap the number of rows depends on the width: when the frame gets narrower there are more rows. With a fixed height the new rows spill out of the frame and cover what’s below.
Content set to Fixed instead of Fill
No child in the row is Fill and the content block (wrapping text, Fill children) has a hand-typed width. If the card changes width the content stays as it is: it leaves a gap or spills out.
Fixed container bigger than its content
A transparent frame with a hand-typed size and less content inside: the empty space is invisible but counts, pushes what comes next and doesn’t follow the text when it changes. It usually meant to be Hug.
Fixed that fills its parent
The child takes exactly the parent’s space, but with a hand-typed size: if the parent changes width or height, the child stays as it is and leaves a gap or spills out. It usually meant to be Fill.
Spacing off the 4 grid
Padding and gaps that aren’t multiples of 4 show up as small misalignments and become odd numbers in code.
Hand-typed spacing
The file already uses spacing variables, but here the numbers are typed by hand: when the token changes, this frame stays behind.
Frame that does nothing
No fill, stroke, effects, padding or gap, and a single child: it’s an extra layer in the tree that doesn’t change the result.
Empty frame used as a spacer
An empty, flat frame is only there to make distance. Gap or padding do the same and stay right when the content changes.
Deeply nested Auto Layouts
Six or more Auto Layouts inside each other are hard to read and often hide a level you can remove.
- Does my file end up on a server?
- No. The Figma copy is read in the browser, on your computer. No request goes out.
- Does it work with components and instances?
- Yes. I also go inside instances and check the component they come from: the problem is marked “in the component”, you fix it there and every instance follows.
- Why does the preview look a bit different from Figma?
- Shapes, text and colours are redrawn from the copy’s data: images, effects and some fonts can change. The numbers behind the checks are the file’s own.