在刚刚召开的Framework开发者大会上,Figma宣布了Code Connect对接开发、渐变排版变量、企业版库分析等一系列提升设计系统运作效率和采用率的新功能,加强了Figma在设计系统生命周期的各个环节上的支持能力:
Code Connect
Code Connect是一个新的开发者工具,主要是为了弥合设计和代码之间的鸿沟,提高设计系统在开发人员中的采用率。Code Connect目前为beta版本,figma团队版和企业版用户可用。
作用:
让开发人员可以直接在Figma中访问每个设计组件对应的生产级代码片段
无需查阅文档或担心代码实现不一致
支持React、iOS、Storybook等流行框架,后续会增加更多支持
使用方式:
在Figma的开发者模式(Dev Mode)中,点击某个组件
Code Connect面板会显示该组件在各种框架下的代码实现
直接复制粘贴所需的代码片段即可
排版变量和渐变变量
作用:
排版变量可以一次性定义字体系列、大小、行高等,并贯彻应用在整个设计系统中,包括跨平台支持
渐变变量让您可以将颜色变量绑定到渐变的每个颜色断点上,精细控制渐变效果
使用方式:
在Figma的"设计令牌"面板中创建和管理排版、渐变变量
应用到文本图层或形状即可在设计中使用
后续修改变量值,所有应用之处都会同步更新
库分析API (企业版)
作用:是企业客户深入了解其Figma设计库使用情况的数据分析工具。
使用方式:
调用API获取设计库的元数据、使用情况等数据
与其他数据分析工具集成,根据需求进行定制分析
例如按团队、项目、时间等维度分析组件重用率
帮助设计系统团队更好地推广和优化设计系统
这一系列新功能都是为了让Figma能够更好地支持设计系统的全生命周期管理,无论是创建、维护,还是在整个团队中推广使用。
这些升级体现了Figma对设计系统在当代数字产品团队中扮演核心基础角色的期望:设计系统将贯穿整个设计开发流程,作为体现品牌形象、规范用户体验、加速产品交付的关键纽带,让设计师和开发者能够无缝协作,跨部门高效交付一致的体验。
https://www.figma.com/blog/what-we-launched-at-framework-2024/