插件开发入门
使用 Web 技术（HTML/CSS/JavaScript）开发希爱设计插件：了解插件结构、API 调用方式、本地调试与发布流程。
用熟悉的 Web 技术开发
插件本质上是运行在受限沙箱中的小型 Web 应用，使用 HTML、CSS 和 JavaScript/TypeScript 编写，通过官方插件 API 与设计文件通信。前端工程师不需要学习新语言即可上手。
一个插件的组成
- 清单文件（manifest）：声明插件名称、图标、权限与入口
- 界面代码：插件面板的 HTML/CSS/JS
- 插件 API 调用：读取当前文件、操作图层与组件
- 图标与预览图：用于插件市场展示
- 权限声明：只申请功能所需的最小权限
开发与调试流程
- 查阅 Penpot 插件 API 文档，了解可用对象与方法
- 基于官方示例模板创建插件工程
- 在清单中填好本地开发入口
- 在工作区以开发模式加载插件，边改边调试
- 使用 console 输出与浏览器开发者工具排查问题
- 打包后在测试团队内部试用
- 发布到插件市场，或作为企业私有插件分发
适合第一个插件练手的题目
- 把选中图层的名称批量改为规范格式
- 一键统计当前页面的图层、画板与组件数量
- 为所有文本图层套用指定的字体样式
- 把选中元素导出为特定命名规则的资源
- 把数据表格填充为列表组件的多个实例
与 Figma 插件的差异
与 Figma 插件的差异
两者 API 设计思路相似但并不兼容，Figma 插件不能直接运行。迁移插件时主要工作是重写 API 调用层与清单文件，界面与业务逻辑通常可以大量复用。
实用提示
- 先从只读类插件（统计、检查）做起，熟悉 API 后再做会修改文件的插件。
- 所有批量操作都建议提供「预览」与「撤销友好」的执行方式，用户会更安心。