Figma 插件构建器 Figplug 使用教程

Figma 插件构建器 Figplug 使用教程

figplugFigma plugin builder项目地址:https://gitcode.com/gh_mirrors/fi/figplug

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

figplug/
├── deps/
├── docs/
├── examples/
├── lib/
├── misc/
├── src/
├── .gitignore
├── LICENSE
├── README.md
├── build.js
├── dist.sh
├── package-lock.json
├── package.json
├── test.sh
└── tsconfig.json

目录结构介绍

• deps/: 存放项目依赖的文件。
• docs/: 存放项目的文档文件。
• examples/: 存放示例代码。
• lib/: 存放库文件。
• misc/: 存放杂项文件。
• src/: 存放源代码文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目介绍和使用说明。
• build.js: 构建脚本文件。
• dist.sh: 分发脚本文件。
• package-lock.json: 锁定依赖版本的文件。
• package.json: 项目配置文件。
• test.sh: 测试脚本文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

build.js

build.js 是 Figplug 的主要构建脚本文件。它负责编译和构建 Figma 插件。你可以通过以下命令运行该脚本：

node build.js

dist.sh

dist.sh 是一个分发脚本文件，用于将构建好的插件分发到指定目录。你可以通过以下命令运行该脚本：

sh dist.sh

3. 项目的配置文件介绍

package.json

package.json 是 Node.js 项目的配置文件，包含了项目的元数据、依赖项、脚本等信息。以下是一些关键配置项：

{
  "name": "figplug",
  "version": "1.0.0",
  "description": "Figma plugin builder",
  "main": "build.js",
  "scripts": {
    "build": "node build.js",
    "dist": "sh dist.sh"
  },
  "dependencies": {
    "typescript": "^4.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0"
  }
}

tsconfig.json

tsconfig.json 是 TypeScript 项目的配置文件，用于配置 TypeScript 编译器的行为。以下是一些关键配置项：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

通过以上配置，你可以更好地理解和使用 Figplug 项目。

figplugFigma plugin builder项目地址:https://gitcode.com/gh_mirrors/fi/figplug