浏览 UI3:Figma 的新 UI
谁可以使用此功能
- 所有计划均提供有限测试版
- 如果您无法访问重新设计的 Figma,请稍候;这些更新将在未来几个月内推出 。如果您是 Figma 新手并且正在自动使用重新设计的版本,我们建议您阅读我们的设计文件探索指南。
在 Config 2024 上,我们推出了重新设计的 Figma,称为 UI3。本指南适用于从 Figma 以前的设计转换过来并想了解变化的人。
我们为什么重新设计 Figma
Figma 随着时间的推移变得越来越复杂,而 UI3 则致力于简化您的设计体验。我们的目标是让 Figma Design 更专注于设计师,让更多人更容易接受。我们还在为现有产品和即将推出的产品创建一致的基础。
这种新设计:
- 通过可调整大小和可折叠的面板,您可以更好地控制界面
- 在画布上更加突出你的作品
- 通过改进功能的位置、分组和如何适应不同的环境,使功能更加直观
- 增加了与我们其他产品的一致性,使在 Figma Design、FigJam、Dev Mode 和 Figma Slides 之间切换更加容易
提示:想要了解有关重新设计的更多信息?查看我们的博客文章:在重新设计的 Figma 中,您的工作将占据中心位置
变化
导航面板
我们重新组织了画布左侧的导航面板,以容纳有关文件的所有信息,使其更易于使用。
最小化 UI
如果您需要画布上多一点空间,您现在可以从导航面板最小化 UI。单击 最小化 UI以折叠导航面板和属性面板。
如果您在 UI 最小化的情况下在画布上选择某些内容,属性面板会暂时重新打开,以便您访问每个属性的控件
资产选项卡
我们使从“资产”选项卡搜索、浏览和插入组件变得更加容易。
工具栏
新的工具栏将设计工具移至编辑器底部。这释放了画布上的更多工作空间,并通过新的操作菜单引入了全新的 AI 功能。
注意:Figma Design 中的 AI 功能将在未来几个月内推出。了解更多 →
操作
Actions是工具栏中的一个全新项目,旨在帮助您更快地将想象变为现实。在这里,您可以访问 Figma 的所有 AI 工具、常见的生产力操作、插件和小部件、组件等。
进入开发模式
您现在可以访问 工具栏中的开发模式,可以更轻松地在 Figma Design 中的模式之间切换。
属性面板
属性面板的设计视图更易于使用,并且属性现在已分组以匹配更现代的工作流程。
您还可以调整属性面板的大小,这对于处理名称较长的组件非常方便。
属性标签
UI3 的新功能,您现在可以打开属性标签以更清楚地了解每个属性的作用。
要打开属性标签,请点击属性面板中 100% 缩放百分比旁边的下拉菜单,然后选择属性标签。
布局
布局包含与对象布局相关的所有属性,例如宽度和高度。
当您点击 在框架上使用自动布局,布局标签更改为自动布局,并且所有自动布局属性均变为可用。
位置
现在,您可以在Position下访问与对象在画布上的位置相关的所有属性,包括约束。
提示:您现在可以从属性面板聚焦自己。当人们进入聚焦状态时,我们会最小化左右面板和工具栏,这样您就有更多空间展示您的作品。
功能移至哪里?
请查看下面的列表以查看已移动的所有内容以及您可以在哪里找到它。
旧设计 | 重新设计 | |
请求编辑权限如果您有权 |
||
绝对位置绝对位置现在忽略自动布局。 当您忽略自动布局时,您可以手动将对象定位在自动布局框架内,而无需遵循自动布局结构。 要忽略自动布局,请选择自动布局框架的子项,然后单击在属性面板中。 |
||
对齐对象对齐控件可帮助您将对象与其父层对齐,或将多个对象彼此对齐。 选择多个对象,然后单击属性面板中位置下的其中一个对齐工具。 |
||
自动布局当您在框架上使用自动布局时,它将根据内容变化和不同的屏幕尺寸动态调整。 要在框架上使用自动布局,请点击在属性面板的布局部分中。 |
||
自动布局宽度和高度值在自动布局框架中,宽度和高度值现在与调整大小行为相结合。您可以找到以下值:
|
||
混合模式混合模式定义了两个层如何混合在一起。 要应用混合模式,请选择一个对象,单击,然后选择一种模式。 |
||
剪辑内容剪辑内容允许您隐藏超出父框架边界的图层部分。 点击 在布局下剪辑内容选择是否剪辑或显示内容。 |
||
组件属性组件属性是组件的可更改方面。您可以通过将组件的哪些部分与特定属性绑定来定义其他部分可以更改。 如果组件具有可用的组件属性,您可以在属性面板中的框架名称下方找到它们。 |
||
约束约束告诉 Figma 当你调整图层父框架的大小时图层应该如何表现。 选择子图层后, 约束图标将出现在属性面板的位置部分中的 X 和 Y 位置值旁边。 |
||
圆角半径角半径是一种可让您将对象的角弄圆的属性。 选定对象后,单击外观下的角半径字段并更改值。 您还可以点击单独修改每个角。 |
||
文件名、项目名称和文件操作文件的名称、其项目以及文件操作下拉菜单已移至导航面板。 |
||
面具使用蒙版显示物体的特定区域,同时隐藏其余区域。 选定对象后,单击 用作蒙版以对象作为蒙版来创建蒙版组。根据可用操作的数量,用作蒙版可能位于 更多菜单。 |
||
多重编辑多重编辑 可让您跨框架、组和部分选择多个图层,并批量对它们应用相同的编辑。 点击在属性面板中启用多重编辑。 |
||
插件和小部件 |
||
调整对象的宽度或高度,或调整大小以适合在布局下更改对象的宽度和高度。您还可以通过单击图标。 |
||
旋转旋转或翻转可让您通过更改对象的方向来操纵对象。选择对象后,找到“位置”并:
|
||
显示或隐藏对象要隐藏画布上的对象,请点击外观旁边的。 |
||
文本文本现在被称为排版。
|
||
可变模式如果变量集合具有多种模式,那么您可以在图层和元素上切换模式,以快速更改不同上下文的设计。 只要一个对象绑定了多个模式的变量,就可以点击外观旁边的按钮可切换变量模式。 |
||
添加变体变体允许您将相似的组件分组并组织到单个容器中。插入组件实例时,您可以在组件集的变体属性之间切换。 要添加变体,请选择主要组件,然后单击 在属性面板中的组件名称旁边添加变体。 |
||
编辑矢量路径要编辑矢量路径,单击 编辑Vector 旁边的。 如果选择多个矢量路径,则会出现布尔运算菜单。从这里,您可以执行以下操作:
|
||
缩放/查看选项 |
我可以恢复旧设计吗?
如果您遇到困难,我们让您可以轻松切换回之前的设计。在设计文件中,打开 帮助菜单并单击返回上一个 UI。
如果您决定稍后切换回来,您可以随时返回此菜单并再次尝试重新设计。