连接设计与工程，加速嵌入式 GUI 从设计稿到项目落地。
一、设计稿到嵌入式 GUI 工程，为什么需要更顺畅的连接？
嵌入式 GUI 项目里，界面设计通常已经在 Figma 中完成；但到了工程实现，还需要在 GUI Guider 中重新搭建控件层级、配置资源、验证效果。页面一多、迭代一频繁，这个过程既容易重复劳动，也容易让设计与实现之间产生偏差。
Figma to GUI Guider 插件提供了一种结构化的转换方式：将 Figma 中的图层和组件映射到 LVGL 控件，生成 GUI Guider 项目 JSON，并导出为可导入 GUI Guider 的项目包。转换结果可以作为工程开发的起点，后续仍可在 GUI Guider 中继续编辑、仿真和部署验证。
定位说明：该插件适合用于缩短“设计交付到工程实现”的初始转换路径。Figma 设计稿应被视为实现参考，而不是嵌入式运行时效果的完全保证；实际项目仍需要结合目标平台资源限制和渲染能力进行适配。
二、插件如何连接设计与工程？
| 能力 |
说明 |
| 读取 Figma 设计结构 |
在插件面板中展示 Figma Design Tree，帮助开发者查看设计节点层级。 |
| 配置 LVGL 类型映射 |
为每个设计节点设置合适的 LVGL widget 类型，并可控制节点是否参与转换。 |
| 生成 GUI Guider 项目 JSON |
执行转换后，在输出区域预览生成的 GUI Guider 项目 JSON。 |
| 导出项目包 |
通过 Download 操作导出 zip 包，包含转换后的项目文件和相关图片资源。 |
| 导入 GUI Guider |
解压导出的项目包后，可在 GUI Guider 中通过 Import Project 导入 .guiguider 文件继续开发。 |
三、快速开始：在 Figma 中运行插件
Figma to GUI Guider 插件已发布在 Figma Community，可直接在 Figma 桌面应用或浏览器版本中运行，无需手动下载插件包。当前插件支持 Windows 平台。
- 打开 Figma 桌面应用或浏览器版本，并登录 Figma 账号。
- 进入 Figma to GUI Guider 插件页面，或在 Figma Community 中搜索插件名称。
- 在插件页面点击
Open in… 直接运行，或保存到账号中以便后续使用。
- 打开目标设计文件，在
Plugins 菜单中启动插件；也可以在画布中右键，通过 Plugins 菜单运行。
四、插件界面怎么看
插件启动后会以面板形式显示在 Figma 工作区内。建议首次使用时先理解几个核心区域，再进行映射和转换。
- Figma Design Tree：展示当前设计文件中的图层和组件层级，每个节点可配置 LVGL 类型和转换状态。
- Design Node：展示节点名称与 Figma 类型，并通过
LVGL Type Selector 设置转换后的控件类型。
- Refresh / Convert：
Refresh 用于重新加载当前 Figma 文件结构；Convert 用于根据当前映射配置执行转换。
- About：查看插件信息、版本、支持联系方式和参考链接。
- GUI Guider Project JSON：转换后显示生成的项目 JSON，便于快速检查结构。
- Clear / Copy / Download：分别用于清空结果、复制 JSON、导出项目 zip 包及图片资源。
五、推荐工作流：先调整映射，再生成项目
插件首次打开时会根据 Figma 节点生成初始映射。相比直接点击转换，先检查和调整节点映射，通常能得到更接近工程预期的项目结构。
| 步骤 |
说明 |
| 1 |
检查自动映射：浏览设计树，确认文本、按钮、图片等节点是否被分配了合理的 LVGL 控件类型。 |
| 2 |
调整控件类型：如果自动映射不符合预期，可通过 Type Selector 修改节点类型；映射设置会保存在 Figma 项目中。 |
| 3 |
控制转换范围：对不需要输出的节点使用 Disable in Conversion。被禁用节点不会出现在生成 JSON 中，但其子节点仍保留层级关系。 |
| 4 |
执行 Convert：完成配置后点击 Convert，生成 GUI Guider 项目 JSON，并在输出区域检查结果。 |
六、生成项目并导入 GUI Guider
转换完成后，先在 GUI Guider Project JSON 区域快速检查结构。如果节点类型、层级关系或禁用状态不符合预期，可以返回设计树调整映射，并再次执行 Convert。
确认结果后，点击 Download 导出 zip 包。导出的内容包含转换后的项目文件及相关图片资源。随后解压 zip 文件，在 GUI Guider 首页选择 Import Project，并选择解压目录中的 .guiguider 文件完成导入。若设计使用自定义字体，需要将字体文件复制到项目目录的 resources/font 文件夹。
导入后，开发者可以继续在 GUI Guider 中编辑界面，并使用 JS simulator、C simulator 或在目标平台上进行运行验证。
七、适用场景与使用建议
该插件尤其适合已有 Figma 设计稿、希望快速生成 GUI Guider 工程起点的团队使用。对于页面结构较清晰、需要频繁迭代，或希望减少设计交付与嵌入式 GUI 开发之间重复沟通的项目，它可以作为设计到工程落地流程中的辅助工具。
- 设计结构尽量贴近控件层级：Figma 图层结构越接近 LVGL widget 的父子关系，转换结果通常越容易理解和维护。
- 将转换结果视为工程起点：插件可以减少初始搭建工作，但嵌入式平台中的资源、字体、渲染能力和运行效果仍需要工程验证。
- 导入失败时保持干净状态：如果 GUI Guider 导入不成功，可以删除之前导入的设计项目，并在干净状态下重新导入。
八、小结：让设计更快进入工程流程
Figma to GUI Guider 插件为 Figma 设计稿与 GUI Guider 工程之间提供了更直接的连接方式。通过设计树解析、LVGL 类型映射、节点转换控制、JSON 预览和项目包导出，开发者可以更快地将已有设计资产带入 GUI Guider 工作流，并在后续阶段完成工程化编辑、仿真和目标平台验证。
对于已经使用 Figma 进行界面设计的团队，这一插件可以帮助减少重复搭建界面的工作量，使设计交付与嵌入式 GUI 开发之间的协作更加顺畅。可以在 Figma Community 中搜索 Figma to GUI Guider 插件进行体验，并结合 GUI Guider 完成后续编辑、仿真与目标平台验证。 | 
发表于 3 小时前
|
查看: 6|
回复: 0
