Margins
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.
Plugin 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.
Plugin Details
Version | 1 |
---|---|
Created | August 12, 2019 |
Last Updated | September 6, 2019 |
Category | Software development |
Creator | Jackie Chui |
Stats | 8828 installs, 189 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.