@gjzq/h5组件辅助

About this plugin

Figma 节点 @gjzq/h5 组件代码辅助插件## 插件基本信息| 项目 | 内容 ||------|------|| **插件名称** | 组件库代码生成器 (Component Code Generator) || **版本** | 1.0.0 || **适用平台** | Figma Desktop / Web || **运行模式** | Dev Mode (开发者模式) |---## 插件简介**一句话描述**：在 Figma 开发者模式下，一键将设计组件转换为前端代码。**详细描述**：组件库代码生成器是一款专为设计和开发协作打造的 Figma 插件。当设计师在 Figma 中完成界面设计后，开发人员可以在开发者模式下直接选中组件，插件会自动识别组件类型并生成对应的前端代码，包括组件导入语句、属性配置和完整 JSX 代码，大幅提升从设计到开发的转化效率。---## 核心功能### 1. 智能组件识别- 自动识别 Figma 中的组件实例 (Component Instance)- 支持组件变体 (Component Variants) 识别- 智能匹配设计组件与代码组件库### 2. 一键代码生成- 自动生成组件导入语句- 根据 Figma 变体属性生成对应代码属性- 提取组件文本内容并填充到代码中- 支持自定义代码模板### 3. 代码语法高亮- 生成的代码支持语法高亮显示- 关键字、字符串、标签、属性分类着色- 代码结构清晰易读### 4. 属性映射展示- 展示组件所有变体属性- 显示属性类型和值- 方便开发者了解组件配置### 5. 文档链接跳转- 点击组件库标签可跳转到对应组件文档- 支持自定义文档链接配置- 方便查阅组件详细使用说明---## 使用场景### 场景一：设计交付开发设计师完成设计稿后，开发人员进入 Dev Mode，选中组件即可看到对应代码，无需手动编写组件引入代码。### 场景二：组件库维护组件库更新时，设计师在 Figma 中修改组件，开发人员可以直接获取最新组件代码，保持设计与代码同步。### 场景三：新成员上手新加入的开发人员可以通过插件快速了解项目使用的组件库和组件用法，降低学习成本。---## 技术特点- **纯前端实现**：无需后端服务，所有处理在本地完成- **ES5 兼容**：兼容 Figma 插件 JavaScript 运行环境- **异步 API 支持**：使用 Figma 推荐的异步 API 获取组件信息- **防抖优化**：选中变化时防抖处理，避免频繁计算- **错误处理**：完善的错误捕获和提示机制---## 使用方法1. 在 Figma 中进入 **开发者模式 (Dev Mode)**2. 选中设计稿中的组件实例3. 在右侧 **Inspect** 面板中找到本插件4. 查看自动生成的代码5. 点击复制按钮复制代码到剪贴板---## 支持组件类型- Button 按钮- Input 输入框- Card 卡片- 以及更多可配置组件...---## 隐私与安全- 插件不收集任何用户数据- 不访问外部网络（networkAccess: none）- 仅读取当前用户信息和选中节点信息- 代码完全开源，可审计---## 更新计划- [ ] 支持更多组件类型- [ ] 支持 Vue、Angular 代码生成- [ ] 支持自定义组件映射配置- [ ] 支持批量组件代码生成- [ ] 支持代码片段收藏---## 联系方式- 功能建议：欢迎提出宝贵意见---**插件标签**：#开发者工具 #代码生成 #组件库 #设计系统 #DevMode**适用人群**：前端开发工程师、全栈开发工程师、技术设计师