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