Grid Overlay

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

1. Quick Preset Grid SizesInstantly switch between common design system values: 4px, 8px, 12px, and 16px.

2. Grid Style OptionsChoose between lines, dots, or crosses, similar to Figma’s grid styles.

3. Offset ControlsFine-tune your grid’s position with horizontal and vertical offset settings for precise alignment within your frame.

4. Thickness ControlAdjust the stroke or dot thickness to suit your visual preference and zoom level.

5. Color PresetsPick from a set of common grid colors or define your own for maximum flexibility.

6. Smart DefaultsIncludes 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.