Spacing Manager

<p>The Purpose</p><p>I think we all know that sometimes designers making different spacings between the elements. In some cases, we have 15px spacing, and in another place, 14px. It's hard always to update all these spacings manually.</p><p><br></p><p>With the help of auto layout, we can resolve this problem. Just turn on the auto layout feature with zero spacing between the elements and use "spacers" between.</p><p><br></p><p>There are different ways, but I prefer to use the 8-Point Grid System. You can use premade "spacers" from the public library (<a href="https://www.figma.com/c/file/809152234949654615/Spacings" rel="noreferrer noopener nofollow" target="_blank">https://www.figma.com/c/file/809152234949654615/Spacings</a>) and place them between the elements. In that case, you will make sure that the spacings between the components are consistent.</p><p><br></p><p>How it works</p><p>Add the library <a href="https://www.figma.com/c/file/809152234949654615/Spacings" rel="noreferrer noopener nofollow" target="_blank">https://www.figma.com/c/file/809152234949654615/Spacings</a> or have own symbols that have "$spacing" word in the name;</p><p>Use them when needed</p><p>If you want to hide them, select a parent frame and run the plugin. It will look for all spacers that were used on the frame and will set zero opacity</p><p>If you want to show spacers back, just rerun the plugin. If the first spacer on the row will have zero opacity, it will set 100% for all spacers found on the selected frame.</p><p><br></p><p>Pro tip</p><p>You can use smart spacing prediction feature! Here is how it works <a href="https://twitter.com/faridsabitov/status/1281697269948067845" rel="noreferrer noopener nofollow" target="_blank">https://twitter.com/faridsabitov/status/1281697269948067845</a></p><p><br></p><p>Pro tip</p><p>You can set "cmd"+"option"+"H" hotkey via system preferences in Mac to toggle spacers visibility quickly. You can read more about setting the hotkeys in Figma here: <a href="https://hustle.bizongo.in/custom-shortcuts-for-figma-8c93f3bc9ca2" rel="noreferrer noopener nofollow" target="_blank">https://hustle.bizongo.in/custom-shortcuts-for-figma-8c93f3bc9ca2</a></p>