教程丨Figma Suggest Auto Layout功能详解

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

Figma Suggest Auto Layout_2.jpg

Figma 最新推出的Suggest Auto Layout功能大大简化了创建响应式设计的过程,提高了设计师的工作效率。本文将详细介绍这个功能的使用方法及其优势。

  1. 什么是 Suggest Auto Layout?

Suggest Auto Layout 是 Figma 的一项智能功能,它能自动为您的设计元素创建多层嵌套的 Auto Layout 框架。这个功能通过分析您的设计结构,推断出最合适的 Auto Layout 配置,从而快速创建响应式设计。

使用方法:

  • 选择目标框架

  • 右击 > More Layout Options > Suggest Auto Layout

  • 或使用快捷键:Control + Shift + A(Windows)/ Command + Shift + A(Mac)

    Figma Suggest Auto Layout_6.png

  1. Suggest Auto Layout 的优势

a) 节省时间:自动创建复杂的 Auto Layout 结构,避免手动设置的繁琐过程。
b) 提高效率:快速将静态设计转换为响应式设计。
c) 智能推断:根据设计元素的位置和关系,创建最合适的 Auto Layout 结构。
d) 灵活性:生成的 Auto Layout 结构可以进一步调整和优化。

  1. 实际应用示例

让我们通过一个实际的例子来看看 Suggest Auto Layout 是如何工作的:

步骤 1:创建基本卡片设计

  • 绘制一个矩形作为背景

  • 添加标题、副标题和图标等元素

    Figma Suggest Auto Layout_1.png

步骤2:应用普通的 Auto Layout

在我们使用 Suggest Auto Layout 之前,让我们先看看应用普通 Auto Layout 会产生什么效果:

  • 选择整个卡片设计

  • 使用快捷键 Shift + A 应用普通的 Auto Layout

    Figma Suggest Auto Layout_3.png

您会注意到,普通的 Auto Layout 可能会产生以下结果:

  • 所有元素被包裹在一个单一的 Auto Layout 框架中

  • 元素可能会堆叠在一起或排列不当

  • 响应式行为可能不如预期,需要大量手动调整

这种结果通常需要设计师花费额外的时间来重新组织和调整布局,以实现所需的响应式效果。

步骤 3:应用 Suggest Auto Layout
现在,让我们看看 Suggest Auto Layout 如何改善这一过程:

  • 选择整个卡片设计

  • 使用快捷键 Control + Shift + A(Windows)/ Command + Shift + A(Mac)

    Figma Suggest Auto Layout_7.png

通过对比,您可以清楚地看到 Suggest Auto Layout 的优势:

  • 自动创建多层嵌套的 Auto Layout 结构

  • 更智能地组织设计元素

  • 实现更好的响应式行为,减少手动调整的需求

其他技巧

a) duplicator复制器功能

  1. 复制创建好的卡片,得到两个相同的卡片

  2. 将两个卡片放入一个新的自动布局框架(使用 Shift + A)

  3. 注意出现的复制器(duplicator)选项,底部蓝色手柄

    Figma Suggest Auto Layout_10.png

  4. 拖动复制器,快速创建多个卡片副本

    Figma Suggest Auto Layout_11.png

b) 移除 Auto Layout:

  • 右击 > More Layout Options > Remove Auto Layout

  • 适用于需要恢复静态框架的情况

    Figma Suggest Auto Layout_14.png

Figma 的 Suggest Auto Layout 功能大大简化了创建响应式设计的过程,与普通的 Auto Layout 相比,Suggest Auto Layout 能更智能地创建复杂的布局结构,节省了大量的手动调整时间。随着对这个功能的熟悉和掌握,您将能够更快速、更高效地创建灵活且专业的设计。

希望这篇文章对您深入了解和使用 Figma 的 Suggest Auto Layout 功能有所帮助。

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作