AutoGrid
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
Plugin 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
Plugin Details
Version | 4 |
---|---|
Created | March 5, 2020 |
Last Updated | March 21, 2020 |
Category | Software development |
Creator | Jan Six |
Stats | 9827 installs, 323 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:index.html
- main:code.js
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI