精心打磨的设计离开 Figma 进入开发流程时,往往会因层层解读和意外限制产生间距偏移、颜色变化、细节走样等问题。随之而来的是项目进度滞后、设计意图不明,用户体验也不再是优先考量。
Figma to Qt 旨在确保您的 GUI 设计能够从 Figma 无缝迁移至设备。
Figma to Qt 1.0 版本现已可以在 Figma 社区免费下载。
大多数设计转代码工具(包括最新的 AI 工具)都是将 Figma作为提取源。这在某些场景下可能有帮助,但我们深知,保持工作流程简洁高效,避免切换上下文或要求设计师额外学习新工具,本身就具有商业价值。
正因如此,Figma to Qt直接运行在设计师早已熟悉的Figma环境内部。您可以在Figma中直接准备、预览和验证GUI 设计。这种方式让设计师始终主导设计流程,避免因开发者理解偏差或反复沟通确认可行方案而耗费时间。
此外,输出结果遵循可预测且成熟的规则,明确规定了 Figma 属性与 QML 之间的映射关系。Figma to Qt 是一款专用转换工具,而非生成式工具,这意味着相同设计每次都会生成相同的代码。您预览并确认的内容,就是最终导出的结果。您的团队可以在不同项目、版本中信赖它。对于构建嵌入式和 HMI 产品的团队而言,准确掌握最终交付内容至关重要,这种一致性尤为关键。
我们的研究始于一个问题:究竟怎样才能让一个设计完整无损地呈现在设备上?
测试版指引我们找到答案。通过多次深度用户访谈和大量反馈收集,设计师和开发者带领我们逐一梳理了他们的工作流程中哪里会出现问题、哪里需要耗费大量时间、以及他们对这类工具的真正需求。1.0 版本中的每项决策,都源于这些研究。
致每一位参与者:此版本基于您的反馈塑造。感谢您帮助我们不断改进,愿您喜欢这次更新。
Figma to Qt 是一款插件,让设计师能够掌控从首屏到最终产品的全过程体验。
您如何设计,它就如何落地到产品。
这款插件契合实际的设计工作方式。反馈循环就在 Figma 内部完成,具体流程如下。
像往常一样工作。如果您希望从一开始就使用 Qt 原生组件,插件内置的组件库包含预标注的 Qt Quick Controls:按钮、开关、复选框、滑块和文本字段。
这些组件可以直接拖放到画布上。您也可以将已有的组件设计直接映射到 Qt Quick Controls。
Figma to Qt 将您设计中的交互式元素(如按钮和滑块)映射到 Qt Quick Controls。
打开实时预览,设计会在浏览器中渲染为真实的 Qt 界面。无需离开 Figma,也无需开发者介入,您就能检查其代码映射关系以及在不同设备分辨率下的表现。
您可以直接在 Figma 中启动 GUI 的实时预览,即在浏览器中渲染的真实工作界面。
“问题”选项卡会扫描您的设计,标记出所有无法干净地转换为 QML 的内容,并提供解释和修复建议。过去要在代码评审阶段、开发数周之后才会暴露的问题,如今在 Figma 中就能发现,而您只需几分钟即可修复。
Figma to Qt 中的“问题”选项卡会高亮显示在设备上渲染效果不佳的内容,为您提供建议或一键修复的方式。
在 Figma 中调整后,然后立刻再次检查预览。循环速度足够快,从而得以轻松重新考虑设计决策。
当预览效果匹配预期且所有问题都已解决时,即可导出完整的 QML 项目为 zip 文件。
开发者可以在 Qt Creator、Visual Studio Code 或 Qt Design Studio 中打开它,直接从可运行的界面开始构建,无需再根据规格说明一点点拼凑。
插件将您的设计令牌(Design Tokens)完整传递至 QML,保留自动布局中的响应式行为,并将交互组件映射为功能完整的 Qt 原生控件。生成的代码编写清晰、编译高效。开发者可以直接将导出文件通过 Qt Quick Compiler 运行,无需额外修改。
Figma to Qt 真正的与众不同之处在于:导出不再是了解设计转化效果的时刻。您见证了每一步的渲染效果,对结果早已了然于胸。
当开发者打开项目时,主要设计决策已经在 Qt 中得到了验证。
如果您在测试期间使用过 Figma to Qt,以下是新增内容。
Qt Quick Controls 库在已有的按钮、复选框、开关之外,新增了滑块(Slider)和文本字段(Textfield)。您也可以将自定义的按钮映射为原生控件,无需从库中重新开始。点击此处了解其工作原理。
现已支持全局共享 Figma 库。如果团队在多个文件中维护共享的组件库和设计令牌,插件可以识别并转换它们。点击此处了解其工作原理。
Figma to Qt 支持 Figma 库,其中的共享组件和设计标记会被转换为 QML。
Figma to Qt 是 Qt Bridge for Figma 的官方替代版本,两者之间存在实质性差异。
Qt Bridge for Figma 需要将 Qt Design Studio 作为设计和 IDE 之间的中间步骤。Figma to Qt 完全消除了这一依赖,直接生成 QML代码,为您的开发环境提供一条直通路径。
Qt Bridge for Figma 只有在导入 Qt Design Studio 之后才能显示预览。而Figma to Qt 在迭代阶段,就能将预览直接呈现在 Figma 的浏览器中。在交付之前,您就能看到自己的设计作为真实 Qt 界面运行的效果。
而且,Figma to Qt 是专为 Figma 打造的,不同于 Qt Bridge for Figma需要兼顾 Photoshop、Sketch 和 Adobe XD 等工具,其生成的代码更简洁,也更忠实于您的原始设计。
对于新项目,请使用 Figma to Qt。
如果您有正在使用 Qt Bridge for Figma 的项目,其支持将持续至 2030 年 10 月。如需帮助,请通过 qt-design-tools.support@qt.io 或 Qt 账户支持中心寻求帮助。
Figma to Qt 1.0 发布之后,我们将持续扩展 QML 覆盖范围,将更多 Figma 设计元素转换为原生组件,让设计师能够更准确地预览和交付设计。我们也在探索如何在设计师和开发者之间建立更具迭代性的工作流,致力于改善设计与实现之间的沟通与协作,提高速度与效率。
此外,我们正在密切关注这一领域的 AI 发展动态,以便能将其顺利地整合到设计和开发工作流中。敬请期待 。
卓越的用户体验值得完美落地。Figma to Qt 正是为此而生。
立即在 Figma 社区试用,见证您的设计在 Qt 中焕发生机!