Penpot 导出器 Figma 插件安装与使用手册

本手册将引导您了解并使用 Penpot 导出器 Figma 插件，该插件旨在帮助用户轻松地将Figma设计文件转换成可被Penpot导入的ZIP文件，以应对可能的设计工具间交互限制。

1. 项目目录结构及介绍

Penpot 导出器 Figma 插件的目录结构有序而清晰，如下：

penpot-exporter-figma-plugin/
├── README.md                 # 项目说明文档
├── LICENSE                   # 许可证文件
├── package.json              # Node.js项目配置文件
├── package-lock.json         # 包版本锁定文件
├── manifest.json             # Figma插件清单文件
├── common                     # 共享代码库
├── plugin-src                # 主要的插件源码
│   ├── ...                   # 包含React组件等
├── resources                  # 静态资源文件夹
├── ui-src                    # 用户界面相关源码
├── editorconfig               # 编辑器配置文件
├── eslint*.{cjs,json}        # ESLint配置文件
├── prettier*.{config,mjs}    # Prettier代码格式化配置
├── gitignore                 # Git忽略文件列表
├── nvmrc                     # Node Version Manager配置
├── vite.config.ts            # Vite构建配置
├── ...

• README.md: 提供了详细的项目概述、安装指南和使用步骤。
• common: 存放项目中可以跨模块复用的通用代码。
• plugin-src: 插件的核心逻辑所在，包括处理Figma文件导出的业务代码。
• ui-src: 管理插件用户界面的代码。
• manifest.json: 描述插件信息，如名称、作者、权限等，是Figma识别插件的关键文件。

2. 项目的启动文件介绍

本项目的核心运行依赖于Node.js环境下的脚本执行。虽然没有一个单独的“启动文件”直接用于Figma插件的运行（因为插件在Figma内运行），但开发过程中有关键命令用于构建插件：

• 在项目根目录下运行 npm install 安装所有必要的依赖。
• 使用 npm run build 命令来编译TypeScript代码和其他资源到最终的插件形式，准备导入Figma。

3. 项目的配置文件介绍

package.json

• 核心配置: 此文件定义了项目的元数据，如名称、版本、入口点、脚本命令、依赖关系等。开发者通过此文件指定构建流程命令，如上述的构建命令。

manifest.json

• 插件配置: 特别重要，包含了插件的显示名称、描述、图标、版本、许可以及它需要访问的Figma API权限。这是Figma理解并展示你的插件所需的信息。

.editorconfig / .eslint{cjs,json} / .prettier{config,mjs}

• 编码规范: 这些配置确保团队之间的一致性，.editorconfig 控制编辑器设置，而ESLint和Prettier的配置则负责代码质量和格式化规则。

通过遵循以上指南，您不仅可以理解项目的基本架构，还能顺利地进行本地开发或对插件进行定制修改。记住，在将插件导入Figma之前，确保已经正确构建了项目，并遵循Figma提供的插件开发指导进行操作。