https://github.com/romannurik/figui-loader

A webpack loader for bundling Figma plugin UIs into your main plugin bundle
https://github.com/romannurik/figui-loader

figma figma-plugins webpack

Last synced: about 2 months ago
JSON representation

A webpack loader for bundling Figma plugin UIs into your main plugin bundle

README

# DEPRECATED - Use [figpack](https://github.com/romannurik/figpack) instead.

---

# figui-loader

A webpack loader for bundling figma plugin UIs into your main plugin bundle.

The output of the loader is a string for a `` tag containing the UI bundle.

## Installing

Grab it from npm:

```
npm install --save-dev figui-loader
```

## Usage

Assuming your UI entrypoint is `ui.ts`, you can bundle it and use it in your plugin's main code like this:

```ts
import html from 'figui-loader!./ui';
// html is a string with <script>...
figma.showUI(html);
```

If your UI requires actual HTML (e.g. `` or a root `

`), you can either prepend it to the `html` returned by the loader, or have your UI bundle dynamically inject the required HTML into the DOM itself.

### Typings

You'll also need to add typings, so update your `tsconfig.json` with the loader's type root:

```js
{
"compilerOptions": {
...
"typeRoots": [
...
"./node_modules/figui-loader/types"
]
},
}
```