A Figma plugin that helps designers create customizable grid layouts quickly and efficiently. Generate different types of grids including 12-column, 8-column, and combined column-row layouts with just a few clicks.
- 12-Column Grid: Standard layout grid for web design
- 8-Column Grid: Alternative layout system for varied designs
- 6-Column Grid with Rows: Combined grid system for complex layouts
- 4-Column Grid with Rows: Simplified grid system with row divisions
- Automatically sized to 1440x1080px canvas
- Black grid lines for clear visibility
- Instant viewport focusing on created grid
- Download or clone this repository
- Install dependencies:
npm install
- Build the plugin:
npm run build
- In Figma desktop app:
- Open a document
- Right-click → Plugins → Development → Import plugin from manifest
- Choose the
manifest.jsonfile from this project
- Select the plugin from Figma's plugin menu
- Choose your desired grid type from the available options:
- 12-Column Grid
- 8-Column Grid
- 6-Column Grid with Rows
- 4-Column Grid with Rows
- The grid will be automatically generated and centered in your viewport
This plugin is built with Create Figma Plugin.
- Node.js – v20
- Figma desktop app
# Build the plugin
npm run build
# Watch for changes and rebuild automatically
npm run watchsrc/code.ts- Main plugin logicsrc/ui.tsx- Plugin UI componentsmanifest.json- Plugin configuration
- Use
console.logstatements in your code - Access logs via Figma's plugin developer console
- Open console: Plugins → Development → Show/Hide Console
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.