Grid Creator

About this plugin

README

Introduce

This plugin is used to assist designers in creating grid systems in graphic design projects, and the measurement and creation steps of grid systems refer to the book Grid Systems in Graphic Design.

How to use

Paper selection / Type area settings

• Set the paper size in the Paper field
• Set the paper orientation in the Orient field
• Set the center margin to Golden Ratio or Custom in the Type area (selecting the Golden Ratio system will set the default margin according to the existing configuration, and the designer can modify the margin value according to the actual situation)

Columns / grid modules

• Set the number of columns of the grid system in the Col num field
• Set the column spacing of the grid system in the Col gap field
• Set the number of grid modules for each column of the grid system in the Grid num
• Set the grid module spacing of the grid system in the Grid gap field

Typography settings

• Set the height of the text line you want to put into the grid system in Line height
• Cap height: If the text has Vertical trim: Cap height to base line enabled, you need to assign a value here, otherwise keep the default

Calculate

• Click the Calculate button to precompute the relevant math of the grid system

Adjust

• Click the Adjust button to optimize the amount of math (e.g. decimal rounding)

Generate

• Click Generate to create a grid system in the figma canvas

References

1. Müller-Brockmann, Josef. Grid Systems in Graphic Design: A Visual Communication Manual for Graphic Designers, Typographers and Three Dimensional Designers = Raster Systeme Für Die Visuelle Gestaltung: Ein Handbuch Für Grafiker, Typografen Und Ausstellungsgestalter. 18th edition. Salenstein: Niggli, 2021.