Rakam proses membangunkan pemalam Fimga menggunakan Vue 3

Bagaimana untuk menggunakan Vue 3 untuk membangunkan pemalam Figma? Artikel berikut akan memperkenalkan anda kepada prinsip pemalam Figma, merekodkan proses membangunkan pemalam Fimga menggunakan Vue 3, dan melampirkan kod luar kotak saya harap ia akan membantu anda.

Membangunkan pemalam Figma dengan Vue 3

Figma ialah alat reka bentuk yang popular pada masa kini, dan semakin banyak pasukan reka bentuk Mula bertukar daripada Sketch kepada Figma. Ciri terbesar Figma ialah ia dibangunkan menggunakan teknologi Web dan sepenuhnya cross-platform. Pemalam Figma juga dibangunkan menggunakan teknologi web selagi anda tahu html, js dan css, anda boleh menulis pemalam Figma.

Prinsip pemalam Figma

Pengenalan kepada seni bina Figma

Sebelum memperkenalkan palam Fimga -dalam, mari kita Belajar tentang seni bina teknikal Fimga.

Figma dibangunkan sepenuhnya menggunakan React Kawasan kanvas teras ialah sekeping canvas, yang dipaparkan menggunakan WebGL. Dan bahagian enjin kanvas menggunakan WebAssembly, itulah sebabnya Figma boleh menjadi begitu lancar. Aplikasi Figma desktop menggunakan Elektron - rangka kerja untuk membangunkan aplikasi desktop menggunakan teknologi web. Elektron adalah serupa dengan penyemak imbas, tetapi ia sebenarnya menjalankan aplikasi web secara dalaman.

Prinsip pemalam Figma

Membangunkan sistem pemalam yang selamat dan boleh dipercayai di Web, iframe sudah pasti merupakan penyelesaian yang paling langsung. iframe ialah spesifikasi W3C standard yang telah digunakan dalam penyemak imbas selama bertahun-tahun.

• Boleh dipercayai, sangat serasi, dan telah diuji oleh pasaran selama bertahun-tahun;

• Tetapi ia juga mempunyai kelemahan yang jelas: ia tidak serasi dengan rangka kerja utama Komunikasi hanya boleh dilakukan melalui

  , dan kecekapan komunikasi adalah sangat rendah. Jika anda ingin mengendalikan elemen kanvas dalam pemalam, anda mesti menyalin maklumat nod elemen dari bingkai utama ke
dahulu, dan kemudian mengemas kini maklumat nod ke bingkai utama selepas melengkapkan operasi dalam

. Ini melibatkan banyak komunikasi, dan untuk reka bentuk kompleks maklumat nod draf adalah sangat besar, yang mungkin melebihi had komunikasi.

postMessage(STRING)Untuk memastikan keupayaan untuk mengendalikan kanvas, anda mesti kembali ke benang utama. Masalah utama dengan pemalam yang dijalankan pada utas utama ialah keselamatan, jadi pembangun Figma melaksanakan iframe persekitaran kotak pasir pada utas utama dan menggunakan iframeRealm API

. Hanya kod js tulen dan API yang disediakan oleh Figma boleh dijalankan dalam kotak pasir dan API penyemak imbas (seperti rangkaian, storan, dll.) tidak boleh diakses, sekali gus memastikan keselamatan.

js

Pelajar yang berminat disyorkan membaca

"Cara membina sistem pemalam di web dan juga tidur lena pada waktu malam" yang ditulis oleh pasukan rasmi untuk butiran Artikel ini memperkenalkan proses pemilihan penyelesaian pemalam Figma, dan saya mendapat banyak manfaat daripada membacanya.

Selepas pertimbangan menyeluruh, Figma membahagikan pemalam kepada dua bahagian: UI pemalam berjalan dalam dan kod yang mengendalikan kanvas berjalan dalam kotak pasir pengasingan benang utama. Urutan UI dan utas utama berkomunikasi melalui .

Medan iframe dikonfigurasikan dalam fail konfigurasi pemalam postMessage untuk menunjuk ke fail

yang dimuatkan ke dalam utas utama dan konfigurasi medan

dimuatkan ke dalam manifest.json failkan dalam main. Apabila membuka pemalam, utas utama memanggil kaedah js untuk memuatkan ui . iframehtmlfigma.showUI()iframeTulis pemalam Figma yang paling ringkas

Untuk memahami proses berjalan pemalam, kami mula-mula menulis Figma yang paling ringkas pemalam. Fungsinya mudah: anda boleh menambah atau menolak blok warna segi empat sama.

Pasang desktop Figma

Mula-mula anda perlu muat turun dan pasang desktop Figma.

Tulis manifes fail permulaan pemalam.json

