About the project
Layout Drift Guard started from a handoff problem: two blocks look like the same component, but one has 16 px padding and another has 24. Frontend ships a single class. The mock is no longer pixel-perfect, and nobody notices until QA.
Most spacing plugins ask a different question — “is this on an 8 pt grid?” This one asks: do copies of the same element actually share the same spacing and type? A BentoCard is compared to other BentoCards, not to a hero or a footer.
It looks at:
Padding and gaps on similar frames, components, and instances Subpixel leftovers — 16.3 padding, 14.27 type — that should be whole pixels Unstyled text and leftover typefaces (text already on a text style is skipped) Copies are grouped by component, similar name (Card / Card 2), or matching layout, so renamed instances and Duplicate frames still land in one issue.
You choose which pages to scan, or click a frame to analyze only its children. Quick Fix aligns values in place. Nothing leaves Figma — the plugin has no network access.
How to use it
Open Layout Drift Guard from Plugins. In the scope menu at the top, tick the production pages. Or click a frame on the canvas — the plugin analyzes its children and adds that page automatically. Clear removes the parent frame; None unchecks pages. Switch Spacing or Typography. Use Mismatches for copies that disagree, Subpixel for fractional values. On Spacing, filter further with All / Padding / Gaps. Click a layer to zoom to it on the canvas. Tick rows and use Quick Fix to align them to the recommended value, a custom number, or Ignore. ±2 px in the tab bar is the drift window: values this close count as the same intent and get flagged. Change it there without opening settings. The panel rescan as you edit. Refresh reruns the current scope. Settings cover scan depth (top-level sections vs nested), skip locked layers, and grouping by name or component.