https://github.com/Lona/figma-jsonrpc

Leverage JSON-RPC to communicate between your Figma plugin and your Figma UI.
https://github.com/Lona/figma-jsonrpc

figma figma-jsonrpc figma-plugin json-rpc

Last synced: 3 months ago
JSON representation

Leverage JSON-RPC to communicate between your Figma plugin and your Figma UI.

• Host: GitHub
• URL: https://github.com/Lona/figma-jsonrpc
• Owner: Lona
• Created: 2019-10-04T15:17:57.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-31T09:49:53.000Z (about 3 years ago)
• Last Synced: 2024-04-11T00:42:39.239Z (3 months ago)
• Topics: figma, figma-jsonrpc, figma-plugin, json-rpc
• Language: JavaScript
• Size: 21.5 KB
• Stars: 57
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Lists

• awesome-figma - figma-jsonrpc - Leverage JSON-RPC to communicate between your Figma plugin and your Figma UI. (Plugins development)

README

        
# figma-JSONRPC

Leverage [JSON-RPC](https://www.jsonrpc.org) to communicate between your [Figma](https://www.figma.com/) plugin and your Figma UI.

## Installation

```bash

npm install figma-jsonrpc

```

## Usage

- Define your API in a separate file (in `api.ts` for example):

  ```ts

  import { createPluginAPI, createUIAPI } from "figma-jsonrpc";

  // those methods will be executed in the Figma plugin,

  // regardless of where they are called from

  export const api = createPluginAPI({

    ping() {

      return "pong";

    },

    setToken(token: string) {

      return figma.clientStorage.setAsync("token", token);

    },

    getToken() {

      return figma.clientStorage.getAsync("token");

    }

  });

  // those methods will be executed in the Figma UI,

  // regardless of where they are called from

  export const uiApi = createUIAPI({

    selectionChanged(selection) {

      return "pong";

    }

  });

  ```

- Use the UI API in the plugin:

  ```ts

  import { uiApi } from "./api";

  // This shows the HTML page in "ui.html".

  figma.showUI(__html__);

  figma.on("selectionchange", () => {

    uiApi.selectionChange(figma.currentPage.selection);

  });

  ```

- Use the API in the UI:

  ```ts

  import { api } from "./api";

  const pong = await api.ping();

  const token = await api.getToken();

  await api.setToken("new token");

  ```

The typescript definition of the API is automatically inferred from the methods passed to `rpc` :sparkles:.

> :warning: You always need to import the API in both the plugin and the UI, even if you aren't using it. It is necessary so that both part can handle calls from each other.

## One more thing...

Using React? There are a couple of treats for you.

Two React hooks you can use in your UI which will setup the necessary APIs for you.

- `useFigmaSelection`: get and set the current [Figma selection](https://www.figma.com/plugin-docs/api/properties/PageNode-selection/#docsNav)

  ```js

  import useFigmaSelection from "figma-jsonrpc/hooks/useFigmaSelection";

  const Component = () => {

    const [selection, setSelection] = useFigmaSelection();

  };

  ```

- `useFigmaSetting`: get and set any [setting](https://www.figma.com/plugin-docs/api/figma-clientStorage/)

  ```js

  import useFigmaSetting from "figma-jsonrpc/hooks/useFigmaSetting";

  const Component = () => {

    const [token, error, loading, setToken] = useFigmaSetting("token");

  };

  ```

In both cases, you also need to import `figma-jsonrpc/hooks/*` in your plugin to create the APIs.

## License

MIT