https://github.com/pavellaptev/figma-auto-layout-styles
The plugin brings an experience of Figma styles to the auto-layout feature. You can make separate configurations of auto-layouts, save and load them, lock or change at any time.
https://github.com/pavellaptev/figma-auto-layout-styles
autolayout figma-plugin figma-plugins
Last synced: 11 months ago
JSON representation
The plugin brings an experience of Figma styles to the auto-layout feature. You can make separate configurations of auto-layouts, save and load them, lock or change at any time.
- Host: GitHub
- URL: https://github.com/pavellaptev/figma-auto-layout-styles
- Owner: PavelLaptev
- License: mit
- Created: 2021-02-04T15:16:44.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-05-07T00:20:58.000Z (about 3 years ago)
- Last Synced: 2025-07-27T07:30:50.728Z (11 months ago)
- Topics: autolayout, figma-plugin, figma-plugins
- Language: TypeScript
- Homepage:
- Size: 31.5 MB
- Stars: 10
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Figma Auto Layout Styles
### The plugin brings an experience of Figma styles to the auto-layout feature. You can make separate configurations of auto-layouts, save and load them, lock or change at any time.
---
## 🤔 When do I need it?
- If you use the same spacers between certain components or elements.
- If you have a team and want it to use and apply layouts rules in a comfortable way.
- If you have multiple projects with different spacer setting and want to keep all in consistency.
---
### 📺 Demo Video [on YouTube](https://youtu.be/vr8asHzyy30)
---
## 🧞♂️ How it works
The plugin works in the same way as sharable styles in Figma. But the plugin stores these styles as a JSON file.
You can add so many layouts as you want and save them separately as a layouts configuration.
---
## 🤖 How to use
Before you will start to apply layouts, you need to select two or more elements. Than click “Apply” button and plugin will automatically apply auto-layout styles from the plugin's layout card.
---
## 💾 Autosave feature
The plugin uses Figma's plugin storage - so even if you closed the plugin without saving, all your changes will be there the next time you launch the plugin again.
---
## 🪢 Hook names
Hook names is a string that will be applied as an auto-layout layer name.
This is important to have distinguish and unique names for each layout, because only with this condition the plugin will be able successfully update multiple layouts automatically.
---
## 💣 Update all layouts at once by hook names
If you used the plugin before and adjusted all layouts, each type of layout will have a specific name.
Clicking on the “Update all by hooks” button the plugin will go through all layouts on the page and apply layouts styles from you configuration.
---
## 🔒 Lock Layouts
Each layout can be locked if you want to make your work with the plugin more safely.
---
## 🔗 Links
#### [Figma project](https://www.figma.com/file/MczslX4e8wjNnYTgy57RpI/Figma-Auto-Layout-Styles?node-id=0%3A1)
#### [My website](https://pavellaptev.github.io/)
#### [Support the plugin](https://www.paypal.me/pavellaptev)