Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use Vue3 to develop Fimga plug-ins". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Developing Figma plug-ins with Vue 3

Figma is a popular design tool, and more and more design teams are moving from Sketch to Figma. The biggest feature of Figma is the use of Web technology development, to achieve a complete cross-platform. Figma plug-ins are also developed using Web technology, and you can write a Figma plug-in as long as you know html, js, and css.

Principle of Figma plug-in

Introduction to Figma Architectur

Before we introduce the Fimga plug-in, let's take a look at the technical architecture of Fimga.

Figma is developed in React as a whole, and the core canvas area is a piece of canvas, which is rendered using WebGL. And the canvas engine part uses WebAssembly, which is why Figma is so smooth. Figma App on the desktop side uses Electron--, a framework for developing desktop applications using Web technology. Electron is similar to a browser, but it is actually a Web application running internally.

Principle of Figma plug-in

Iframe is undoubtedly the most direct solution to develop a secure and reliable plug-in system on the Web side. Iframe is a standard W3C specification that has been used in browsers for many years. It is characterized by:

Safe, natural sandbox isolated environment, iframe pages can not operate the main frame

Reliable, very compatible, and has been tested by the market for many years

But it also has obvious disadvantages: the communication with the main framework can only be done through postMessage (STRING), and the communication efficiency is very low. If you want to manipulate a canvas element in the plug-in, first copy the node information of the element from the main frame to the iframe, and then update the node information to the main frame after the operation in iframe. This involves a lot of communication, and the node information for complex designs is huge and may exceed the communication limit.

In order to ensure the ability to manipulate the canvas, you must return to the main thread. The main problem with the plug-in running in the main thread is security, so the Figma developers implemented a js sandbox environment in the main thread, using Realm API. Only pure js code and API provided by Figma can be run in the sandbox, and browser API (such as network, storage, etc.) cannot be accessed, thus ensuring security.

Interested students recommend reading "How to build a plugin system on the web and also sleep well at night" written by the official team, which describes in detail the selection process of the Figma plug-in scheme.

After comprehensive consideration, Figma divides the plug-in into two parts: the plug-in UI runs in iframe, and the code that manipulates the canvas runs in the isolation sandbox of the main thread. The UI thread and the main thread communicate through postMessage.

The main field in the plug-in configuration file manifest.json points to the js file loaded into the main thread, and the ui field configures the html file loaded into iframe. When the plug-in is opened, the main thread calls the figma.showUI () method to load the iframe.

Write the simplest Figma plug-in

To understand how the plug-in works, let's write the simplest Figma plug-in. The function is simple: square color blocks can be added or subtracted.

Install the Figma desktop side

The first step is to download and install the Figma desktop.

Write the startup file manifest.json for the plug-in

Create a new code project and create a new manifest.json file in the root directory, as follows:

{"name": "simple-demo", "api": "1.0.0", "main": "main.js", "ui": "index.html", "editorType": ["figjam", "figma"]} write UI code

Create a new index.html for root directory

Demo H2 {text-align: center;} p {color: red;} .button {margin-top: 20px; text-align: center;} .button {width: 40px;} # block-num {font-size: 20px;} Figma plug-in Demo

Current number of color blocks: 0

-console.log ('ui code runners'); var blockNumEle = document.getElementById ('block-num'); function addBlock () {console.log (' add'); var num = + blockNumEle.innerText; num + = 1; blockNumEle.innerText = num;} function subBlock () {console.log ('substract'); var num = + blockNumEle.innerText; if (num = 0) return; num-= 1 BlockNumEle.innerText = num;} Edit main js code

Create a new main.js in the root directory as follows:

Console.log ('from code 2'); figma.showUI (_ _ html__, {width: 400, height: 400,}); launch the plug-in

Figma desktop APP, right-click anywhere on the canvas to open the menu, Plugins-> Development-> Import plugin from manifest... Select the path of the manifest.json file you created earlier to successfully import the plug-in Then you can open the plug-in by right-clicking, Plugins-> Development-> simple-demo (plug-in name).

Test the click of the button, the function is normal. It's just that there are no color blocks on the page (don't worry). You can open the debug console through Plugins-> Development-> Open console. You can see the log we printed.

Manipulate the canvas

