在最近的更新中,Figma加入了自动布局的换行功能,使用这个功能可以轻松实现多行布局,极大减少手动调整元素位置的时间。
要使用换行功能,首先选择一个以及制作好自动布局的画框。
在自动布局画框的宽度设置中填入最小宽度或最大宽度的值。这个值决定了换行发生的时机。填入最大宽度时,当元素宽度之和超过此值时将换行;填入最小宽度时,当元素宽度之和小于此值时将换行。
然后,点击自动布局控制面板最上方的“换行”按钮开启此功能。
启用换行功能后,当自动布局框的宽度超过或小于元素的宽度总和时,元素将自动换行排列。如果宽度甚至超过或小于一个元素的宽度,所有元素将排列在一行。
这使我们可以轻松创建适应不同宽度的多行布局。
下面跟随实例了解具体操作步骤:
1. 选择一个自动布局画框，如实例中已经制作好的卡片素材,点击右侧宽度属性的下拉箭头栏中，填入最小宽度例如376px。
2.接下来我们再复制2个卡片，一起放置在自动布局的容器中，设定为填充容器。
并点击自动布局控制面板的“换行”按钮开启换行功能。
3. 拖动自动布局画框宽度,当宽度小于两个卡片宽度之和)时,将自动换行排列。当画框宽度小于一个卡片宽度时，将自动垂直排列。
掌握Figma新功能的使用方法和注意事项,我们可以大大提高设计工作的效率和产出质量。快去尝试换行功能吧！
