Playground

React Figma Layout Guide

A Figma-style grid overlay for React. Open the to configure the overlay in real-time, then press or click to toggle the overlay.

Layout: columns12 cols · stretch

Layout modes

Columns

Vertical columns with configurable count, gutter, margin and alignment type.

Rows

Horizontal rows with height, gutter, and top / center / bottom alignment.

Grid

Full-viewport crosshatch grid defined by a single square cell size.

Layout Guide

Mode

Appearance

Color

#ff0000

Opacity0.10

Animate

Stagger tracks on appearance

Visible by default

Show without pressing Shift+G

Position

Fixed covers the viewport; absolute is confined to the hero section (requires a relative parent).

Layout

Columns

Type

Count12

Gutter20px

Margin

Config

{
  "color": "rgba(255, 0, 0, 0.1)",
  "animate": true,
  "defaultVisible": true,
  "position": "fixed",
  "layout": "columns",
  "type": "stretch",
  "columnWidth": 80,
  "count": 12,
  "gutter": 20,
  "margin": "0%",
  "offset": "0%"
}