绝对定位在Figma中的使用-UX Collective

毫无疑问，自动布局框架非常适合创建通用组件。它们可以轻松缩放以适应其内容。但是，如果您希望flexbox组件的某些部分超出其边界，该怎么办呢？或者如果您需要一个灵活的覆盖层放在设计的顶部呢？

以前，您可以使用零框架技巧：

然而，最近的Config大会为我们带来了Figma的更新，其中包含一些令人兴奋的新功能。在其中之一中，现在可以在自动布局框架中绝对定位元素。 什么是绝对定位？

绝对定位允许您将元素从正常的自动布局流中排除，而不会将其从框架本身中删除。容器内没有为此对象保留空间，因此兄弟元素只会忽略其位置。就像零框架黑客一样，但实际上并没有黑客任何东西。

绝对定位的元素允许您在自动布局框架内使用约束。因此，您可以将其放置在您想要的位置，并使其保持相对于父框架的位置。在这种情况下，不再提供调整大小和高级布局选项。

如何使用它？

在Figma中启用绝对定位就像点击一个按钮一样简单。但是首先，您需要将所有元素分组放在一个自动布局框架内。然后，选择要从流程中排除的元素，并将它们设置为绝对定位。魔术按钮位于设计面板的最顶部， 绝对定位按钮位于设计面板下方。

自动布局之外的元素

该功能可用于具有超出自动布局边界的徽章或卡片元素...

在设计面板中，您可以使用绝对定位按钮将元素放置在自动布局之外。这对于具有超出边界的徽章或卡片元素非常有用。绝对定位允许您精确控制元素的位置和大小。

要使用绝对定位按钮，请按照以下步骤操作：

1. 在设计面板中选择要放置在自动布局之外的元素。
2. 单击工具栏上的绝对定位按钮。该按钮的图标类似于一个方框和箭头。
3. 将选定的元素拖动到所需的位置。您可以使用鼠标或触控板进行拖动。
4. 放置元素后，您可以使用选中元素的控制手柄来调整其大小和旋转。
5. 若要取消绝对定位并将元素放回到自动布局中，请单击工具栏上的取消绝对定位按钮。

绝对定位按钮使您能够更灵活地设计和布局您的元素。您可以在设计面板中找到该按钮，开始利用这个强大的功能吧！