(Easy)Grid - Easy Grids and Shapes

About this plugin

(Easy)grid lets you create interesting grids and shapes in seconds; easily placing it into Figma without the math. It can also let you quickly align and scale pre-existing elements as layout-items/cells for a quicker design flow.

By using the four flexible options — columns, rows, and spacing — you can write out a layout that is an exact fit, and rapidly modify until perfect.

How many times have you had to create a grid or layout, and found yourself spending too much time finding the correct sizes for each element, messing around with spacing to ensure it looks perfect, or having to perfectly align it? This is where the (Easy)grid plugin comes into play.

See https://easygrid-app.web.app/ or continue reading to learn more about the plugin and about how to use it.

You can also support me and the project by visiting https://www.Paypal.me/elirxxatia or https://buymeacoffee.com/elirazatia

Features

🎨 Create layouts in seconds — Create layout patterns in seconds ranging from a couple of rows or columns to creating the layout for whole tools and software.

👩‍🏭 [NEW FEATURE] Combine cells into complex shapes — Using the ‘Freeform’ wand tool, you can multiple cells to combine them into one larger shape, allowing for a lot of creativity.

🎛 [NEW FEATURE] Populate cells with components — When applying your layout to the selected layer, you may select more than one layer to populate the layouts' with its cells as the additional layers selected.

💾 [NEW FEATURE] Saving created layouts — Save your layout and reuse them in other Figma projects to quickly insert your most common layouts.

🗂 [NEW FEATURE] Pre-made Layouts — Select from pre-made grids to make your design come to life even faster, including: Golden Ratio, 12 Column Grid, iPad App With Sidebar, iPhone Safe Area, and a 12-Column Web Layout.

👨‍💻 Work faster, not harder — Reduce mistakes and time taken by not needing to worry about sizing or positioning your layout and letting (easy)grid handle the maths.

📲 Insert to Figma In A Click — Insert the layout from the plugin directly over your selected Figma layer in a single click.

⏳ Remembers what you wrote — Your layout options are remembered after you move them into Figma, even after you change your selection, letting you test a layout over different sized screens, or quickly prototyping variations.

Used For

- Simple Repetitive Layouts

- Creating complex shapes

- Web / App Layouts

- Creating Lists / Grids

- Creating Patterns

- Guides For Digital Design

- Rapidly Testing Out Various Layouts

- Quickly Populating Elements Without CMD+C and CMD+V And Dragging

Quick start

1. Select any layer to use as the dimensions and position for the grid.

1. You can select multiple layers to repeat them as each grids’ cell.

2. Enter the amount of cells you want in the ‘Grid columns' and ‘Grid rows’ fields.

1. You can also enter the size of each cell by writing it manually (separated by spaces) either by using exact values (in points) or by using a total fraction of the grid.

3. Adjust the Column gap / Row gap to your liking.

4. Optionally, you can use the ‘Drag and Drop’ or ‘Freeform’ tool to merge shapes to create larger cells, or combine into unique shapes; Using the preview menu, click and drag to do so.

5. Press the “Insert Into Figma” button to add the grid into your artboard.

6. Quickly change values and re-insert until you are happy with the result - No more manually readjusting every layer.

More Information

Visit our website at https://easygrid-app.web.app/. We also respond to all questions and feedback posted in the comments area.