AutoGrid
by Jan Six
Grid support for Figma's AutoLayout! Define rows, columns and padding and let AutoGrid do the rest. Find yourself constantly creating multiple AutoLayout layer…
Installs
10,021
Likes
361
Users
14,145
Views
18,553
Preview
About this plugin
Grid support for Figma's AutoLayout! Define rows, columns and padding and let AutoGrid do the rest.
Find yourself constantly creating multiple AutoLayout layers just to keep your 24 cards in a neat layout?
With AutoGrid keeping your grids in sync is a breeze:
1) Select a root item for your grid (e.g. one single card or a selection of multiple cards)
2) Define your grid structure: How many rows, columns and padding should the new grid have?
3) Press "Create new grid".
-> AutoGrid will clone your root item (if you only selected one) or arrange your selection so it fills up the newly created grid (right now it won't duplicate items if you selected more than one).
Auto-Update:
With Auto-Update you dont have to manually update your grid any time your structure changes (e.g. you delete an item, you move items around, etc.).
Whenever a row has more columns than you specified in your grid structure the plugin will automatically rearrange your grid.
Motivation for this plugin:
I constantly found myself creating rows of items to make up a grid, and whenever I moved an item around I had to restructure it all, resulting in a lot of wasted time. Also I couldnt use Figma's Tidy Up feature as it doesnt allow me to specify columns or rows - plus when you delete or move an item the flow is broken.
Did you run into any issues or do you want to contribute?
This plugin is open sourced at https://github.com/six7/auto-grid
More software development plugins
View allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.