Figma最新年度用户大会Config 2023上发布了一系列令人兴奋的更新,加强了设计与开发的协作。
我们来详细看看更新了哪些内容:
◇Dev Mode
Dev Mode是figma此次更新的一大亮点,它彻底改变了UI设计与工程开发的工作模式。
具体来说,它实现了:
1. 在Figma中与开发工程师共享设计原型,开发工程师可以在VS Code编辑器中打开和检查这些原型。这样可以实现设计与开发的实时协作和讨论。
2. 开发工程师可以从设计原型中获取测量、样式、资源等信息,或者直接获取代码段,以实现快速开发。
3. Figma与VS Code及其他第三方工具实现深度集成,可以在工具之间无缝过渡,提高工作流程效率。
例如:设计师A在figma中设计了一个按钮组件,并建立一个网页原型。设计师A与开发工程师B共享此原型编辑权限。
开发工程师B可以在VS Code中打开原型,选中按钮后在Dev Mode查看细节属性并获取CSS代码。如果对兼容性有疑问,开发工程师B可以@设计师A进行实时讨论与解答。
◇Variables（变量)
Variables功能使figma具备创建和管理设计系统变量的能力。主要包括:
1. 可以定义颜色、长度、文本内容等不同类型的变量,并给每个变量起一个语义化的名字。
2. 可以在设计中任何需要重复使用这些变量值的位置,直接调用变量名来引用对应的值。
3. 更新变量的值,设计中所有引用该变量的位置都会自动更新。这实现了设计的一致性和迭代的灵活性。
4. 可以通过插件和API与代码环境集成,实现变量的导入导出和互操作。
例如:设计师A定义变量主色值为蓝色,次色值为橙色。在创建按钮组件时,设计师A选择变量主色,背景色变蓝色。后续修改主色值,按钮背景色会自动更新。
设计师A可以导出变量为设计令牌与开发工程师B共享,实现代码中的同步更新。
◇原型设计功能提升
此次更新增强了figma对原型设计的支持,主要包括:
1. 条件逻辑:可以根据交互行为动态显示或隐藏内容,使用更少屏幕实现更丰富的交互路径。
2. 数学表达式:可以使原型中的组件大小动态计算,实现响应式和自适应效果。
3. 设置变量:可以通过定义变量,并在原型交互中设置和修改变量的值来制作更加动态的原型体验。
4. 内联预览:可以在设计环境中实时预览原型中的组件与交互,加快修改与调试的速度。
例如:使用Figma的更新后原型设计功能,设计师可以:定义一个变量quantity,初始值为1。
在屏幕上添加一个文本组件,将内容绑定到变量quantity。
这样文本组件显示的内容会随quantity的值实时更新。
为按钮设置点击事件,并添加条件逻辑:如果这是第一次点击 → quantity的值增加1(当前为2)
如果这是第二次点击 → quantity的值增加1(当前为3)
以此类推... 由于文本组件内容绑定到变量quantity,所以每当点击按钮,quantity的值增加1后,文本组件显示的内容也会实时更新为最新数量。
通过重复点击,quantity的值不断增加,页面上显示的数量也相应增加,实现无限增加的效果。
这样,通过定义一个变量(quantity)和简单的条件逻辑(每次点击quantity+1),就可以实现这个高度动态的交互效果,而无需设计大量独立屏幕。
除了上面三个重点功能外，Figma还更新了其他3个功能：
◇自动布局增加了新的设置,可以更轻松设定项目的换行方式、最小/最大宽度和高度。
◇Figma的字体选择器做了更新,新增了对字体的预览、搜索和过滤功能。
◇新增了全局搜索和通知功能,使得跨文件和团队查找内容、评论等变得更加简单。
以上就是全部更新内容了，目前打开Figma这些功能都可以使用了。
虽然我们没有等到万众期待的AI生成内容，但Figma此次宣布收购了Diagram工作室，这个工作室上半年已经在开发全Figma的Ai插件了!收购以后一定会有大动作。
