Grids Generator
<p>Apply any frame with grid styles configurations inspired from Google Chrome's element inspector. Each number is a multiplier of 4px.</p><p><br></p><p>• Horizontal padding (1 - 12)</p><p>• Vertical padding (1 - 12)</p><p>• Max width (960px / center aligned)</p><p>• Max width (960px / left aligned)</p><p>• Show 12 columns</p><p><br></p><p><strong>Instructions:</strong></p><ol><li>Enable grid view (ctrl + g)</li><li>Highlight a frame</li><li>With the plugin open, toggle the grid options and you should see the grids being applied.</li></ol><p><br></p>
Plugin Preview
About this plugin
Apply any frame with grid styles configurations inspired from Google Chrome's element inspector. Each number is a multiplier of 4px.
• Horizontal padding (1 - 12)
• Vertical padding (1 - 12)
• Max width (960px / center aligned)
• Max width (960px / left aligned)
• Show 12 columns
Instructions:
- Enable grid view (ctrl + g)
- Highlight a frame
- With the plugin open, toggle the grid options and you should see the grids being applied.
Plugin Details
| Version | 1 |
|---|---|
| Created | May 10, 2020 |
| Last Updated | May 10, 2020 |
| Category | Software development |
| Creator | Jacky Lee |
| Stats | 14597 installs, 455 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/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
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.