jaytrovare / auto-layout-spaces

👀 A Figma plugin to view all spacing at once in auto-layouts

Auto-layout Spaces

👀 View all spacing at once in auto-layouts.

➡️ Install on Figma

---

Why

Show all spaces in auto-layouts at once, so that developers integrating the design don’t have to select elements one by one to see their spacing.

Features

• Show spaces in all of the auto-layouts in the page.
• Hide them.
• Show only spacing between items, or only paddings.
• Choose different units for the value of spaces (px, rem or a custom pixel ratio).
• Choose to keep or not spaces after closing the plugin.
• Spaces are shown with different colors, each color corresponding to a specific value.

Running locally

After cloning the repo, install the dependencies via pnpm:

pnpm install

You can build the projet once with:

pnpm build

...or watch for changes:

pnpm watch

In Figma, open a file and go to Figma > Plugins > Development > Import plugin from manifest and select the manifest.json in the project.

Now, you can run the plugin and do your changes.

License

MIT © Colin Lienard