从Figma到Qt：手动与辅助工作流的对比
内容提要
UXDivers通过真实嵌入式项目对比Figma to Qt插件与纯手工QML开发。标准界面和组件实现从118小时降至36小时，节省约70%；因项目自定义组件占比高，整体仅省20%。插件要求统一命名、对齐、边框和阴影，改变Figma文件构建方式。生成代码确定性高、结构统一，在目标硬件上运行流畅。适合常规界面和分布式团队，但需保持生成代码与自定义代码的清晰边界。
延伸解读
70%与20%的差异从何而来
文章指出，标准界面和组件实现从118小时降至36小时，节省约70%，但整体项目仅省20%。原因在于该项目自定义组件占比高，地图、图表和仪表盘等占48%工作量，插件无法生成。因此，插件节省效果集中在标准界面和组件上，而这类工作在本项目中仅占28%。对于常规界面为主的项目，整体节省比例会更高。
使用插件前需调整Figma文件构建方式
插件要求统一命名（如snake_case）、显式设置文本垂直对齐、统一边框粗细和颜色、移除容器阴影。这些调整不影响设计外观，但改变了Figma文件的底层结构。若设计文件未按插件要求构建，转换前需进行实际修改。提前了解这些要求可避免后期返工。
生成代码的确定性与统一性优势
文章强调，生成代码具有确定性，不依赖开发者的视觉细节把握，能避免手动实现中常见的对齐、间距和字重偏差。同时，生成QML结构统一，而手写QML会因开发者和时间不同产生风格差异。在长期项目中，这种统一性有助于保持界面质量一致。
适用场景与维护边界
插件适合常规界面（如设置、表单、卡片、导航、列表）和分布式团队，能减少因间距、尺寸和颜色保真度产生的来回沟通。但设计演进后重新生成时，需保持生成代码与自定义代码的清晰边界，以便自由重新运行插件。文章建议将插件用于初始UI生成，并明确其加速实现而非替代设计决策的定位。
Q&A
Figma to Qt 插件在真实嵌入式项目中能节省多少时间？
在 UXDivers 的对比研究中，标准界面和组件实现从手工的 118 小时降至 36 小时，节省约 70%；但由于项目自定义组件占比高，整体项目仅节省约 20%。
为什么整体节省比例只有 20%，而前端界面节省高达 70%？
因为该项目自定义组件（如地图、图表、仪表盘）占比很高，这些组件必须手工构建，插件无法生成。标准界面和组件只占项目总工作量的 28%，所以整体节省比例被拉低。
使用 Figma to Qt 插件时，需要如何调整 Figma 文件的设计方式？
需要做四项调整：1) 图层命名从 kebab-case 改为 snake_case，因为 QML 标识符不支持连字符；2) 为每个文本图层设置明确的垂直对齐，避免 Auto Layout 中文本漂移；3) 统一边框粗细和颜色，因为 QML 边框属性要求均匀；4) 移除容器的投影，因为插件会将带阴影的图层栅格化，影响分辨率和可编辑性。
Figma to Qt 插件生成的代码在目标硬件上运行效果如何？
在 Toradex Verdin iMX8M Plus 模块上，生成的 QML 代码运行流畅，导航、动画和图表渲染均无卡顿，与桌面端无感知差异。部署时仅遇到 Qt 版本差异（6.8.2 vs 6.10.2），但调整仅涉及手写组件，生成的代码不受影响。
Figma to Qt 插件最适合哪些类型的项目或团队？
最适合常规 UI 占比较高的应用（如设置页、表单、卡片、导航、列表），以及设计开发分离的分布式团队。对于自定义组件多的项目，插件仍能节省标准部分的时间，但整体收益会降低。
使用 Figma to Qt 插件时，如何处理自定义组件和生成代码的边界？
对于复杂视觉组件（地图、图表、仪表盘），可让插件导出为静态占位符，再替换为手工编码的组件。关键是要保持生成代码与自定义代码的清晰分离，这样在设计迭代时可以自由重新运行插件，而不必担心破坏自定义部分。
