在开发者动手构建之前,先在实时预览(Live Preview)中点击、拖动并调整您的设计。同一套工作流,既可用于旗舰触摸屏,也可用于微控制器。而且,您在 Figma 中绘制的更多内容,现在都能以原生 QML 的形式回到项目中。
设计应当原样呈现在产品上,减少反复沟通,把更多时间留给真正重要的用户体验设计。这正是 Figma to Qt 的价值所在:它是内置于 Figma 的助手,帮助设计师无需离开画布即可设计 Qt 应用。1.1 版本在此基础上更进一步。
本次发布让实时预览成为可以真正测试和体验设计的空间,将 Figma to Qt 扩展到微控制器项目,并为设计带来更大的自由度。结果很明确:您在 Figma 中设计的内容,将更完整、更贴近设想地呈现在设备上。
以下是本次更新的内容。
1.1 版本新增功能
在交付给开发人员之前测试设计
实时预览直接在浏览器中渲染由您的设计生成的实际 QML 代码。无需构建,即可最接近地看到在设备上呈现的界面效果。
在 1.1 版本中,预览支持交互。按钮会响应点击,滑块可以拖动,开关可以切换,因此您可以在设计阶段就测试交互效果。在 Figma 中即可体验交互手感,在开发人员花时间构建之前就可以发现那些不够顺畅的交互。
更重要的变化是可编辑的 QML 代码视图。此前它是只读的,只能用来检查生成结果,无法尝试修改。现在,您可以更改颜色、调整尺寸或尝试不同的数值,并实时查看预览更新。可以把它看作一块草稿板。无需每次都与开发人员对接"如果这样修改会怎样?",就能快速探索实现细节。
在实时预览中的修改仅保留在当前会话中,不会写回 Figma 文件,Figma 文件始终是唯一可信来源。您可以放心地尽情尝试,设计稿会保持原样。
一套工作流,覆盖从高性能硬件到微控制器
大多数产品团队并非只为单一设备做设计,而是为一个产品组合做设计:基于高性能硬件的旗舰产品线,以及基于低成本硬件的入门产品线,往往由同一支设计团队使用同一个 Figma 库完成。Figma to Qt 1.1 为这两端提供一致的工作流。

在高端方面,1.1 在支持 Qt 6.10 的同时,新增对 Qt 6.12 长期支持(LTS)版本的支持。如果您的旗舰产品运行在微处理器(MPU)上,可放心使用 Qt 6.12 LTS 构建。Figma to Qt 现在可面向 Qt 首个符合《欧盟网络弹性法案》(CRA)的版本 Qt 6.12 生成代码,为团队的合规工作提供更坚实的基础。
现在,由您的设计生成的代码所面向的,正是团队在生产环境中依赖的版本,该版本满足《欧盟网络弹性法案》(CRA)的已知要求。

在入门级方面,Figma to Qt 现已支持 Qt for MCUs。家电、工业控制设备和车辆仪表盘通常运行在微控制器(MCU)上,此前这些项目一直处于 Figma to Qt 工作流之外。Figma to Qt 1.1 将工作流扩展到微控制器,从 Qt for MCUs 2.12 LTS 开始支持。
如需将设计转换为适用于 Qt for MCUs 的代码,请在 Figma to Qt 插件中打开"Settings > Code",并启用"Use Qt for MCUs compatible types"。参见图示。
无论界面面向高端触摸屏还是入门级显示屏,您都可以在 Figma 中以同样的方式完成设计。
自由设计,获得原生 QML
Figma 几乎可以绘制任何内容,但并非所有内容都能在 QML 中找到直接对应,也并非所有内容都适合嵌入式设备。不过,在 QML 中原生支持的 Figma 对象越多,设计师在设计上的自由度就越大,Figma to Qt 生成的代码性能也就越高。

本次发布进一步缩小了这一差距。Figma 约束(constraints)现在会转换为 QML 中的锚点(anchors)。您在 Figma 中设置的响应式行为将延续到实现中,无需手动重建。

椭圆和弧形现在会转换为原生 QML 类型,而不再是图片。您可以将仪表盘和徽标转换为原生 QML,并在实时预览中查看效果。

除 PNG 和 JPG 外,现在还可以将资源导出为 SVG。对于矢量类素材,SVG 能提供可缩放的资源,在不同分辨率下始终保持清晰。
这项工作不会止步于 1.1 版本,我们将持续缩小 Figma 内容表达与 QML 内容支持之间的差距。
后续计划
Figma to Qt 的每个版本都朝着同一个目标努力:让更多设计按您绘制的样子到达设备,减少中间的返工。新版本为您的设计带来更大的自由度,覆盖更多产品所使用的硬件,并让您在任何人编写代码之前就能测试自己的作品。
立即开始使用 1.1。也请继续告诉我们您的需求,我们会研究如何帮您解决。
