今天，我们来介绍 Figma to Qt 插件 ——它弥合了 Figma 设计、Qt 框架与最终产品之间的鸿沟。自 9 月首次公测后，我们又推出了功能强大的新版本。以下是该插件目前的功能。
每个优秀产品都始于设计，然而许多设计从未能按构想呈现在设备上。
在 Figma 中看似完美的设计，一旦进入开发阶段呈现在真实屏幕上时，往往就会大打折扣。出现这种情况，是因为在设计和产品之间存在着多层转化：实施细节、工具和硬件设备……每个层次都说着不同的“语言”。
另一方面，开发人员通常需要在 QML 中从零开始，一点点手动实现设计，包括解释布局、根据设计意图手动构建组件以及添加交互和数据绑定。
这种脱节使设计人员十分被动，陷入等待反馈、修复问题的循环中，时间花在了原本可避免的返工上。对于团队来说，这种循环可能还会导致反复修改和审查链漫长。据业内人士估计，仅一项返工就可能耗去项目一半的时间。
Figma to Qt 的出现就是为了改变这一现状。 该插件能同时理解 Figma GUI 设计和 Qt 两种“语言”，它能让团队保持同步，加快工作进度。它使设计人员能够自信地交付产品，确保设计意图从 Figma 到 Qt 再到最终产品的全流程中得以完整保留。
这并不是我们第一次努力使 Qt 和 Figma 更加紧密，Qt Bridge for Figma 插件率先搭建起基础桥梁，实现了将设计稿转换为 QML 代码的功能。而 Figma to Qt 是这项工作的演进，不仅可以自动生成代码，还改变了整个设计工作流程。设计人员得以更早地了解他们的工作如何转化为 Qt 界面，简化了从设计到跨团队和跨工具实施的过程。Figma to Qt 最终将取代 Qt Bridge for Figma ，我们将在未来几个月内分享更多信息 。
让我们共同探索这款插件如何重塑设计师与 Qt 开发者之间的协作流程。
该插件可根据您的 Figma 设计生成简洁、开发直接可用的 QML 代码，这是插件的核心功能。它消除了猜测的环节、减少了文档负担和不必要的返工。设计师可以确信交付成果的准确性，开发者则无需再从头构建用户界面。
基本的 Figma 图层和属性（包括框架、编组、文本、填充、边框等）会转换为 QML，并保留其结构、层次和样式，确保 GUI 设计的视觉基础在代码中精确呈现。
自动布局对于在 Figma 中构建自适应、可扩展的图形用户界面至关重要。为稳定支持该功能，我们将自动布局转化为 Qt 的新布局方式 FlexboxLayout，保留了间距、对齐方式、内边距和大小调整行为。您设计的结构即是开发者获得的结构。
在此测试版中，我们推出了首个支持 Qt 最新 Flexbox Layout 的自动布局版本。可以在设置中启用并体验！您的反馈将有助于我们改进兼容性和表现。
设计按钮、滑块、开关和拨动组件不应只生成静态的装饰性素材。我们的目标是将 Figma 中的交互式图形用户界面组件转化为具备功能性的 Qt Quick控件 ， 而非简单的矩形组合。
在此测试版中，我们将引入新的 Qt Quick 控件库，这是一组预定义且可定制的本地图形用户界面控件。 初期，我们提供了三个示例控件：按钮、开关和复选框。 导出后，按钮就是一个 Button 控件。 开关就是一个 Switch 控件。这样，开发人员就可以直接使用功能性图形用户界面开发，而不需要重构界面组件 。
在本测试版中，您将看到 Qt Quick 控件的首次迭代。我们欢迎您试用并分享反馈意见！
已有做好的按钮设计稿？敬请期待——更多功能即将推出。很快，您就能将现有设计稿转换为原生控件。
对于开发复杂产品或多产品组合的团队而言，一套可拓展的设计系统至关重要。大多数企业都使用通用设计标识和可重复使用的组件。本插件可确保这些属性在设计和生成的 QML 中保持一致。
在这个测试版中，我们向完整的设计系统支持迈出关键的一步：引入本地变量支持功能。插件可读取颜色、排版和间距的本地变量，并将其转换为 QML 的设计标识。这确保了设计和开发过程中的视觉一致性。在设置中启用此功能，即可查看实际效果！
拥有共享远程组件的全局库吗？别担心，相关功能即将上线。对复杂设计系统的支持正在进行中，即将发布的版本可以解析 Figma 共享资源库。
在 Figma 中看起来完美无瑕的设计在实施过程中可能会遇到困难。插件中的 "问题"选项卡会扫描您的设计，提前识别出暂不支持的设计属性，在设计稿交付开发人员前暴露这类问题。每个识别出的问题都附有指导，说明其含义和解决方法，设计人员能据此采取积极措施，避免在后期过程中出现意外。
Figma to Qt 包含实时预览功能，可将您的设计动态还原，在浏览器中呈现为真正的 Qt 图形用户界面。所见即所得，您可以在项目实现或硬件就绪前，提前验证设计的视觉还原度与交互表现。
实时预览所选 Figma 界面在 Qt 中的即时渲染效果。如果您使用 Qt Quick 控件库进行设计，预览界面还支持交互操作。
如果您体验过早期的测试版，您会发现全新的改进。现在，您可以同时选择和预览多个界面，无需在浏览器和 Figma 之间切换即可验证多屏体验。
实时预览功能包括代码视图和检查模式，您可在预览界面选中任意元素，对应生成的 QML 代码会即时高亮显示。这一功能为设计人员和开发人员之间创建了共享“语言”，减少了歧义并加强了交流。
Live Preview 中的“文件”选项卡显示了完整的 QML 项目结构，准确反映开发人员将收到的内容，包括文件、文件夹和资源。 设计师可清晰掌握项目结构细节，开发人员则能获得条理清晰、可预览的项目文件。
嵌入式 HMI 产品通常有不同的屏幕尺寸。Live Preview 提供不同屏幕分辨率的可视化叠加层，使您能够在开发前验证缩放适配效果。
该插件可自动识别设计中的字体，并显示是否可用。您可以添加任何缺失的自定义字体，获得准确的渲染效果。
完成设计后，将整个设计成果导出为一个QML 项目的压缩包。开发人员可直接在 Qt Creator 或 Visual Studio Code（需安装 Qt Extension for Visual Studio Code 插件）中打开它，并立即开始构建。无需再依赖 PDF 文件、截图或静态原型——这是可直接投入开发的全功能项目。
大多数嵌入式产品都无法完全按照原始设计进行交付，这并不是因为团队缺乏能力，而是因为设计与实现环节的工具和语言缺乏互通性。
Figma to Qt 弥补了这一差距。
设计人员更接近真实产品，开发人员有了更坚实的基础， 团队在流程的早期阶段就能在统一的设计基准上进行协作。 HMI 创建变得更快、更清晰、更可预测。
随着新版测试发布，我们在持续扩展功能并打磨整体体验，稳步迈向明年初的 1.0 正式版发布计划。
Figma to Qt 不仅仅是一个插件，它还是一份初心的表达：每一位设计师都应该看到自己的作品以设想中的完美姿态呈现。
现在就从Figma 社区试用它，让您的设计在 Qt 中精准还原！