Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/colinlienard/auto-layout-spaces

👀 A Figma plugin to view all spacing at once in auto-layouts
https://github.com/colinlienard/auto-layout-spaces

auto-layout figma figma-plugin spaces

Last synced: 5 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/colinlienard/auto-layout-spaces
Owner: colinlienard
License: mit
Created: 2022-08-17T13:50:12.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-09-05T14:46:20.000Z (over 2 years ago)
Last Synced: 2024-11-28T14:53:37.964Z (2 months ago)
Topics: auto-layout, figma, figma-plugin, spaces
Language: TypeScript
Homepage: https://www.figma.com/community/plugin/1141632283161323116
Size: 479 KB
Stars: 1
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

![Cover](./assets/cover.png)

# Auto-layout Spaces

👀 View all spacing at once in auto-layouts.

➡️ [Install on Figma](https://www.figma.com/community/plugin/1141632283161323116/Auto-layout-Spaces)

---

## 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](https://pnpm.io/):

```bash
pnpm install
```

You can build the projet once with:

```bash
pnpm build
```

...or watch for changes:

```bash
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