Buat projek kod baharu dan buat fail baharu dalam direktori akar dengan kandungan berikut:

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

Tulis kod UI

Buat direktori akar baharuindex.html,

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <style>

    h1 {
      text-align: center;
    }
    p {
      color: red;
    }

    .buttons {
      margin-top: 20px;
      text-align: center;
    }

    .buttons button {
      width: 40px;
    }

    #block-num {
      font-size: 20px;
    }

  </style>
 
</head>
<body>
  <h1>Figma 插件 Demo</h1>
  <p>当前色块数量：<span id="block-num">0</span></p>
  <div>
    <button id="btn-add" onclick="addBlock()">+</button>
    <button id="btn-sub" onclick="subBlock()">-</button>
  </div>

  <script>
    console.log(&#39;ui code runs!&#39;);
    var blockNumEle = document.getElementById(&#39;block-num&#39;);
    function addBlock() {
      console.log(&#39;add&#39;);
      var num = +blockNumEle.innerText;
      num += 1;
      blockNumEle.innerText = num;
    }

    function subBlock() {
      console.log(&#39;substract&#39;);
      var num = +blockNumEle.innerText;
      if (num === 0) return;
      num -= 1;
      blockNumEle.innerText = num;
    }
  </script>
</body>
</html>

Edit kod js utama

Buat direktori akar baharumain.js dengan kandungan berikut:

console.log('from code 2');
figma.showUI(__html__, {
  width: 400,
  height: 400,
});

Mulakan pemalam

Aplikasi Desktop Figma, kanan- klik di mana-mana pada kanvas untuk membuka menu, Plugins -> Development -> Import plugin from manifest... , pilih laluan fail manifest.json dan pemalam boleh diimport dengan jayanya. Kemudian klik kanan Plugins -> Development -> simple-demo (nama pemalam) untuk membuka pemalam.

Uji butang klik dan ia berfungsi seperti biasa. Cuma blok warna belum muncul pada halaman (jangan risau). Konsol penyahpepijatan boleh dibuka melalui Plugins -> Anda boleh melihat log yang kami cetak. DevelopmentOpen console

Kanvas Operasi

Seperti yang dinyatakan sebelum ini, kod kanvas dijalankan pada utas utama Untuk kecekapan pelaksanaan, pemalam hanya boleh beroperasi pada utas utama jika ia mahu mengendalikan kandungan kanvas itu dalam

.

mendedahkan objek peringkat teratas main.js, yang merangkumi satu siri API yang digunakan untuk mengendalikan kanvas untuk mendapatkan butiran, sila lihat main.jsdokumentasi tapak web rasmifigma. Kami menggunakan untuk mencipta segi empat tepat. Urutan utama perlu mendengar acara daripada urutan UI melalui untuk membalas. Kod figma.createRectangle() yang diubah suai adalah seperti berikut: figma.ui.onmessagemain.js

Pada masa yang sama, beberapa kod dalam

console.log('figma plugin code runs!')

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);
};

perlu diubah suai dan acara dihantar ke urutan utama melalui

: index.htmlparent.postMessage

Mulakan semula pemalam, cuba lagi dan ketahui bahawa anda berjaya menambah dan menolak blok warna.

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' } }, '*')
}

Menggunakan Vue 3 untuk membangunkan pemalam Figma Melalui contoh sebelumnya, kami telah pun memahami fungsi prinsip Operasi pemalam Figma. Tetapi menggunakan "native"

dan

ini untuk menulis kod adalah sangat tidak cekap. Kami boleh menggunakan sepenuhnya teknologi web terkini untuk menulis kod, asalkan produk yang dibungkus termasuk js fail yang dijalankan dalam rangka kerja utama dan html fail yang dijalankan untuk js. Saya memutuskan untuk mencuba menggunakan iframe untuk membangunkan pemalam. (Mempelajari perkongsian video: htmltutorial vuejsVue 3) Mengenai

Vue 3

Saya tidak akan pergi ke terlalu banyak pengenalan jika anda tidak faham maklumlah boleh pergi sini dulu baru balik. Tumpuan di sini bukan pada rangka kerja yang hendak digunakan (tukar kepada vue 2, proses tindak balas adalah serupa), tetapi pada alat pembinaan.

Vite Mulakan projek baharu

Vite

ialah alat binaan generasi baharu yang dibangunkan oleh pengarang Vue dan juga alat binaan yang disyorkan untuk Vue 3. Mari buat projek templat dahulu. VueTypeScript

Kemudian buka

npm init vite@latest figma-plugin-vue3 --template vue-ts
cd figma-plugin-vue3
npm install
npm run dev

melalui penyemak imbas untuk melihat halaman.

http://localhost:3000

Pindahkan kod demo di atas

Kami mengalihkan demo pemalam sebelumnya ke Vue 3.

Kod diubah suai seperti berikut:

src/App.vue

Kami menyimpan kod js yang dijalankan dalam kotak pasir benang utama dalam direktori

<script setup>
import { ref } from &#39;vue&#39;;

const num = ref(0);

console.log(&#39;ui code runs!&#39;);

function addBlock() {
  console.log(&#39;add&#39;);
  num.value += 1;
  parent.postMessage({ pluginMessage: { type: &#39;add-block&#39; } }, &#39;*&#39;)
}

function subBlock() {
  console.log(&#39;substract&#39;);
  if (num .value=== 0) return;
  num.value -= 1;
  parent.postMessage({ pluginMessage: { type: &#39;sub-block&#39; } }, &#39;*&#39;)
}
</script>

<template>
  <h1>Figma 插件 Demo</h1>
  <p>当前色块数量：<span id="block-num">{{ num }}</span></p>
  <div>
    <button id="btn-add" @click="addBlock">+</button>
    <button id="btn-sub" @click="subBlock">-</button>
  </div>
</template>

<style scoped>
h1 {
  text-align: center;
}
p {
  color: red;
}

.buttons {
  margin-top: 20px;
  text-align: center;
}

.buttons button {
  width: 40px;
}

#block-num {
  font-size: 20px;
}
</style>

. Cipta

baharu dengan kandungan berikut: src/workersrc/worker/code.ts

Kod di atas tidak mempunyai pengisytiharan jenis ts

console.log('figma plugin code runs!')

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);

};

, jadi kami perlu memasangnya.

figma

npm i -D @figma/plugin-typingsUbah suai

dan tambah

supaya kod ts tidak akan melaporkan ralat. Tambahkan juga tsconfig.json untuk menyelesaikan konflik perisytiharan jenis. typeRoots"skipLibCheck": true

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

Ubah suai konfigurasi binaan

Produk binaan yang diperlukan oleh pemalam Figma ialah:

• fail sebagai Konfigurasi pemalam

  manifest.json

• sebagai kod UI

  index.html

• sebagai kod js utas utama

  code.js

Tambahkan fail manifest.json

dalam direktori awam Fail dalam direktori akan dipindahkan ke direktori binaan

. public

{
  "name": "figma-plugin-vue3",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "index.html",
  "editorType": [
    "figjam",
    "figma"
  ]
}

vite.config.ts  中增加构建入口

默认情况下 vite 会用 index.html 作为构建入口，里面用到的资源会被打包构建。我们还需要一个入口，用来构建主线程 js 代码。

执行  npm i -D @types/node ，安装  Node.js  的类型声明，以便在 ts 中使用  Node.js  API。 vite.config.ts  的  build.rollupOptions  中增加  input 。默认情况下输出产物会带上文件 hash ，所以也要修改 output 配置：

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',
      },
    },
  },
})

运行构建

执行 npm run build ， dist 目录会有构建产物。然后我们按照前面的步骤，将  dist  目录添加为 Figma 插件。 Plugins -> Development -> Import plugin from manifest... ，选择 dist/manifest.json 文件路径。

启动插件......怎么插件里一片空白？好在 Figma 里面有 devtools 调试工具，我们打开瞧一瞧。

可以看到，我们的 index.html 已经成功加载，但是 js 代码没加载所以页面空白。js、css 等资源是通过相对路径引用的，而我们的 iframe 中的 src 是一个 base64 格式内容，在寻找 js 资源的时候因为没有域名，所以找不到资源。

解决办法也很简单，我们给资源加上域名，然后本地起一个静态资源服务器就行了。修改  vite.config.ts ，加上 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,
  },
})

