Figma重新设计展示了人工智能如何改变应用程序，并增加了开发支持
内容提要
Figma推出了Code Connect，这是一个开源解决方案，帮助前端开发者在设计变更时无需重新编码。该工具将设计系统代码与Figma组件链接，确保代码与设计同步。此外，Figma展示了如何将人工智能集成到平台中，以提升设计生成能力，并计划利用用户数据训练AI模型，帮助开发更独特的设计。
延伸解读
Code Connect 如何减少重复编码
Code Connect 通过将设计系统组件的属性映射到 Figma 中的属性，生成与组件架构匹配的代码片段，并直接在 Dev Mode 中展示。这样，当设计变更时，开发者看到的是来自代码库的真实设计系统代码，而非自动生成的 CSS，从而避免手动重写已有代码。该工具支持 React、React Native、SwiftUI 和 Jetpack Compose，有助于团队推广设计系统并保持代码与设计同步。
AI 集成与数据训练策略
Figma 展示了将 AI 集成到平台中以提升设计生成能力，并计划利用用户数据训练 AI 模型，使其理解 UI 和设计系统。用户可以选择退出训练，企业用户默认退出。部分 AI 功能仍处于测试阶段，将随 UI 3 测试版推出。Figma 表示 2024 年将自行承担底层成本，但 2025 年可能会对这些功能收取额外费用。
对开发团队的实际影响
Code Connect 作为开源解决方案，采用 MIT 许可证，已结束测试正式发布。它要求团队将设计系统组件的属性映射到 Figma 属性，这需要前期配置，但能确保代码与设计始终同步。Spotify 的案例显示该工具节省了工程师时间，投资回报显著，促使团队将其推广到更多工程领域。对于已投资设计系统的团队，这有助于提高采用率并减少重复工作。
Q&A
Code Connect是什么，它的主要功能是什么？
Code Connect是Figma推出的开源解决方案，旨在帮助前端开发者在设计变更时无需重新编码，确保代码与设计同步。
Code Connect如何帮助前端开发者？
Code Connect通过将设计系统组件的属性映射到Figma中的属性，生成与组件架构相匹配的代码片段，避免了不必要的重新编码。
Figma如何利用人工智能提升设计能力？
Figma通过集成人工智能来增强设计生成能力，并计划利用用户数据训练AI模型，以帮助开发更独特的设计。
Code Connect支持哪些技术？
Code Connect支持React、React Native、SwiftUI和Jetpack Compose等多种技术。
用户如何选择退出AI模型训练？
用户可以选择退出AI模型训练，企业用户默认选择退出。
Figma对未来AI功能的计划是什么？
Figma计划在2024年推出更多AI功能，并在2025年可能会收取额外费用，旨在提升设计生成和用户体验。
