jeejeeguan/figma-vue-boilerplate

Figma plugin boilerplate with Vue, Figma UI, RPC and TypeScript

figma-vue-boilerplate

Features:

• Vue
• TypeScript
• figma-plugin-ds vue components
• RPC
• Selection change listener

Vue components implemented on figma-plugin-ds styles.

RPC

Connect to UI from Plugin side:

uiApi = await connectToUI<PluginMethods, UIMethods>(figma, {
    createRectangle(width, height) {
        const rect = figma.createRectangle();
        rect.resize(width, height);
        figma.currentPage.appendChild(rect);
        return rect.id;
    },

    // ...
});

Connect to Plugin from UI and invoke createRectangle:

api = proxyMapRemote(
    await connectToPlugin<PluginMethods, UIMethods>({})
);

createdNodeId = await api.createRectangle(100, 50);

api.listenSelectionChange((selectedIds: string[]) => {
    console.warn('selection change', selectedIds);
});

RPC is fully typed.

How to use?

1. Clone this repo
2. Save plugin's manifest to /plugin-public
3. Set plugin directory in figma to /dist
4. Run npm run build to rebuild plugin

Write UI code in /ui-src
Write Plugin code in /plugin-src

How to use RPC?

1. Specify your protocol in /plugin-src/iapi.d.ts file
2. Implement it in /plugin-src/index.ts & /ui-src/App.vue

Learn more about RPC (you can pass callbacks as args!)

Attention

Do not use libraries depends on pollyfils such as 'core-js' (pug templates too), because Figma's plugin environment doesnt support global pollyfils used in 'core-js'.