Grid Overlay

Component Overview A customizable 8-point grid overlay for Framer projects.

Component Overview A customizable 8-point grid overlay for Framer projects. It helps you maintain pixel-perfect spacing and visual consistency while building layouts. Inspired by Figma’s layout grid system, this component makes it easy to align and balance your designs directly inside Framer. You can toggle, customize, and fine-tune the grid to match your project’s needs, whether you are working on a landing page, dashboard, or mobile layout. Key Features Quick Preset Grid Sizes Instantly switch between common design system values: 4px, 8px, 12px, and 16px. Grid Style Options Choose between lines, dots, or crosses, similar to Figma’s grid styles. Offset Controls Fine-tune your grid’s position with horizontal and vertical offset settings for precise alignment within your frame. Thickness Control Adjust the stroke or dot thickness to suit your visual preference and zoom level. Color Presets Pick from a set of common grid colors or define your own for maximum flexibility. Smart Defaults Includes a darker, high-visibility default grid for immediate use in light-themed designs. Use Case Add this component to any frame to visualize spacing and maintain consistency across your project. Ideal for designers who prefer a pixel-accurate 8-point grid workflow directly inside Framer, without the need for external tools.