GuideMaker
Instant layout guides—Master your margins and inner widths.
Plugin Preview
About this plugin
[Description]
Stop manually dragging guides. This tool allows you to generate pixel-perfect margin and inner-width lines for any frame instantly. Whether you are defining safe zones for mobile or setting up complex grid systems, you can customize colors, thickness, and directions to match your workflow. Perfect for maintaining layout consistency and ensuring a smooth handoff for developers.
[How it works]
1.Configure your style Click the Gear icon (Settings) to set your preferences:
・Guide Color: Choose a color that stands out.
・Line Thickness: Set the stroke weight.
・Direction: Choose horizontal or vertical alignment.
2.Select your Frame Click the frame(s) on your canvas where you want the guides to appear.
3.Choose your Layout Mode
・Margin: Draws lines at a specific distance from the outer edges of the frame.
・Inner Width: Draws lines to define a specific content area within the frame.
4.Apply Enter your desired pixel values and click Apply to generate the guides.
[Tips]
・Show/Hide: Use the Show button to toggle guide visibility without deleting them.
・Clear: Need a fresh start? Click the Clear button to remove all generated guides instantly.
Plugin Details
| Version | 1 |
|---|---|
| Created | December 4, 2025 |
| Last Updated | December 4, 2025 |
| Category | editing & effects plugins |
| Creator | Daisuke Yamauchi |
| Stats | 13 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the editing & effects plugins category.