重新构建代码 npm run build 。然后启动静态资源服务器 npm run preview 。通过浏览器访问 http://localhost:3000/ 可以看到内容。

然后重新打开 Figma 插件看看。果然，插件已经正常了！

Figma 加载插件只需要  index.html  和  code.js ，其他资源都可以通过网络加载。这意味着我们可以将 js、css 资源放在服务端，实现插件的热更？不知道发布插件的时候会不会有限制，这个我还没试过。

开发模式

我们已经能成功通过 Vue 3 来构建 Figma 插件了，但是我不想每次修改代码都要构建一遍，我们需要能够自动构建代码的开发模式。

vite 自动的 dev 模式是启动了一个服务，没有构建产物（而且没有类似webpack里面的  writeToDisk 配置），所以无法使用。

watch 模式

vite 的 build 命令有watch模式，可以监听文件改动然后自动执行  build 。我们只需要修改 package.json ， scripts  里新增  "watch": "vite build --watch" 。

npm run watch

# 同时要在另一个终端里启动静态文件服务
npm run preview

这种方式虽然修改代码后会自动编译，但是每次还是要关闭插件并重新打开才能看到更新。这样写UI还是太低效了，能不能在插件里实现  HMR  （模块热重载）功能呢？

dev 模式

vite dev 的问题在于没有构建产物。 code.js  是运行在 Fimga 主线程沙箱中的，这部分是无法热重载的，所以可以利用 vite build --watch 实现来编译。需要热重载的是 index.html  以及相应的 js 、css 资源。 先来看一下 npm run dev 模式下的 html 资源有什么内容：

