Figma Config 2022 的新功能

罗小盒

杭州/UI设计师/4年前/1711浏览

版权

罗小盒

Figma 在一年一度的年度用户大会上来了一些新功能和一些新的点子，我们来一起看一下。

一、暗色模式 / Dark mode

二、重新设计的自动布局 / Redesigned auto layout

三、组件属性 / Component properties

四、聚光灯 / Spotlight

五、新的FigJam小部件 / New FigJam widgets

六、可变字体 / Variable fonts

七、弹性动画 / Spring animations

八、划清界限 / Individual strokes

九、审查分支状态 / Review states for branching

十、更新大纲视图 / Updated outlines view

十一、国际键盘快捷键 / International keyboard shortcuts

十二、受密码保护的链接 / Password-protected links

十三、收藏文件 / Favoriting files

十四、桌面标签更新 / Desktop tab updates

十五、小部件代码生成器 / Widget Code Generator

一、暗色模式 / Dark mode

使用主题更改 Figma 设计文件和文件浏览器的外观。在浅色或深色主题之间进行选择，或者可以通过系统设置确定主题颜色。如果您的系统外观设置为浅色，那么 Figma 将使用浅色主题。如果您的系统设置为深色，那么 Figma 将使用深色主题。

https://help.figma.com/hc/en-us/articles/5576781786647

改变主题的方法

通过 Figma 主菜单或快速操作菜单中更改主题。如果您更改主题，这不会影响 Figma 对其他人的外观，即使您在同一个文件中工作。主题设置是特定于设备的。如果您在多台设备上使用 Figma 帐户，则一台设备的主题设置不会转移到另一台设备。当您创建新文件时，Figma 会根据您当前的主题将背景颜色设置为浅色或深色。在浅色模式下，新创建的文件默认为浅灰色背景色 #F5F5F5。在黑暗模式下，它们将默认为灰黑色 #1E1E1E。

二、重新设计的自动布局 / Redesigned auto layout

设计更多，调整更少

重新设计的自动布局让您可以创建具有新布局选项、重新设计的属性面板和画布控件的完全响应式设计。

自动布局是您可以添加到框架和组件的属性。它使您可以创建可以填充或缩小以适应的设计，并随着内容的变化而重排。当您需要添加新图层、容纳更长的文本字符串或随着设计的发展保持对齐时，这非常有用。有很多方法可以使用自动布局：

创建在编辑文本标签时会增大或缩小的按钮。
构建适应项目添加、删除或隐藏的列表。
结合自动布局框架来构建完整的界面。

自动布局是具有许多移动部件和用途的强大功能。在本文中，我们将向您展示它的每个属性是如何工作的。

https://www.figma.com/community/file/784448220678228461

三、组件属性 / Component properties

向您的组件添加内置文本、布尔值和实例自定义。简化您的设计系统并创建更顺畅的开发人员交接。

简化您的系统，使用组件属性为您的组件添加内置定制并减少变体——创建简化的设计系统和更顺畅的开发人员交接。

通过将组件的哪些部分绑定到特定的设计属性来定义人们可以更改的组件。这使您可以控制诸如图层是否可见，是否可以交换图标或更改文本，或者是否应用了效果等内容。

与常规组件一样，您可以附加说明和链接到更多文档。这可以确保使用您的组件的人拥有正确的信息和上下文来应用它们。您可以在实例级别配置所有组件属性。因此无需选择和覆盖单个图层。

https://www.figma.com/community/file/1100581138025393004

四、聚光灯 / Spotlight

Spotlight可以通过 Figma 或 FigJam 文件轻松收集和指导每个人。

Spotlight 可让您将协作者聚集在一个文件中，以遵循您对 Figma 设计画布或 FigJam 板的视图。聚焦自己：

促进研讨会、会议和团队练习
通过您的设计、团队练习或幻灯片引导您的观众
请求文件中的每个人在画布或 FigJam 板上跟随你
将所有合作者聚集在画布或 FigJam 板的一部分中

开启聚光灯

将鼠标悬停在 FigJam 或 Figma 设计文件顶部工具栏中的头像上。

单击聚焦我。

此时，当前查看该文件的每个人都会收到通知，您希望他们关注您。在显示您的文件视图之前，他们有几秒钟的时间忽略您的请求。成为焦点后，您会看到文件中有多少人在关注您，并且您的头像将带有虚线边框。

结束聚光灯

要停止聚光灯，请单击画布或板顶部中心的停止。

五、新的FigJam小部件 / New FigJam widgets

随心所欲的小部件。

新的 FigJam 小部件集合为您提供了更多与团队协作、构建和联系的方式。

https://www.figma.com/community/widgets

六、可变字体 / Variable fonts

使用可变字体通过各种字体样式和功能来扩大您的设计和排版的可能性。

七、弹性动画 / Spring animations

为您的原型添加一些鼓舞人心的东西。

使用自定义或预设的弹簧动画制作自然流畅的过渡原型。

原型有许多活动部件。添加缓动和弹簧动画预设，或自定义过渡缓动，以传达运动、情感，并使您的原型更像真实的东西。缓动通过使用数学函数确定起始帧与其目标（也称为关键帧）之间过渡的加速度。关键帧可以是交互中的两个帧，例如从一个屏幕到另一个屏幕的过渡，也可以是单个帧的开始和结束状态，例如改变颜色的对象。在下面的示例动画中，缓动由图表上的曲线表示，其中时间应用于 x 轴，过渡（如移入、滑动或智能动画）位于 y 轴上。关键帧由图中曲线的起点和终点表示。

https://help.figma.com/hc/en-us/articles/360040315773