Figma Framework 2024大会三大升级丨Code Connect对接开发!

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

Figma Framework 2024大会三大升级丨Code Connect对接开发!2.jpg

在刚刚召开的Framework开发者大会上,Figma宣布了Code Connect对接开发、渐变排版变量、企业版库分析等一系列提升设计系统运作效率和采用率的新功能,加强了Figma在设计系统生命周期的各个环节上的支持能力:

  1. Code Connect

Code Connect是一个新的开发者工具,主要是为了弥合设计和代码之间的鸿沟,提高设计系统在开发人员中的采用率。Code Connect目前为beta版本,figma团队版和企业版用户可用。

Figma Framework 2024大会三大升级丨Code Connect对接开发!3.png

作用:

  • 让开发人员可以直接在Figma中访问每个设计组件对应的生产级代码片段

  • 无需查阅文档或担心代码实现不一致

  • 支持React、iOS、Storybook等流行框架,后续会增加更多支持

使用方式:

  • 在Figma的开发者模式(Dev Mode)中,点击某个组件

  • Code Connect面板会显示该组件在各种框架下的代码实现

  • 直接复制粘贴所需的代码片段即可

  1. 排版变量和渐变变量

作用:

  • 排版变量可以一次性定义字体系列、大小、行高等,并贯彻应用在整个设计系统中,包括跨平台支持

  • 渐变变量让您可以将颜色变量绑定到渐变的每个颜色断点上,精细控制渐变效果

使用方式:

  • 在Figma的"设计令牌"面板中创建和管理排版、渐变变量

  • 应用到文本图层或形状即可在设计中使用

  • 后续修改变量值,所有应用之处都会同步更新

  1. 库分析API (企业版)

 Library Analytics API

作用:是企业客户深入了解其Figma设计库使用情况的数据分析工具。

使用方式:

  • 调用API获取设计库的元数据、使用情况等数据

  • 与其他数据分析工具集成,根据需求进行定制分析

  • 例如按团队、项目、时间等维度分析组件重用率

  • 帮助设计系统团队更好地推广和优化设计系统

这一系列新功能都是为了让Figma能够更好地支持设计系统的全生命周期管理,无论是创建、维护,还是在整个团队中推广使用。

这些升级体现了Figma对设计系统在当代数字产品团队中扮演核心基础角色的期望:设计系统将贯穿整个设计开发流程,作为体现品牌形象、规范用户体验、加速产品交付的关键纽带,让设计师和开发者能够无缝协作,跨部门高效交付一致的体验。

https://www.figma.com/blog/what-we-launched-at-framework-2024/

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作