![4cadf82a1e70a74446be1e98072e796a.png](https://i-blog.csdnimg.cn/blog_migrate/2dd4a7f3bc57f04957f82558bda6bc3c.jpeg)
预备知识
Figma 插件开发本质上是 web 开发,你需要了解基础的 web 开发知识,比如 HTML、CSS、JavaScript。当然,如果要开发一些功能复杂的插件,也许你需要用到一些更高级的工具,比如 TypeScript、Webpack、React 等,但这些对于入门来说不是必要的。
不过,要完成本教程,你需要掌握 TypeScript……的安装。
如果还没有对最基本的 HCJ(HTML,CSS,JavaScript)很熟悉,建议先去学习这些知识,然后再尝试 Figma 插件的开发。
开发环境搭建
编辑器
首先你需要一个编辑器,最常用的是 VSCode。如果你还没有一个趁手的编辑器,那说明你还没有上手 web 开发,大侠请先修炼……
关于 TypeScript:在 Figma 官方的入门教程中已经开始默认使用 TypeScript,它能够在开放过程中帮你做到类型控制,这对复杂的插件开发环境来说是很有帮助的。但是,这也会提高初学者的入门门槛。本质上 TypeScript 也是会被编译成 JavaScript 运行的,所以在你自己的各种插件 demo 里,只用 JavaScript 也是可以的。
下载 Figma 桌面端应用
要调试你的插件,必须先装一个 Figma 的桌面端应用。因为开发过程中你的代码是在你的本地跑的,只有本地的桌面端 app 才能读取和让你调试。Figma desktop app 下载地址。
如果你已经安装了 Figma 的桌面端应用,确认一下升级到了最新版本。
新建插件
进入 Figma 桌面端以后,登录自己的账号,然后新建一个文档。
顶部菜单栏 > 插件 > 开发 > 新建插件
也就是: Menu > Plugins > Development > New Plugin
然后 Figma 有一个向导,会快速帮你搭建一个新插件。
我们选“从模板生成”(Generate from template),随便设置一个名字,比如 My First Plugin
,然后继续。选择“有界面和浏览器接口”(With UI & browser APIs)的模板。这个模板会生成一个 webview 界面,这种所见即所得的形式更能帮助我们上手和理解。
![c42d1b4366b0004a0ba6c30e3dba6e79.png](https://i-blog.csdnimg.cn/blog_migrate/a01e5c9392b2794563ddfb12c2103442.png)
将项目保存到本地后,Figma desktop 会提示你需要安装 node.js,还建议你安装 TypeScript 和 查阅开发文档。这里要保证你安装过 node.js 。
至于 TypeScript……好吧,既然这个模板预置了,那我们就装一下。
用 VSCode 打开你本地保存的插件项目文件夹。打开命令行 control + ~
输入:
npm install -g typescript // 不想给你的所有项目都安装,则不要加 -g
在 VSCode 中使用快捷键 ⌘⇧B (Windows 系统 Ctrl-Shift-B) 来唤起 build 任务。选择
tsc: watch - tsconfig.json
![b99bdc31d59c3855c81d320f680be1a2.png](https://i-blog.csdnimg.cn/blog_migrate/750624537a2c289ccca5b46b364a645b.jpeg)
这让 VSCode 将 ts 文件编译成 js 文件,并且时刻监视 ts 文件保存了的变化,保持同步编译。
现在项目编译好了,我们可以来试一下运行这个插件。
运行插件
选中 Figma desktop。
顶部菜单栏 > 插件 > 开发 > My First Plugin
运行完以后,你会看到弹出一个 webview 窗口,这是一个方块生成器,它让你选择生成方块的数量。
然后,点击 Create 按钮,方块就生成到画布上了。(同时窗口会消失)
![f834a60f278211bb79474192317e6453.png](https://i-blog.csdnimg.cn/blog_migrate/5d39521ae6a6dee1475ffe526b332db9.jpeg)
很有意思,我们的插件这就跑通了。那么我们来尝试着改点什么东西。
文件结构
首先我们要看一下这个插件的组成成分:
My First Plugin
+-- manifest.json // 插件配置文件
+-- ui.html // webview UI 界面
+-- code.ts // 插件逻辑脚本
+-- code.js // 编译后的 js 脚本
+-- figma.d.ts // Figma 的类型定义文件
+-- tsconfig.json // TypeScript 配置文件
+-- README.md // 项目的说明书
我们只需要关心前三个就行了。其他的都是和编译或项目配置相关的文件。
manifest.json
货物清单,也就是插件的配置文件。
{
"name": "My First Plugin",
"id": "82867295060577xxxx",
"api": "1.0.0",
"main": "code.js",
"ui": "ui.html"
}
描述了插件的名字、唯一编号、版本。最主要的,约定了主入口 main
是 code.js
这个由 code.ts
编译出的脚本文件。还约定了交互界面 ui
是 ui.html
这个文件。
那么逻辑脚本文件里是什么呢?
code.ts
我们看一下这个 ts 文件。
figma.showUI(__html__);
figma.ui.onmessage = msg => {
if (msg.type === 'create-rectangles') {
const nodes: SceneNode[] = [];
for (let i = 0; i < msg.count; i++) {
const rect = figma.createRectangle();
rect.x = i * 150;
rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
figma.currentPage.appendChild(rect);
nodes.push(rect);
}
figma.currentPage.selection = nodes;
figma.viewport.scrollAndZoomIntoView(nodes);
}
figma.closePlugin();
};
一上来,先 figma.showUI(__html__);
显示 UI 界面。Figma 怎么知道显示哪个界面?就是 manifest
文件的 ui
入口指定的那个文件。
然后,Figma 在等待和监听从界面传来的 postMessage。一旦监听到,则调用这个回调函数。
figma.ui.onmessage = msg => {...}
通过传入的参数 msg
的 type
属性,判断界面传来的请求类型。如果是 create-rectangles
那么就执行生成方块的脚本。
过程是:
- 调用 Figma API,生成指定数量的 rect 形状,使用规定的间隔、填充色。
- 在 Figma 的当前 Page 内,添加这些方块。
- 选中所有这些方块,并确保他们在当前视图中显示。
- 最后关闭 UI 界面。
ui.html
来看一眼 web 界面,比较简单的 html 定义了这个 webview。
<h2>Rectangle Creator</h2>
<p>Count: <input id="count" value="5"></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button>
<script>
document.getElementById('create').onclick = () => {
const textbox = document.getElementById('count');
const count = parseInt(textbox.value, 10);
parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*') // here
}
document.getElementById('cancel').onclick = () => {
parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
}
</script>
可以看到,当按钮 Create
被点击时,界面会发送一个 postMessage,它的 type 是 create-rectangles
,从而触发了我们 code
脚本中的操作。
改点什么
要真的理解这里是怎么玩转的,我们总要试着改点什么东西然后让它跑通。研究一下逻辑脚本 code.ts
,然后试着改点啥。
比如说,这些方块颜色都是一样的,太单调了。我们让他们随机生成颜色吧。
随机颜色
先看看目前的颜色是怎么确定的。
rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
显然,这一行设定了 rect 这个对象的 fill
属性为一个确定的 rgb 组合颜色。但这个格式和我们以往见到的颜色格式不太一样,我们来查看一下 Figma 的开发文档。
我们可以在 Figma 的开发者官网找到他们的 API 文档。通过搜索和查阅找到了其 RGB/RGBA 相关的接口。原来,在 Figma 中对 rgb 颜色的定义不是我们通常看到的 0~255 的值域,而是映射成了 0~1 的数值。
没关系,那我们来生成 3 个 0~1 的随机数,然后安排给 r/g/b。
巧了,JavaScript 里我们用 Math.random()
来生成的随机数正好也在 [0, 1) 中,虽然有个开区间问题,但是可以忽略不计。
rect.fills = [
{
type: "SOLID",
color: { r: Math.random(), g: Math.random(), b: Math.random() },
},
];
我们保存一下代码,因为 VSCode 还在 watch 中,所以插件应该完成了实施编译。
我们重新打开 Figma desktop,运行一下我们的插件。
![93c21930dbf1868faf5eaa5353b08e89.png](https://i-blog.csdnimg.cn/blog_migrate/ef8b772eddddc7be6cacaa4122942364.jpeg)
当当当党!果然随机颜色了(虽然很难看)!
总结
好了,你已经完成了你的第一个 Figma 插件。
接下来,就可以多看看 Figma 官网的插件开发教程、API 文档,来探索一下还能创造些什么提效的玩意儿吧!
官网教程: https://www. figma.com/plugin-docs/s etup/
阅读原文