理论上来说，我们只需要把这个 html 手动写入到  dist  目录就行，热重载的时候 html 文件不需要修改。直接写入的话会遇到资源是相对路径的问题，所以要么把资源路径都加上域名（ http://localhost:3000 ），或者使用 <base>标签。

手动生成 html 文件

对比上面的 html 代码和根目录的 index.html  文件，发现只是增加了一个 <script type="module" src="/@vite/client"></script> 。所以我们可以自己解析  index.html ，然后插入相应这个标签，以及一个  <base> 标签。解析 HTML 我们用  jsdom  。

const JSDOM = require('jsdom');
const fs = require('fs');

// 生成 html 文件
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);
}

同时 vite 提供了 JavaScript API，所以我们可以代码组织起来，写一个 js 脚本来启动开发模式。新建文件 scripts/dev.js ，完整内容如下：

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();
}

// 生成 html 文件
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);
}

// 构建 code.js 入口
async function buildMainCode() {
  const config = vite.defineConfig({
    configFile: false, // 关闭默认使用的配置文件
    build: {
      emptyOutDir: false, // 不要清空 dist 目录
      lib: { // 使用库模式构建
        entry: path.resolve(rootDir, 'src/worker/code.ts'),
        name: 'code',
        formats: ['es'],
        fileName: (format) => `code.js`,
      },
      sourcemap: 'inline',
      watch: {},
    },
  });
  return vite.build(config);
}

// 开启 devServer
async function startDevServer() {
  const config = vite.defineConfig({
    configFile: path.resolve(rootDir, 'vite.config.ts'),
    root: rootDir,
    server: {
      hmr: {
        host: '127.0.0.1', // 必须加上这个，否则 HMR 会报错
      },
      port: 3000,
    },
    build: {
      emptyOutDir: false, // 不要清空 dist 目录
      watch: {}, // 使用 watch 模式
    }
  });
  const server = await vite.createServer(config);
  await server.listen()

  server.printUrls()
}

dev();

执行  node scripts/dev.js ，然后在 Figma 中重启插件。试试修改一下 Vue 代码，发现插件内容自动更新了！

最后在  package.json  中新建一个修改一下dev的内容为 "dev": "node scripts/dev.js" 就可以了。

通过请求来获取 HTML

前面通过自己生产  index.html  的方式有很大的弊端：万一后续 vite 更新后修改了默认 html 的内容，那我们的脚本也要跟着修改。有没有更健壮的方式呢？我想到可以通过请求 devServer 来获取 html 内容，然后写入本地。话不多说，修改后代码如下：

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();
  
  // 必须放到 startDevServer 后面执行
  await genIndexHtml(targetHTMLPath);
}

// 生成 html 文件
async function genIndexHtml(/* sourceHTMLPath,*/ targetHTMLPath) {
  const htmlContent = await getHTMLfromDevServer();
  const dom = new JSDOM(htmlContent);
  
  // ...

  const result = dom.serialize();
  fs.writeFileSync(targetHTMLPath, result);
}

// ...

// 通过请求 devServer 获取HTML
async function getHTMLfromDevServer () {
  const rsp = await axios.get('http://localhost:3000/index.html');
  return rsp.data;
}

dev();

结语

Figma 基于Web平台的特性使之能成为真正跨平台的设计工具，只要有浏览器就能使用。同时也使得开发插件变得非常简单，非专业人士经过简单的学习也可以上手开发一个插件。而Web社区有数量庞大的开发者，相信 Figma 的插件市场也会越来越繁荣。

本文通过一个例子，详细讲述了使用 Vue 3 开发 Figma 插件的过程，并且完美解决了开发模式下热重载的问题。我将模板代码提交到了 Git 仓库中，需要的同学可以直接下载使用：figma-plugin-vue3。

开发 Figma 插件还会遇到一些其他问题，例如如何进行网络请求、本地存储等，有空再继续分享我的实践心得。

本文转载自：https://juejin.cn/post/7084639146915921956

作者：大料园

（学习视频分享：web前端开发）

Atas ialah kandungan terperinci Rakam proses membangunkan pemalam Fimga menggunakan Vue 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!