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.📺 Demo Video on YouTube🤔 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.🧞‍♂️ How it worksThe 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 useBefore 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 featureThe 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 namesHook 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 namesIf 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 compositionEach layout can be locked if you want to make your work with the plugin more safely.🔗 LinksProject on GitHubFigma projectMy websiteSupport the plugin