Figma 插件示例项目教程

Figma 插件示例项目教程

plugin-samples🔌 Sample Figma plugins.项目地址:https://gitcode.com/gh_mirrors/pl/plugin-samples

1. 项目的目录结构及介绍

plugin-samples/
├── README.md
├── package.json
├── tsconfig.json
├── src/
│   ├── code.ts
│   ├── manifest.json
│   └── ui.html
└── node_modules/

• README.md: 项目说明文件，包含项目的基本信息和使用指南。
• package.json: 项目的依赖管理文件，定义了项目所需的依赖包和脚本命令。
• tsconfig.json: TypeScript 配置文件，用于编译 TypeScript 代码。
• src/: 源代码目录，包含插件的主要代码。
  • code.ts: 插件的主逻辑代码文件。
  • manifest.json: 插件的配置文件，定义了插件的基本信息和入口点。
  • ui.html: 插件的用户界面文件。
• node_modules/: 依赖包目录，包含项目所需的所有依赖包。

2. 项目的启动文件介绍

项目的启动文件是 src/code.ts。这个文件包含了插件的主要逻辑代码，负责处理插件的核心功能。在 manifest.json 中定义了插件的入口点，Figma 会从这个入口点开始执行插件代码。

3. 项目的配置文件介绍

项目的配置文件是 src/manifest.json。这个文件定义了插件的基本信息和入口点，包括：

• name: 插件的名称。
• id: 插件的唯一标识符。
• api: 插件使用的 Figma API 版本。
• main: 插件的主逻辑代码文件路径。
• ui: 插件的用户界面文件路径。

示例 manifest.json 内容如下：

{
  "name": "Sample Plugin",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "src/code.ts",
  "ui": "src/ui.html"
}

通过这个配置文件，Figma 可以正确加载和运行插件。

plugin-samples🔌 Sample Figma plugins.项目地址:https://gitcode.com/gh_mirrors/pl/plugin-samples