UI Spacing Map

About this plugin

UI Spacing Map is a powerful inspector tool that instantly reveals the hidden spacing geometry of your Figma designs. Whether you are building a strict design system, auditing a messy layout, or prepping complex files for developer handoff, this plugin makes Auto Layout properties visual, interactive, and effortless to document.Stop manually drawing red lines and measuring gaps. UI Spacing Map takes the guesswork out of UI alignment and saves you hours of manual documentation!✨ Key FeaturesLive Spacing Inspector: Get real-time, color-coded overlays for padding (green rectangles) and item spacing (pink lines). Toggle measurements on and off instantly, right from the sleek panel.8pt Grid Auditor: Keep your designs clean and scaleable. Scan any component or frame to instantly flag fractional pixels and spacing values that break the standard 8pt or 4pt grid rules.Ultimate Cheat Sheet Export: With one click, automatically generate a permanent, beautifully annotated documentation frame right next to your designs—perfect for seamless developer handoff.Beautiful Native Theme: Built with a sleek, custom UI that features 100% full Dark Mode support, designed to feel premium and right at home inside your Figma workspace.💡 How to use:Select any Frame or Component on your canvas.Open UI Spacing Map.Use the Inspect tab to toggle live padding and spacing overlays.Use the Audit tab to ensure your selection is 8pt compliant.Use the Export tab to permanently render a Spacing Cheat Sheet onto your canvas!