As mentioned earlier, the canvas code runs on the main thread, and for the sake of execution efficiency, the plug-in can only operate on the main thread, that is, in main.js. Main.js exposes the top-level object figma, which encapsulates a series of API used to manipulate the canvas. For more information, please see the official website documentation. We use figma.createRectangle () to create a rectangle. The main thread needs to respond by listening for events from the UI thread through figma.ui.onmessage. The modified main.js code is as follows:

Console.log ('figma plugin code runners') figma.showUI (_ _ html__, {width: 400, height: 400,}); const nodes = []; figma.ui.onmessage = (msg) = > {= if (msg.type = = "add-block") {const rect = figma.createRectangle (); rect.x = nodes.length * 150; rect.fills = [{type: "SOLID", color: {r: 1, g: 0.5, b: 0}}] Figma.currentPage.appendChild (rect); nodes.push (rect);} else if (msg.type = "sub-block") {const rect = nodes.pop (); if (rect) {rect.remove ();}} figma.viewport.scrollAndZoomIntoView (nodes);}

At the same time, you need to modify some of the code in index.html to send events to the main thread through parent.postMessage:

Function addBlock () {console.log ('add'); var num = + blockNumEle.innerText; num + = 1; blockNumEle.innerText = num; parent.postMessage ({pluginMessage: {type:' add-block'}},'*')} function subBlock () {console.log ('substract'); var num = + blockNumEle.innerText; if (num = 0) return; num-= 1; blockNumEle.innerText = num Parent.postMessage ({pluginMessage: {type: 'sub-block'}},' *')}

Restart the plug-in, try it again, and find that you can successfully add or subtract the color block.

Using Vue 3 to develop Figma plug-ins

From the previous example, we already know how the Figma plug-in works. But it is very inefficient to write code with this "native" js and html. We can write code with the latest Web technology, as long as the package includes a js file that runs in the main framework and a html file that runs for iframe. I decided to try to use Vue 3 to develop plug-ins. (learn video sharing: vuejs tutorial)

There is no more introduction about Vue 3. I know everything I know. If I don't understand it, I can go and learn it first. The focus here is not on what framework to use (the same goes for vue 2 and the react process instead), but on building tools.

Vite launches a new project

Vite is a new generation of build tools developed by the authors of Vue and recommended by Vue 3. Let's first build a template project for Vue + TypeScript.

Npm init vite@latest figma-plugin-vue3-template vue-tscd figma-plugin-vue3npm installnpm run dev

Then you can see the page by opening http://localhost:3000 through a browser.

Migrate the above demo code

We migrated the previous plug-in demo to Vue 3. The src/App.vue code is modified as follows:

Import {ref} from 'vue';const num = ref (0); console.log (' ui code runners'); function addBlock () {console.log ('add'); num.value + = 1; parent.postMessage ({pluginMessage: {type:' add-block'}},'*')} function subBlock () {console.log ('substract'); if (num.value = 0) return; num.value-= 1 Parent.postMessage ({pluginMessage: {type: 'sub-block'}},' *')} Figma plug-in Demo

Current number of color blocks: {{num}}

+-H2 {text-align: center;} p {color: red;}. Buttons {margin-top: 20px; text-align: center;}. Buttons button {width: 40px;} # block-num {font-size: 20px;}

We store the js code running in the main thread sandbox in the src/worker directory. Create a new src/worker/code.ts with the following contents:

Console.log ('figma plugin code runners') figma.showUI (_ _ html__, {width: 400, height: 400,}); const nodes: RectangleNode [] = []; figma.ui.onmessage = (msg) = > {if (msg.type = = "add-block") {const rect = figma.createRectangle (); rect.x = nodes.length * 150 Rect.fills = [{type: "SOLID", color: {r: 1, g: 0.5, b: 0}}]; figma.currentPage.appendChild (rect); nodes.push (rect);} else if (msg.type = "sub-block") {const rect = nodes.pop (); if (rect) {rect.remove ();}} figma.viewport.scrollAndZoomIntoView (nodes);}

The ts type declaration for figma is missing in the above code, so we need to install it.

Npm I-D @ figma/plugin-typings

Modify the tsconfig.json and add typeRoots so that the ts code does not report an error. Also add "skipLibCheck": true to resolve type declaration conflicts.

