手把手教你做 Figma 插件开发入门

学习 Figma 插件开发，提升设计效率

腾讯自研设计协作平台：产品经理·设计师·研发·项目管理人群必备神器

Figma 插件开发入门指南

什么是 Figma 插件？

Figma 是一款流行的在线设计工具，它允许设计师在线协作创建和编辑 UI 设计。Figma 插件则是可以扩展 Figma 功能的工具，它们可以帮助设计师提高工作效率，实现自动化设计流程。

为什么需要开发 Figma 插件？

在日常的设计工作中，我们经常会遇到一些重复性的任务，比如批量导出图片、自动生成标注等。开发 Figma 插件可以帮助我们自动化这些任务，从而节省时间，提高工作效率。

开发 Figma 插件的准备

在开始开发 Figma 插件之前，你需要确保已经安装了以下工具：

Node.js: 用于运行 JavaScript 代码。
npm: Node.js 的包管理器，用于安装和管理插件开发所需的依赖。
Figma Desktop: Figma 的桌面应用程序，用于本地开发和测试插件。

开发 Figma 插件的基本步骤

1. 创建插件项目

首先，你需要创建一个新的插件项目。打开终端，运行以下命令：

npx create-figma-plugin <项目名称>

这将创建一个新的插件项目，并安装所需的依赖。

2. 编写插件代码

进入项目目录，你会看到一个 src 文件夹，里面包含了插件的主要代码文件。主要的代码文件包括：

code.ts: 插件的主要逻辑代码。
ui.html: 插件的用户界面。
ui.css: 插件的样式文件。

打开 code.ts 文件，你可以开始编写插件的逻辑代码。例如，下面是一个简单的插件代码示例，它会在 Figma 中创建一个新的矩形：

figma.showUI(__html__, { width: 320, height: 240 });

figma.ui.onmessage = (msg) => {
  if (msg.type === 'create-rectangle') {
    const rect = figma.createRectangle();
    rect.resize(100, 100);
    rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }];
    figma.currentPage.appendChild(rect);
    figma.closePlugin();
  }
};

接下来，打开 ui.html 文件，编写插件的用户界面。例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建矩形</title>
    <link rel="stylesheet" href="ui.css" />
  </head>
  <body>
    <button id="create-rectangle">创建矩形</button>
    <script>
      document.getElementById('create-rectangle').addEventListener('click', () => {
        parent.postMessage({ pluginMessage: { type: 'create-rectangle' } }, '*');
      });
    </script>
  </body>
</html>

最后，打开 ui.css 文件，添加一些基本的样式：

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

3. 运行和测试插件

在终端中运行以下命令，启动 Figma 插件的开发服务器：

npm run serve

接下来，在 Figma Desktop 中打开一个新的设计文件，然后在菜单栏中选择 Plugins > Development > Run Plugin。这将启动插件的开发模式，并在 Figma 中加载你的插件。

你可以在 Figma 中测试你的插件，并根据需要进行调试和修改。

4. 打包和发布插件

当你完成插件的开发和测试后，你可以将其打包并发布到 Figma 社区。首先，在终端中运行以下命令，打包插件：

npm run build

这将生成一个 plugin.zip 文件，包含了你的插件代码和资源。

接下来，打开 Figma Desktop，在菜单栏中选择 Plugins > Development > Publish Plugin。在弹出的窗口中，选择你刚刚生成的 plugin.zip 文件，并填写插件的相关信息。然后，点击 Publish 按钮，将插件发布到 Figma 社区。

使用 CoDesign 上传设计稿

在开发 Figma 插件的过程中，你可能需要与团队成员共享设计稿，并收集他们的反馈。这时，你可以使用 CoDesign (opens new window) 来上传设计稿，并与团队成员协作。

CoDesign 提供了一个便捷的设计资产管理平台，你可以将设计稿上传到 CoDesign，并与团队成员共享。团队成员可以在 CoDesign 中查看设计稿，并提供反馈和建议。这可以帮助你更快地迭代设计稿，提高设计效率。

总结

通过本文的学习，你应该已经了解了 Figma 插件开发的基本步骤和流程。开发 Figma 插件可以帮助你自动化设计任务，提高工作效率。同时，使用 CoDesign 可以帮助你更好地管理设计稿，并与团队成员协作。

如果你还有其他问题或建议，欢迎使用腾讯 CoDesign (opens new window) 与我们交流！

扫码加入设计交流群