五分钟带你了解更新后的 Figma 自动布局功能

五分钟带你了解更新后的 Figma 自动布局功能

新的自动布局已在 2022 年 5 月的配置期间更新并宣布。有些保持不变,有些功能是全新的且令人兴奋的,有些东西刚刚移动或带有您不容错过的甜蜜小细节。

给我 5 分钟的时间,我将带您快速了解有关新自动布局的所有内容,以便您保持领先地位并立即重新投入工作。

五分钟带你了解更新后的 Figma 自动布局功能

1.应用自动布局:同样的快捷键

让我们将自动布局应用到我的卡上,同样旧的shift+A或使用菜单(好吧,只需右键单击即可完成)。

五分钟带你了解更新后的 Figma 自动布局功能

但是请注意现在图层是如何按照画布上显示的顺序堆叠的,这更有意义!感谢那个 Figma,那个旧的逆序真的让我很恼火。

2.自动布局菜单:相同的功能新外观

然而,自动布局菜单的外观发生了变化,让我们来调查一下。

五分钟带你了解更新后的 Figma 自动布局功能

方向和以前一样工作,也有空间。您还可以像以前一样设置水平和垂直填充,如果您想要单独的填充,请单击以打开所有边的选项。很标准。对齐已移至子菜单的此主菜单,但工作方式相同(准备好稍后使用对齐菜单的一些不错的快捷方式)

五分钟带你了解更新后的 Figma 自动布局功能

💥 提示:cmd+click 获取 CSS 符号

按住cmdclick on any padding field。您现在可以像在 CSS 中一样使用逗号符号。或者为所有输入一个数字。甜的!

五分钟带你了解更新后的 Figma 自动布局功能

3. 新:画布控制😍

除了自动布局菜单外,您现在还拥有一个画布控件。因此,如果您将鼠标悬停在自动布局框架上,您会看到粉红色的小手柄出现,您可以拖动它们进行调整。这适用于 s之间的速度,也适用于填充。

新的画布控制

💥 提示:随着您设定的微调值增加

按住Shift设置的轻推值拖动增加和减少。

随着设定的微调值增加

💥 TIP:点击手柄设置特定值

单击画布上的控制手柄以设置特定值

单击句柄以设置特定值

💥 提示:水平和垂直填充相等

拖动时按住alt以获得相同的填充以进行水平或垂直调整。或在拖动时按住shift+alt并且所有填充都将调整大小

质量填充保持移位

3. 新:负间距!😍

好的,这是我非常兴奋的一个,你现在可以在元素之间设置负间距,这意味着你可以堆叠元素!

所以在这里我有我的自动布局卡片,我将添加另一个自动布局框架我现在可以使用我的画布控件或菜单​​将它们之间的间距设置为负值并创建堆叠。这可以垂直和水平地工作。

新的负间距

这对于创建原型也很神奇,有很多新的可能性!

4.高级布局菜单

如果单击自动布局菜单中的三个小点,则会打开高级布局菜单。

新的高级菜单

5. 间距模式:相同的旧但不错的新快捷方式

让我们从我最喜欢的一个开始,包装和空间之间。这不是新的,就像在旧的自动布局中一样,packed 是默认设置并保持元素之间的设置间距。另一方面,Space between 将使用所有可用空间并在直接子元素之间创建相等的间隙。

间距模式在起作用

💥 提示:使用对齐菜单切换 + X

有两个很棒的快捷方式,这太棒了,因为我经常使用它并且想要一直深入挖掘菜单。或者使用对齐框并按下X在空间和包装之间切换。

用 X 切换

💥 提示:键入 auto 以设置之间的空格

单击画布上手柄之间的空间并键入 auto ,它会切换到空间之间。如果您添加一个值,它会切换回packed。

键入 auto 以设置为之间的空格

6.新增:包括排除笔划

在高级布局菜单中,您现在还可以找到包含或排除笔划的选项,非常方便避免碰撞并拥有漂亮干净的组件。

包括或排除中风

7.新增:更改堆叠顺序

如果您有通过负间距堆叠的元素,您可以在此处更改堆叠顺序。请注意,这不会改变图层菜单中的顺序

更改堆叠顺序

请记住,除了堆叠顺序之外,如果您想更改自动布局子项的位置,您还可以始终使用良好的旧键盘箭头,这将更改图层的顺序

更改图层顺序

8.新增:文本基线对齐

您至少需要一个文本元素才能使其正常工作。通过高级菜单,您现在可以选择居中对齐(默认)或通过文本的基线。

与基线对齐

💥 提示:使用对齐菜单 + B切换

选择对齐框并按下B以切换文本基线对齐

基线对齐切换与 b

9. 新增:绝对定位😍

这个也很棒。您现在可以将元素设置为绝对定位。您首先需要将它拖到您的自动布局框架中,然后会在框架菜单中看到绝对定位选项。一旦它被绝对定位,您就可以将它移动到任何您想要的地方。您还可以设置约束。所以这对于警报气泡和警报之类的东西来说是惊人的。绝对喜欢它!

新的绝对定位

💥 提示:在检查模式下查看整洁的符号

绝对检查模式

10.调整菜单大小:相同的旧,只是移动+新的快捷方式

当我第一次打开新的自动布局时,我有点震惊,因为调整大小菜单不见了!它不是!它刚刚移动到框架部分。它的工作原理就像以前的旧调整大小菜单一样,但它带有一些可爱的新快捷方式。

新旧菜单对比

💥 提示:使用新的调整大小快捷方式

垂直拥抱 →双击自动布局框架的顶线或底线
水平拥抱 →双击自动布局框架的左线或右线填充容器→ 按住alt同时单击如上

调整快捷方式演示

11.爱它,但我仍然缺少什么:

像往常一样,对最新更新印象深刻。但仍然希望尽快获得图像的宽高比!哦,我多么希望有一个集成的纵横比,所以我不得不停止使用 hacky(但很棒)的解决方案。同样对于像我这样的阅读障碍者来说,整体语法整合将是黄金!

作者:Christine Vallaure,如若转载,请注明出处:https://uxdesign.cc/new-figma-auto-layout-in-5-min-b68cc1b6941f

(2)
上一篇 2022年5月26日 上午10:49
下一篇 2022年5月27日 下午2:02

相关推荐

发表评论

您的电子邮箱地址不会被公开。