{"compilerOptions": {/ /... "skipLibCheck": true, "typeRoots": [. / node_modules/@types ",". / node_modules/@figma "]},} modify the build configuration

The build products required for the Figma plug-in are:

Manifest.json files are configured as plug-ins

Index.html as UI code

Code.js as the main thread js code

Add a manifest.json file to the public directory

The files in the public directory will be responsible for the build artifact dist directory.

{"name": "figma-plugin-vue3", "api": "1.0.0", "main": "code.js", "ui": "index.html", "editorType": ["figjam", "figma"]} vite.config.ts add build entry

By default, vite uses index.html as the build entry, and the resources used in it are packaged and built. We also need an entry to build the main thread js code.

Execute npm I-D @ types/node to install the type declaration of Node.js so that you can use Node.js API in ts. Add input to the build.rollupOptions of vite.config.ts. By default, the output product comes with the file hash, so modify the output configuration as well:

Import {defineConfig} from 'vite'import vue from' @ vitejs/plugin-vue'import {resolve} from 'path' / / https://vitejs.dev/config/export default defineConfig ({plugins: [vue ()], build: {sourcemap: 'inline', rollupOptions: {input: {main: resolve (_ _ dirname,' index.html'), code: resolve (_ _ dirname, 'src/worker/code.ts'),}, output: {entryFileNames:' [name] .js' },}) run the build

Execute npm run build, and the dist directory will have build artifacts. Then we follow the previous steps to add the dist directory as the Figma plug-in. Plugins-> Development-> Import plugin from manifest... Select the path to the dist/manifest.json file

Start the plug-in. Why is there a blank in the plug-in? Fortunately, there is a devtools debugging tool in Figma, so let's open it and have a look.

As you can see, our index.html has been successfully loaded, but the js code has not been loaded, so the page is blank. Js, css and other resources are referenced through relative paths, while the src in our iframe is a base64 format. When looking for js resources, we cannot find them because there is no domain name.

The solution is also very simple, we add a domain name to the resource, and then set up a static resource server locally. Modify vite.config.ts and add base: 'http://127.0.0.1:3000'

Import {defineConfig} from 'vite'import vue from' @ vitejs/plugin-vue'import {resolve} from 'path' / / https://vitejs.dev/config/export default defineConfig ({plugins: [vue ()], base: 'http://127.0.0.1:3000', build: {sourcemap:' inline', rollupOptions: {input: {main: resolve (_ _ dirname, 'index.html'), code: resolve (_ _ dirname,' src/worker/code.ts'),} Output: {entryFileNames:'[name] .js',}, preview: {port: 3000,},})

Rebuild the code npm run build. Then start the static resource server npm run preview. You can see the content by accessing http://localhost:3000/ through a browser.

Then reopen the Figma plug-in. Sure enough, the plug-in is working!

The Figma loading plug-in only requires index.html and code.js, and other resources can be loaded over the network. This means that we can put js, css resources on the server side to achieve plug-in hot change? I don't know if there will be any restrictions when releasing plug-ins, which I haven't tried yet.

Development mode

We have been able to successfully build the Figma plug-in through Vue 3, but I don't want to build it every time the code is modified, we need a development pattern that can build the code automatically.

Vite's automatic dev mode starts a service without a build product (and there is no writeToDisk configuration similar to that in webpack), so it cannot be used.

Watch mode

Vite's build command has watch mode, which can listen for file changes and then automatically execute build. We just need to modify the package.json and add "watch" to scripts: "vite build-- watch".

Npm run watch# also needs to start the static file service npm run preview in another terminal

Although this method compiles automatically after modifying the code, you still have to close the plug-in and reopen it each time to see the update. Writing UI in this way is still too inefficient, can you implement HMR (module hot overload) function in the plug-in?

Dev mode

The problem with vite dev is that there is no build product. Code.js runs in the Fimga main thread sandbox, and this part cannot be hot overloaded, so it can be compiled using the vite build-watch implementation. What needs hot overloading is index.html and the corresponding js and css resources. Let's first take a look at the contents of html resources in npm run dev mode:

In theory, we just need to manually write the html to the dist directory, and the html file does not need to be modified during hot overloads. If you write directly, you will encounter the problem that the resource is a relative path, so either add the domain name (http://localhost:3000) to the resource path, or use the tag.

Generate html files manually

Comparing the html code above with the index.html file in the root directory, it is found that only one has been added. So we can parse the index.html ourselves, and then insert the corresponding tag, as well as a tag. We use jsdom to parse HTML.

Const JSDOM = require ('jsdom'); const fs = require (' fs'); / / generate html file function genIndexHtml (sourceHTMLPath, targetHTMLPath) {const htmlContent = fs.readFileSync (sourceHTMLPath, 'utf-8'); const dom = new JSDOM (htmlContent); const {document} = dom.window; const script = document.createElement (' script'); script.setAttribute ('type',' module'); script.setAttribute ('src',' / @ vite/client') Dom.window.document.head.insertBefore (script, document.head.firstChild); const base = document.createElement ('base'); base.setAttribute (' href', 'http://127.0.0.1:3000/'); dom.window.document.head.insertBefore (base, document.head.firstChild); const result = dom.serialize (); fs.writeFileSync (targetHTMLPath, result);}

At the same time, vite provides JavaScript API, so we can organize the code and write a js script to start development mode. Create a new file scripts/dev.js. The complete content is as follows:

Const {JSDOM} = require ('jsdom'); const fs = require (' fs'); const path = require ('path'); const vite = require (' vite'); const rootDir = path.resolve (_ dirname,'.. /'); function dev () {const htmlPath = path.resolve (rootDir, 'index.html'); const targetHTMLPath = path.resolve (rootDir,' dist/index.html'); genIndexHtml (htmlPath, targetHTMLPath); buildMainCode (); startDevServer () } / / generate html file function genIndexHtml (sourceHTMLPath, targetHTMLPath) {const htmlContent = fs.readFileSync (sourceHTMLPath, 'utf-8'); const dom = new JSDOM (htmlContent); const {document} = dom.window; const script = document.createElement (' script'); script.setAttribute ('type',' module'); script.setAttribute ('src',' / @ vite/client'); dom.window.document.head.insertBefore (script, document.head.firstChild) Const base = document.createElement ('base'); base.setAttribute (' href', 'http://127.0.0.1:3000/'); dom.window.document.head.insertBefore (base, document.head.firstChild); const result = dom.serialize (); fs.writeFileSync (targetHTMLPath, result) } / / build code.js entry async function buildMainCode () {const config = vite.defineConfig ({configFile: false, / / close the default configuration file build: {emptyOutDir: false, / / do not empty the dist directory lib: {/ / use library mode to build entry: path.resolve (rootDir, 'src/worker/code.ts'), name:' code' Formats: ['es'], fileName: (format) = > `code.js`,}, sourcemap:' inline', watch: {},},}) Return vite.build (config) } / / enable devServerasync function startDevServer () {const config = vite.defineConfig ({configFile: path.resolve (rootDir, 'vite.config.ts'), root: rootDir, server: {hmr: {host:' 127.0.0.1), / / this must be added Otherwise, HMR will report an error}, port: 3000,}, build: {emptyOutDir: false, / / do not empty the dist directory watch: {}, / / use watch mode}}) Const server = await vite.createServer (config); await server.listen () server.printUrls ()} dev ()

Execute node scripts/dev.js, and then restart the plug-in in Figma. Try to modify the Vue code and find that the plug-in content is automatically updated!

Finally, create a new one in package.json and change the content of dev to "dev": "node scripts/dev.js".

Get HTML by request

The previous way of producing index.html has a big drawback: if the content of the default html is changed after subsequent vite updates, then our script will also be modified. Is there a more robust way? It occurred to me that I could request devServer to get the html content and then write it locally. Needless to say, the modified code is as follows:

Const {JSDOM} = require ('jsdom'); const fs = require (' fs'); const path = require ('path'); const vite = require (' vite'); const axios = require ('axios'); const rootDir = path.resolve (_ dirname,'.. /'); async function dev () {/ / const htmlPath = path.resolve (rootDir, 'index.html'); const targetHTMLPath = path.resolve (rootDir,' dist/index.html'); await buildMainCode (); await startDevServer () / / must be placed after startDevServer to execute await genIndexHtml (targetHTMLPath);} / / generate html file async function genIndexHtml (/ * sourceHTMLPath,*/ targetHTMLPath) {const htmlContent = await getHTMLfromDevServer (); const dom = new JSDOM (htmlContent); / /. Const result = dom.serialize (); fs.writeFileSync (targetHTMLPath, result);} /. / / get HTMLasync function getHTMLfromDevServer () {const rsp = await axios.get ('http://localhost:3000/index.html'); return rsp.data;} dev ()) by requesting devServer; that's all for "how to use Vue3 to develop Fimga plug-ins". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.