9 | Plugin Preview 10 |

11 | 12 |

13 | Set the size for your plugin live preview 14 |

15 | 16 |

17 |

18 | Width 19 |

20 |

21 | 22 |

23 |

24 |

25 | Height 26 |

27 |

28 | 29 |

30 |

31 | 32 |

33 | 34 | 35 | 36 | 37 |

38 | 39 | 40 |

41 | 48 | 49 | 54 | 55 | 116 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Vue3 Plugin Template", 3 | "api": "1.0.0", 4 | "main": "dist/code.js", 5 | "ui": "dist/ui.html", 6 | "id": "my-plugin-id", 7 | "editorType": ["figma"] 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-plugin-template", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "webpack --mode=development --watch", 8 | "build": "webpack --mode=production", 9 | "preview": "live-server --entry-file='livepreview.html'" 10 | }, 11 | "dependencies": { 12 | "@vue/compiler-sfc": "^3.0.2", 13 | "figma-plugin-ds": "^0.1.8" 14 | }, 15 | "devDependencies": { 16 | "@figma/plugin-typings": "^1.18.2", 17 | "@types/node": "^12.0.5", 18 | "css-loader": "^2.1.1", 19 | "html-webpack-inline-source-plugin": "0.0.10", 20 | "html-webpack-plugin": "^3.2.0", 21 | "live-server": "^1.2.1", 22 | "remove-files-webpack-plugin": "^1.1.3", 23 | "sass": "^1.20.3", 24 | "sass-loader": "^7.1.0", 25 | "style-loader": "^0.23.1", 26 | "ts-loader": "^6.0.2", 27 | "typescript": "^4.6.4", 28 | "url-loader": "^1.1.2", 29 | "vue": "^3.0.2", 30 | "vue-loader": "^16.0.0-beta.8", 31 | "vue-template-compiler": "^2.6.10", 32 | "webpack": "^4.32.2", 33 | "webpack-bundle-analyzer": "^4.3.0", 34 | "webpack-cli": "^3.3.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/code.ts: -------------------------------------------------------------------------------- 1 | import { dispatch, handleEvent } from './codeMessageHandler'; 2 | figma.showUI(__html__); 3 | 4 | // The following shows how messages from the UI code can be handled in the main code. 5 | handleEvent('createNode', () => { 6 | const node = figma.createRectangle(); 7 | node.name = node.id; 8 | 9 | // This shows how the main code can send messages to the UI code. 10 | dispatch('nodeCreated', node.id); 11 | }); 12 | -------------------------------------------------------------------------------- /src/codeMessageHandler.ts: -------------------------------------------------------------------------------- 1 | const eventListeners: { type: String; callback: Function }[] = []; 2 | export const dispatch = (action: String, data?: any) => { 3 | figma.ui.postMessage({ action, data }); 4 | }; 5 | export const handleEvent = (type: String, callback: Function) => { 6 | eventListeners.push({ type, callback }); 7 | }; 8 | figma.ui.onmessage = message => { 9 | for (let eventListener of eventListeners) { 10 | if (message.action === eventListener.type) eventListener.callback(message.data); 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /src/ui/ui.html: -------------------------------------------------------------------------------- 1 |

2 | -------------------------------------------------------------------------------- /src/ui/ui.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './ui.vue' 3 | 4 | createApp(App).mount('#app') -------------------------------------------------------------------------------- /src/ui/ui.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 44 | 45 | -------------------------------------------------------------------------------- /src/ui/uiMessageHandler.ts: -------------------------------------------------------------------------------- 1 | const eventListeners: { type: String; callback: Function }[] = []; 2 | export const dispatch = (action: String, data?: any) => { 3 | parent.postMessage({ pluginMessage: { action, data } }, '*'); 4 | }; 5 | export const handleEvent = (type: String, callback: Function) => { 6 | eventListeners.push({ type, callback }); 7 | }; 8 | window.onmessage = event => { 9 | const message = event.data.pluginMessage; 10 | if (message) { 11 | for (let eventListener of eventListeners) { 12 | if (message.action === eventListener.type) eventListener.callback(message.data); 13 | } 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /src/vue-shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | const component: DefineComponent 4 | export default component 5 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "typeRoots": [ 7 | "./node_modules/@types", 8 | "./node_modules/@figma" 9 | ] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); 2 | const RemovePlugin = require('remove-files-webpack-plugin'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const { VueLoaderPlugin } = require('vue-loader'); 5 | const path = require('path'); 6 | 7 | module.exports = (env, argv) => ({ 8 | // This is necessary because Figma's 'eval' works differently than normal eval 9 | devtool: argv.mode === 'production' ? false : 'inline-source-map', 10 | 11 | entry: { 12 | ui: './src/ui/ui.ts', // The entry point for your UI code 13 | code: './src/code.ts' // The entry point for your plugin code 14 | }, 15 | 16 | module: { 17 | rules: [ 18 | // Converts TypeScript code to JavaScript 19 | { 20 | test: /\.tsx?$/, 21 | loader: 'ts-loader', 22 | exclude: /node_modules/, 23 | options: { 24 | appendTsSuffixTo: [/\.vue$/] 25 | } 26 | }, 27 | 28 | // Enables including CSS by doing "import './file.css'" in your TypeScript code 29 | { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] }, 30 | { 31 | test: /\.scss$/, 32 | use: [ 33 | { 34 | loader: 'style-loader' 35 | }, 36 | { 37 | loader: 'css-loader' 38 | }, 39 | { 40 | loader: 'sass-loader', 41 | options: { 42 | implementation: require('sass') 43 | } 44 | } 45 | ] 46 | }, 47 | 48 | { 49 | test: /\.pug$/, 50 | loader: 'pug-plain-loader' 51 | }, 52 | 53 | { 54 | test: /\.vue$/, 55 | loader: 'vue-loader' 56 | }, 57 | 58 | // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI 59 | { test: /\.(png|jpg|gif|webp|svg)$/, loader: [{ loader: 'url-loader' }] } 60 | ] 61 | }, 62 | 63 | // Webpack tries these extensions for you if you omit the extension like "import './file'" 64 | resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] }, 65 | 66 | output: { 67 | filename: '[name].js', 68 | path: path.resolve(__dirname, 'dist') // Compile into a folder called "dist" 69 | }, 70 | 71 | // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it 72 | plugins: 73 | argv.mode === 'production' 74 | ? [ 75 | new VueLoaderPlugin(), 76 | new RemovePlugin({ 77 | after: { include: ['dist/ui.js'] } 78 | }), 79 | new HtmlWebpackPlugin({ 80 | template: './src/ui/ui.html', 81 | filename: 'ui.html', 82 | inlineSource: '.(js|css|scss)$', 83 | chunks: ['ui'] 84 | }), 85 | new HtmlWebpackInlineSourcePlugin() 86 | ] 87 | : [ 88 | new VueLoaderPlugin(), 89 | new HtmlWebpackPlugin({ 90 | template: './src/ui/ui.html', 91 | filename: 'ui.html', 92 | inlineSource: '.(js|css|scss)$', 93 | chunks: ['ui'] 94 | }), 95 | new HtmlWebpackInlineSourcePlugin() 96 | ] 97 | }); 98 | --------------------------------------------------------------------------------