在现代设计工作中，Figma 已经成为了设计师们的首选工具之一。它不仅提供了强大的协作功能，还能帮助我们高效地管理设计稿。本文将介绍一些实用的技巧，让你在 Figma 中管理设计稿更加轻松。

要在 Figma 上发布个人插件，可以按照以下步骤进行操作：

一、发布前期准备

1. 环境设置：

   • 确保安装了 Visual Studio Code、Node.js 和 npm。

   • 推荐使用 TypeScript 开发插件，若未安装，可以通过以下命令全局安装：

     npm install -g typescript
     

2. Figma 设置：

   • 下载并登录 Figma 客户端。如果没有账号，需要先注册。

二、创建插件

1. 新建插件：

   • 在 Figma 客户端中，打开一个已存在的文件或新建文件。
   • 依次点击菜单路径：Menu > Plugins > Development > New Plugin...，填写插件名称后选择新建插件或打开现有插件。

2. 选择模板：

   • 推荐选择“With UI & browser APIs”模板。创建后，将插件代码文件夹保存在本地。

3. 目录结构：

   • 插件代码文件夹的基本结构如下： code.js // 编译后的主代码文件 code.ts // 主代码文件（TypeScript） manifest.json // 插件清单，包含基础信息与文件引用 package.json README.md tsconfig.json // TypeScript 配置文件 ui.html // UI 界面

4. 安装依赖：

   • 在项目目录中运行以下命令安装 Figma 插件类型支持：

     npm install --save-dev @figma/plugin-typings
     

5. 编译 TypeScript：

   • 在 VSCode 中使用快捷键 Ctrl + Shift + B (Mac 为 ⌘ + ⇧ + B)，选择 tsc: watch - tsconfig.json 进行实时编译。

三、预览和测试插件

1. 预览插件：
   • 在 Figma 客户端中，通过路径 Menu > Plugins > Development > “你的插件代码名称” 预览插件功能。

发布插件

1. 进入管理页面：

   • 点击菜单路径 Menu > Plugins > Manage Plugins... 进入插件管理页面。

2. 发布新版本：

   • 点击“Publish New Release”，填写相关信息后发布到社区。需要提供的信息包括：
     • 插件图标（建议尺寸 128x128）
     • 插件描述（支持富文本编辑）
     • 插件封面图（建议尺寸 1920x960，安全区尺寸为 1600x960）
     • 发布对象（整个 Figma 社区或个人组织）

3. 审核过程：

   • 发布到社区的插件需要经过 Figma 官方审核，而发布到组织则不需要审核，但仅限该组织内部使用。

通过以上步骤，你可以成功创建并发布自己的 Figma 插件。

四、使用 CoDesign 上传设计稿

在 Figma 中管理设计稿虽然有很多方法，但有时候我们还需要一个更强大的工具来帮助我们实现更高效的设计协作和管理。这时候，CoDesign (opens new window) 就能派上用场了。

CoDesign 是一个在线设计协作平台，它可以让你轻松地将 Figma 设计稿上传到云端，并提供在线预览、版本管理、团队协作等功能。通过 CoDesign，你可以随时随地访问你的设计稿，与团队成员实时协作，大大提高工作效率。

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