Figma中的绝对定位详解

给大家带来Figma绝对定位的外国文章,供大家学习和认识Figma的新功能-绝对定位,希望对大家有所帮助

什么是绝对定位?

绝对定位允许您从正常的自动布局流程中排除元素,而无需将其从框架本身中移除。容器内没有为这个对象保留空间,所以兄弟姐妹只是忽略它的位置。就像在零帧黑客中一样,但实际上并没有破解任何东西。

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

如何使用它?

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

位于设计面板中的绝对位置按钮
绝对位置按钮位于设计面板中

部分在自动布局之外的元素

此功能可用于带有超出边界的元素的徽章或卡片。

假设您设计了一家在线商店。一旦用户将产品添加到他们的购物篮中,您可能希望在手推车图标顶部显示当前购物车中的商品数量。

所以你从创建一个按钮开始。只需将您的图标和带有文本层的徽章组合在一起并应用自动布局。接下来,调整属性,使里面的元素居中对齐。然后,将徽章从正常流程中排除,并将其放置在您喜欢的位置。最后,为您的徽章添加约束。瞧!您刚刚在 Figma 中创建了具有绝对定位的第一个徽章。

在自动布局流程之外带有徽章的按钮
在自动布局流程之外带有徽章的按钮

把标准提高一点怎么样?:) 对于像卡片这样更复杂的组件,您可以以类似的方式进行操作。

假设您想要一张从卡片突出的图像以创建更具动态性的构图。假设这张卡片代表一个可选择的选项,并且您需要为各种状态(例如默认、悬停、活动、选中)设计一些版本。请记住不要意外地弄乱变体的结构,否则您的实例覆盖将失败。

当您拥有最复杂的结构时,您只需将内容分组到自动布局框架中并标记要从流中删除的图像。即使在不同的变体之间切换时,它也能完美运行。

图像绝对定位的卡片组件
图像绝对定位的卡片组件

自动布局之上的元素

有时您可能需要在其上带有元素的灵活组件,甚至用稀松布完全覆盖它们。

您可能需要在上下文菜单中添加一些功能,在图像上显示标签或在视频播放器顶部显示控件。这些元素通常位于组件之上。您可能需要在上下文菜单中包含一些功能或在图像上放置标签。最重要的是,您希望您的组件水平填充空间并自动调整它们的高度。似乎不可能?不再。

让我们创建一个视频播放器组件。首先准备一个固定比例的占位符图像,该图像根据其宽度按比例缩放。

当您准备好视频缩略图并将其放置在自动布局中时,您可以开始准备可扩展的叠加层。在您的自动布局框架内,添加一个矩形和一个播放按钮。然后,将绝对定位分配给两个部分。调整覆盖以覆盖整个图像并更改其不透明度,以便下图显示。接下来,将稀松布约束设置为左、右、上和下,使其保持其父级的比例。最后,将播放按钮放在中间,并将其约束设置为水平和垂直居中。

带叠加层的视频组件
带叠加层的视频组件

现在你有了一个通用组件,你也可以在你的响应列表中使用它。

响应式视频列表
响应式视频列表

结论

Figma 正在逐步发展,并且一直在添加新功能。Config 2022 期间引入的自动布局更新无疑将使构造对象变得更加容易,因为组件不再需要额外的框架来处理约束。这是个好消息,因为现在我们可以不再是黑客,而是专注于成为设计师

作者:Anna Rzepka,如若转载,请注明出处:https://uxdesign.cc/absolute-positioning-in-figma-cc5cb0a299c6

(0)
上一篇 2022年5月25日 下午3:41
下一篇 2022年5月26日 上午11:07

相关推荐

发表评论

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