https://github.com/fradser/figma-frame-resizer
https://github.com/fradser/figma-frame-resizer
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fradser/figma-frame-resizer
- Owner: FradSer
- Created: 2021-07-02T11:06:20.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-03T21:50:11.000Z (over 2 years ago)
- Last Synced: 2025-02-08T06:14:08.309Z (8 months ago)
- Language: TypeScript
- Size: 453 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frame Resizer  [](https://twitter.com/FradSer)
Increase the spacing at the four edges of the frame, then center the original content.
## Development guide
_This plugin is built with [Create Figma Plugin](https://yuanqing.github.io/create-figma-plugin/)._
### Pre-requisites
- [Node.js](https://nodejs.org) – v14
- [Figma desktop app](https://figma.com/downloads/)
### Build the plugin
To build the plugin:
```
$ npm run build
```
This will generate a [`manifest.json`](https://figma.com/plugin-docs/manifest/) file and a `build/` directory containing a JavaScript bundle for the plugin.
To watch for code changes and rebuild the plugin automatically:
```
$ npm run watch
```
### Install the plugin
In the Figma desktop app:
1. Open a Figma document.
2. Go to `Plugins` → `Development` → `New Plugin…`.
3. Click the `Click to choose a manifest.json file` box, and select the `manifest.json` file that was generated.
### Debugging
Use `console.log` statements to inspect values in your code.
To open the developer console in the Figma desktop app, go to `Plugins` → `Development` → `Open Console`.
## See also
- [Create Figma Plugin docs](https://yuanqing.github.io/create-figma-plugin/)
- [Storybook](https://yuanqing.github.io/create-figma-plugin/ui/)
- [Figma plugin API docs](https://figma.com/plugin-docs/api/)
- [`figma/plugin-samples`](https://github.com/figma/plugin-samples)
- [`yuanqing/figma-plugins`](https://github.com/yuanqing/figma-plugins)