Grid Variables

About this plugin

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.UsageRun the pluginConfigure grid parametersSave to variable collection - Creates/updates variables in a selected collectionIf saving variables, select a collection and enter a group nameAnd/or generate preview frame - Creates a frame showing the grid layoutClick GenerateOutputVariables (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