【演讲材料】Qt全球峰会2025-Figma_to_Qt——打破设计与开发的壁垒.pdf

1、Figma to Qt打破设计与开发的壁垒Qt Group中国解决方案工程师郑哲世现代软件并非由个人构建而是团队协作团队协作的成果更多角色角色更远的距离距离以及更多挑战挑战关键挑战挑战前端开发前端开发工程师工程师产品产品设计师设计师是什么使其变得困难？是什么使其变得困难？产品产品设计师设计师我永远不知道开发团队是否真的会实现我的设计。在实现完成之前，我无法看到我的设计效果。开发人员告诉我某些功能无法实现，但我很难理解原因。是什么使其变得困难？是什么使其变得困难？我需要从头开始重新设计。设计变化迅速，常常破坏我的实现。我常常不得不猜测交互状态和逻辑。前端开发前端开发工程师工程师不信任不信任缺乏可

2、见性缺乏可见性缺乏理解缺乏理解低效率低效率缺乏清晰度缺乏清晰度关键在于保持团队团队步调一致27 October 202510Figma to Qt从设计到代码：赋能设计与开发协作一款免费使用的独立Figma插件，适用于Qt一款适用于Qt的免费独立Figma插件BETA代码生成代码生成转换转换 Figma 元素元素支持变量、自动布局、效果等功能生成可运行的生成可运行的QML自动映射为可复用的QML组件集成到开发中集成到开发中将代码片段复制到您的开发环境为产品界面做好GUI设计设计准备产品概述产品概述集成开发环境集成开发环境/硬件集成硬件集成在线预览在线预览QML转换转换设计指南设计指南设计指南设

3、计指南Figma-QML转换转换Qt Quick Controls代码生成设置代码生成设置为产品设计图形用户界面（为产品设计图形用户界面（GUI）打造完美适配目标硬件打造完美适配目标硬件的的Figma设计方案设计方案在线预览在线预览27 October 202517即时查看设计效果即时查看设计效果通过网页浏览器实时预览，无需导出早期验证目标早期验证目标屏幕分辨率与硬件规格配置探索代码中的设计探索代码中的设计生成的QML代码并排视图字体与屏幕分辨率字体与屏幕分辨率实时预览实时预览+代码视图代码视图在线预览在线预览团队工作流团队工作流设计设计|Figma前端开发前端开发|QML后端开发后端开发|C

4、+部署部署Qt Design StudioUIPackage(QML)FigmaFigma to QtLayoutTypographyPrototypeStyle/TokensVariantsUI ComponentDesign SystemBusiness LogicSystem IntegrationTimeline AnimationUI CompositionUser InteractionState ManagementIDEs协同交付协同交付加速交付加速交付实现愿景实现愿景在Figma和QML中使用相同的语言，同时保持工作流程的连贯性。少看历史，少做迭代。实时预览设计并生成代码，加

5、速交付。保持设计初衷不变。专注于打造卓越的用户体验，而非重构界面。向开发者交付向开发者交付GUI设计设计交付简洁可用的交付简洁可用的QML代码代码全程跟进全程跟进GUI设计至最终产品设计至最终产品高效协同、无缝协作高效协同、无缝协作Qt Bridge for FigmaFigma to Qt 是新一代设计转代码解决方案，即将取代 Qt Bridge for Figma。有何不同？有何不同？Qt Bridge for FigmaFigma to Qt跨工具支持跨工具支持与与Qt Design Studio集成集成独立插件。支持多种集成开发环境（独立插件。支持多种集成开发环境（IDE）与开发系统）与开发系统（DS）。）。代码生成代码生成通用支持通用支持 Sketch、PS、XD等软件等软件专为专为Figma友好代码量身定制友好代码量身定制实时预览实时预览DS应用内的预览功能应用内的预览功能浏览器在线预览浏览器在线预览MCU工作流程工作流程MPU-centric支持支持MPU和和MCU的工作流程的工作流程可用性可用性面向开发者的用户体验。支持面向开发者的用户体验。支持Qt框架。框架。面向设计师和开发者的包容性与直观性用户体验面向设计师和开发者的包容性与直观性用户体验BetaBeta Update*Beta IIV1.0 GABeta