Margins
by Jackie Chui
Resize and position elements using Top, Bottom, Left and Right. ————————————————————————————————— How to use: 1. Select one or more layers. (All layers need ha…
Installs
9,004
Likes
199
Users
21,823
Views
88,332
Preview
About this plugin
Resize and position elements using Top, Bottom, Left and Right.
—————————————————————————————————
How to use:
1. Select one or more layers. (All layers need have a parent frame)
2. Adjust either the Top/Bottom/Left/Right or the width and height values to position or resize your layers.
Change position without resizing:
Set the constraints to one side before changing the margin values.
Resize:
Set the constraints to both sides (Left + Right/Top + Bottom) before changing the margin values.
Keyboard shortcuts:
Up/Down - Increase/decrease by the small nudge value.
Shift + Up/Down - Increase/decrease by the big nudge value.
Presets:
You can create presets to quickly set margins and constraints by clicking the + button in the Presets section. By default the preset will include your current margin values.
To edit and rename a preset, click on its setting icon.
Only fields with values will be applied in the preset. For example, if you set only the Top and Right values and leave Left and Bottom blank, the preset will push layers to the top right without any resizing.
Here are some ideas of what you could do with presets:
- Place a close button at the top-right corner of a panel or dialog.
- Resize layers to have 16px margins on all sides.
- Resize a horizontal line to span full width.
- Resize a vertical line to span full height.
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.