[XD]插件编写浅试

0 环境

1. Window 11
2. Adobe XD 20.2.12.1

（建议：一切都建议在正版环境下进行，可以避免很多不必要的问题与麻烦！）

1 创建官网项目

首先，必须有一个 Adobe 账号。

因为需要在 Adobe 官网上创建相关的工程，最主要的目的是获取一个插件 ID，就理解为授权吧！

登录 Adobe 开发者官方控制台：Adobe Developter Console

找到主界面上的 “Create new project” 开始创建新插件项目。

Adobe 官网这个功能，创建项目之后，项目名预定为 Project? 。所以，建议先给项目改名。

选择 “Edit Project”。

填写好新项目名称，点击 “Save” 保存。

选择 “Add Plugin”，添加新插件项目。

选择 “Adobe XD Plugin”，然后点击 “Save” 保存及创建插件项目，之后可以看到已创建的插件项目。

到此，Adobe 官网插件项目就创建完成。如上图，可以看见最重要的 Plugin ID。

然后，点击 “Download” 下载插件项目开发包。

2 安装与测试

2.1 解压与安装

打开 Adobe XD，要求一定要创建工程，随意新建一个工程。

选择：菜单->Plugin->Development->Show Develop Folder，打开插件目录。

将之前下载的插件项目开发包，解压后，放在该目录下。

由于下载的插件项目开发包，一般是以 Plugin ID 命名的，建议先改一下解压后的文件夹名。如本文改为 rect。

（取名为 rect，是因为默认代码是绘制一个矩形的插件功能。）

如上图示，文件夹下最重要的是两个文件，下文继续说明。

2.2 修改配置

打开 manifest.json 文件，修改如下图示内容：

主要有三处修改：

• name：默认为空，需要添加插件名称，此名称最终会显示在 XD 的插件列表中；
• id：必须填写 Adobe 官网为插件项目分配的 Plugin ID，也就是下载的开发包默认包名；
• minVersion：允许最小软件版本，创建项目时，默认为 21.0。由于我的软件版本是 20，所以修改此处；

2.3 测试插件

保存后回到 XD，打开开发终端：菜单->Plugin->Development->Develop Console。

在调试/测试过程中，开发终端是常用的工具，调度日志就是在这里查看。

重装插件：菜单->Plugin->Development->Reload Plugins（Ctrl+Shift+R）。插件需要重装，才可能看到安装的插件开发包。

之后，在插件列表即可以找到 rect 插件。

如果一切正确，可能 XD 自动会安装成功；如果有任何问题，可能在插件列表会看不到插件，这时，建议查看开发终端，查找具体原因。

最后，测试一下默认插件代码的功能。

点击 rect 插件，即可在画板上看到，插入了一个矩形。（如果是多个画板，需要先选择画板，再点击插件）。

至此，插件开发的基本操作就已安成。

3 下一步

接下来，则是根据具体需要，开发具体的插件功能。

插件开发是基于 JavaScript，且与 Adobe 具体提供的 JavaScript 相关联，并不是所有 JS 库都能使用。

具体参考：

• Plugin Development

• API Reference

• Design - User interface

• 官方例程 - github