/auto-layout-spaces

๐Ÿ‘€ A Figma plugin to view all spacing at once in auto-layouts

Primary LanguageTypeScriptMIT LicenseMIT

Cover

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