Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/fradser/figma-frame-resizer

Last synced: 25 days ago
JSON representation

Host: GitHub
URL: https://github.com/fradser/figma-frame-resizer
Owner: FradSer
Created: 2021-07-02T11:06:20.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2023-02-03T21:50:11.000Z (almost 2 years ago)
Last Synced: 2023-03-01T07:11:28.367Z (almost 2 years ago)
Language: TypeScript
Size: 453 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Frame Resizer ![](https://img.shields.io/badge/A%20FRAD%20PRODUCT-v1.0.0-green) [![Twitter Follow](https://img.shields.io/twitter/follow/FradSer?style=social)](https://twitter.com/FradSer)

Increase the spacing at the four edges of the frame, then center the original content.

![Cover](https://user-images.githubusercontent.com/1439628/146648175-f932dd4d-1f6e-45a7-b79e-b9be43f5818e.png)

## 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)