Grid Variables

Generate layout grid variables and preview frames for responsive design systems.

What it doesCalculates column widths from your grid parameters and creates Figma variables for viewport, columns, margins, gutters, and column spans. Optionally generates a preview frame with the grid bound to those variables.

The plugin automatically rounds column widths to whole pixels and shows whether your grid parameters result in pixel-perfect dimensions. The calculated width indicator turns green when your max width matches the rounded result, or red when rounding causes a mismatch.

UsageRun the pluginEnter the max width, the number of columns, and the margin and gutterChoose Save to variable collection, Generate preview frame or both. To save variables, pick a collection and enter a group name, such as grid/xlClick GenerateFor each screen and what its controls do, see the user guide.

OutputVariables (grouped by your chosen name):{group}/viewport - Total width{group}/columns - Column count{group}/margin - Side margins{group}/gutter - Gap between columns{group}/col-1 through col-{n} - Span widthsPreview frame:

Named with the max width value (e.g., "1440"), with column layout and grid overlay bound to variables if generated together