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

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

但是请注意现在图层是如何按照画布上显示的顺序堆叠的,这更有意义!感谢那个 Figma,那个旧的逆序真的让我很恼火。
2.自动布局菜单:相同的功能新外观
然而,自动布局菜单的外观发生了变化,让我们来调查一下。

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

? 提示:cmd+click 获取 CSS 符号
按住cmd
和click on any padding field
。您现在可以像在 CSS 中一样使用逗号符号。或者为所有输入一个数字。甜的!

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

? 提示:随着您设定的微调值增加
按住Shift
设置的轻推值拖动增加和减少。

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

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

3. 新:负间距!?
好的,这是我非常兴奋的一个,你现在可以在元素之间设置负间距,这意味着你可以堆叠元素!
所以在这里我有我的自动布局卡片,我将添加另一个自动布局框架我现在可以使用我的画布控件或菜单将它们之间的间距设置为负值并创建堆叠。这可以垂直和水平地工作。

这对于创建原型也很神奇,有很多新的可能性!
4.高级布局菜单
如果单击自动布局菜单中的三个小点,则会打开高级布局菜单。

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

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

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

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

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

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

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

? 提示:使用对齐菜单 + B切换
选择对齐框并按下B
以切换文本基线对齐

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

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

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

? 提示:使用新的调整大小快捷方式
垂直拥抱 →双击自动布局框架的顶线或底线
水平拥抱 →双击自动布局框架的左线或右线填充容器→ 按住alt
同时单击如上

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