如果你最近打开 Figma发现界面里多了一些新按钮或者尝试调整组件间距时感觉和以前不太一样了——别担心这不是你的错觉。Figma 近期对Auto Layout功能进行了一次堪称“史诗级”的更新同时可嵌套文件夹和新像素等特性也悄然上线。对于习惯了旧版工作流的 UI/UX 设计师和前端开发者来说这些改动既是效率的福音也可能带来短暂的“阵痛”。很多人可能觉得Auto Layout 不就是个自动排列和对齐的工具吗这次更新能有多大变化但事实是这次改动触及了 Figma 布局逻辑的核心。它不再仅仅是“自动”而是变得更“智能”、更“结构化”。过去我们可能需要用多个 Frame 嵌套和复杂的约束来模拟一个灵活的列表项现在一个 Auto Layout 容器就能搞定并且能像代码中的 Flexbox 一样实现更精细的内外边距控制。本文将为你深度解析 Figma 这次更新的核心全新的 Auto Layout 模型。我会带你从“为什么改”开始理解其背后的设计哲学然后手把手演示如何运用新功能如Spacing与Padding的分离、Absolute Position子元素来重构你的设计组件。同时我们也会探讨可嵌套文件夹如何彻底改变你的项目资产管理方式以及新像素对交付精度的影响。无论你是想快速上手新功能还是担心旧项目迁移会出问题这篇文章都将提供清晰的路径和可落地的实践方案。1. 这次更新到底解决了什么痛点在深入细节之前我们首先要明白Figma 的这次更新绝非简单的功能叠加而是针对现代设计系统中日益复杂的组件化和响应式需求进行的一次底层逻辑重塑。旧版 Auto Layout 的核心痛点内外间距混淆过去的Spacing参数同时控制子元素之间的间隙Gap和容器内边距Padding。这导致一个常见困境当你需要调整列表项内部的间距时很可能不小心破坏了容器与外部元素的边距反之亦然。布局灵活性不足子元素一旦放入 Auto Layout 容器就必须严格遵守流式布局无法实现“部分元素绝对定位”的效果。比如你想在一个卡片容器内将一个角标图标固定在右上角其他内容流式排列旧版 Auto Layout 几乎无法优雅实现。嵌套结构臃肿为了实现复杂布局设计师不得不创建多层嵌套的 Frame 和 Auto Layout 容器导致图层结构异常复杂维护和修改成本极高。新版更新带来的核心改进Spacing与Padding分离这是最关键的改变。现在你可以独立控制子元素间的距离Spacing和容器内部的留白Padding。这使组件的布局逻辑更清晰更贴近 CSS 中的gap和padding属性。支持Absolute Position现在Auto Layout 容器内的子元素可以设置为“绝对定位”。这意味着你可以在一个流式布局的容器中固定某个特定元素如悬浮按钮、状态角标极大地增强了布局的表现力。更直观的尺寸控制对容器和子元素的宽度Width和高度Height模式如Hug Contents,Fill Container,Fixed Size的交互更加直观减少了猜测。简单来说这次更新让 Figma 的布局引擎向 Web 前端标准如 Flexbox又迈进了一大步使得“设计”与“开发”之间的鸿沟变得更小。设计师能构建出更高保真、更易于开发实现的组件。2. 核心概念解析新旧 Auto Layout 对比理解新功能最好的方式是与旧版进行对比。我们通过一个简单的按钮组件来拆解。旧版 Auto Layout 按钮简化模型你有一个 Frame设置为 Auto Layout水平方向。里面有一个图标和一个文本。你设置Spacing为8Padding为16。这里的Padding实际上是四周统一的。如果你想图标离左边近一点文本离右边近一点就需要额外嵌套 Frame 或者使用“Spacing”来模拟非常别扭。新版 Auto Layout 按钮同样一个 Frame开启 Auto Layout。你会发现右侧面板出现了两个独立区域Spacing和Padding。Spacing: 8// 这仅控制图标和文本之间的水平距离。Padding: 16// 这仅控制容器边缘到内部所有内容图标文本的边距。更重要的是Padding可以分别设置上、右、下、左四个方向的值例如16, 24, 16, 24实现不对称的内边距这在实际设计中极为常见。为了更清晰我们用表格对比关键变化特性旧版 Auto Layout新版 Auto Layout带来的好处间距控制一个Spacing参数混合控制子项间隙和边距。明确分离为Spacing(子项间隙) 和Padding(容器内边距)。布局意图更清晰修改更安全更符合开发思维。子元素定位所有子元素必须遵循流式布局。子元素可设置为Absolute Position绝对定位。实现悬浮元素、固定角标等复杂效果无需破坏性嵌套。Padding 设置通常只能统一设置四个方向的值。可以独立设置上、右、下、左四个方向的值。轻松实现不对称设计减少不必要的辅助形状。布局预测性多层嵌套时尺寸计算有时不直观。尺寸模式Hug/Fill/Fixed的交互反馈更即时、准确。减少布局调试时间提高效率。这个变化看似细微但它从根本上改变了我们构建可复用组件的方式。它鼓励更扁平、更语义化的图层结构。3. 环境准备认识你的 Figma 版本与文件在开始实操前我们需要确认环境。本次更新是逐步推送的确保你使用的是最新版本。检查 Figma 版本Figma 是基于 Web 的应用通常会自动更新。你可以通过点击界面左上角的Figma菜单选择Help-About Figma查看当前版本。只要你的账号在更新推送范围内就能看到新功能。识别新功能界面选中任何一个 Frame 或 Group在右侧设计面板中如果你看到Auto Layout区域下Spacing和Padding是分开的两个输入框并且Padding旁边有一个“四向”图标点击可展开独立设置那么你正在使用新版。在图层列表中当一个元素处于 Auto Layout 容器内时其右侧可能会显示一个定位图标如十字准星点击可将该元素设为Absolute Position。文件兼容性用新版 Figma 打开旧文件原有的 Auto Layout 会自动兼容但参数会以新的方式呈现例如旧的Padding可能会被折算到新的Padding中。建议在操作前为重要的旧设计文件创建一个副本在新副本中进行迁移和练习。4. 核心流程拆解用新 Auto Layout 重构一个列表卡片理论说得再多不如动手做一遍。让我们用一个常见的“用户信息卡片”作为案例它包含头像、姓名、标签和操作按钮需要良好的对齐和灵活的间距。目标创建一个宽度自适应、内容垂直排列的卡片其中头像固定大小姓名和标签左对齐操作按钮右对齐并且标签可能有多行。旧方法嵌套地狱创建一个主 Frame卡片容器。里面再建一个水平方向的 Auto Layout Frame内容行。内容行左边放头像和文字组又是一个垂直 Auto Layout右边放按钮。为了控制文字组内部的上下间距可能还需要更多嵌套。新方法扁平清晰步骤 1创建基础容器并设置 Auto Layout使用Frame工具F画一个矩形框。在右侧面板点击Auto layout旁边的号。方向设置为Vertical垂直。这时你会看到独立的Spacing和Padding设置。步骤 2添加并排列内容在容器内放入一个Ellipse作为头像设置固定尺寸如40x40。放入一个Text图层输入“张三”。再放入一个Text图层输入“前端工程师 | 热衷于设计系统”这是一个可能换行的长标签。放入一个简单的Rectangle作为按钮写上“关注”。现在所有元素应该垂直排列在一起。步骤 3应用新的 Spacing 和 Padding选中整个 Auto Layout 容器。在右侧面板设置Spacing为12。这会让头像、姓名、标签、按钮之间的垂直距离都是 12px。设置Padding为16。你可以点击Padding旁边的“四向”图标展开独立设置。假设我们想要左右边距大上下边距小可以设置为Top: 12,Right: 20,Bottom: 12,Left: 20。步骤 4实现水平分组与对齐关键现在的布局是垂直的但我们需要姓名/标签左对齐按钮右对齐。选中“张三”姓名和“前端工程师...”标签这两个文本图层。右键选择Group selection或按CtrlG/CmdG。你会发现这个 Group 自动成为了 Auto Layout 容器的一个子项。重点来了这个 Group 本身也可以拥有 Auto Layout。保持这个 Group 被选中在右侧面板点击Auto layout的号将其也变为一个 Auto Layout 容器方向设为Vertical。现在姓名和标签在这个子容器内垂直排列。同时我们之前为父容器设置的Spacing: 12现在作用在三个子项上头像、文字Group、按钮。而文字 Group 内部的间距需要单独设置。选中文字Group设置其Spacing为4控制姓名和标签的间距。它的Padding可以保持为0。步骤 5使用绝对定位实现角标假设我们要在头像右上角加一个“在线”绿点。在头像内部或旁边画一个小的绿色圆形。将这个绿色圆形拖入最外层的垂直 Auto Layout 容器中使其与头像、文字Group、按钮成为同级。选中这个绿色圆形在右侧面板找到Layout部分可能在Auto Layout下方你会看到一个定位图标。点击它在下拉菜单中选择Absolute Position。现在这个绿点脱离了流式布局。你可以用鼠标随意拖动它将其精准定位到头像的右上角。它的位置是相对于父容器卡片的。至此一个结构清晰、功能完善的卡片就完成了。整个图层结构比旧方法扁平得多且每个部分的间距控制都独立而精确。5. 可嵌套文件夹如何高效管理你的设计资产如果说 Auto Layout 的更新是“武器”升级那么可嵌套文件夹就是“弹药库”的重组。它解决了 Figma 长期以来项目文件杂乱无章的痛点。旧痛点所有页面Pages和组件Components都只能平铺或者通过命名前缀如01_Buttons/、02_Forms/来模拟结构查找和管理非常低效。新能力你现在可以在左侧的Layers或Assets面板中像在电脑文件夹中一样创建文件夹并在文件夹内再创建子文件夹实现无限层级的嵌套。最佳实践操作指南为设计系统创建结构在Assets组件库面板点击顶部的···菜单选择Create folder命名为Foundation。在Foundation文件夹内再创建子文件夹Colors、Typography、Icons、Grids。将对应的颜色样式、文本样式、图标组件、布局网格分别拖入这些子文件夹。这样团队成员在调用时结构一目了然。组织页面在Pages面板你可以为一个大项目创建主文件夹如电商平台 Redesign。在里面创建子文件夹0_Research Wireframes、1_Desktop、2_Mobile、3_Components。将相关的页面拖入对应的文件夹。这比一长串页面列表要清晰得多。在文件内使用文件夹分组图层在画布上选中多个相关的图层或 Frame。右键选择Group selection然后不要松手继续右键这个新创建的 Group选择Create folder。这个 Group 会变成一个文件夹图标双击可以展开/收起内部所有内容。这对于整理复杂的画板内容如包含多个状态的原型非常有用。迁移旧项目建议花一些时间为你的核心项目文件建立文件夹结构。可以从最常用的组件库开始。良好的结构本身就是一种文档能极大提升团队协作效率。6. 新像素Pixels与交付精度“新像素”这个说法可能有些模糊它通常指的是 Figma 在涉及像素对齐、导出和开发交付时的一些精度改进和最佳实践。对于设计师和开发者而言关注以下几点至关重要像素对齐与半像素Figma 默认使用像素px作为单位。确保你的图形、Frame 尺寸、位置坐标都是整数避免出现100.5px这样的值。非整数像素在导出为位图如 PNG时可能导致边缘模糊在开发实现时也可能引起不必要的抗锯齿问题。使用Align to pixel grid功能可在视图设置中开启来辅助。导出设置当导出资产时在导出设置中确认尺寸是预期的整数倍如1x,2x,3x。对于图标建议始终导出SVG格式以保持矢量清晰度对于需要特定尺寸的图片导出PNG并选择对应倍数。与开发插件的协作使用如Figma to Code、Anima等插件时清晰的 Auto Layout 结构和整数像素值能生成更干净、更准确的代码CSS/React 等。实操检查选中一个元素查看右侧面板Design标签下的X,Y,Width,Height值确保它们都是整数。7. 常见问题与排查思路在适应新功能的过程中你可能会遇到一些困惑。下表列出了常见问题及解决方法问题现象可能原因排查方式解决方案找不到Spacing和Padding分开的选项1. 你的 Figma 账号尚未收到更新。2. 你选中的对象不是 Frame 或 Group或者是未开启 Auto Layout 的 Frame。1. 检查 Figma 版本。2. 确认选中对象后右侧面板是否有Auto layout区域。1. 等待更新推送或尝试退出重登。2. 将对象转换为 Frame (CtrlAltG/CmdOptG) 或 Group然后点击添加 Auto Layout。设置了Absolute Position的元素跑出画板绝对定位元素的坐标 (X, Y) 是相对于其父容器Auto Layout Frame的左上角计算的。检查父容器的Padding值。绝对定位元素的X0, Y0会紧贴父容器内容区域扣除 Padding 后的左上角。调整绝对定位元素的X和Y值或调整父容器的Padding为绝对定位元素留出空间。嵌套的 Auto Layout 尺寸计算很奇怪子 Auto Layout 容器的尺寸模式Hug或Fill与父容器的设置冲突。逐层检查每个 Auto Layout 容器的方向、Spacing、Padding以及其子项的尺寸模式。理解“由内向外”的布局计算逻辑。内部子容器应优先设置为Hug Contents让父容器来分配剩余空间。多用T(横向) 和ShiftT(纵向) 快捷键快速切换尺寸模式。从旧文件迁移后布局看起来“错位”了旧文件的 Auto Layout 参数被转换到新模型时可能因为内外边距的分离而产生了视觉差异。仔细对比新旧文件重点关注容器的总尺寸和内部元素的相对位置。不要试图完全还原旧参数。基于新的Spacing和Padding逻辑重新调整数值以达到相同的视觉效果。这通常能得到更清晰、更易维护的结构。可嵌套文件夹无法拖动组件/页面可能试图在错误的上下文中拖动或者目标文件夹处于折叠状态。确保在Assets面板拖动组件在Pages面板拖动页面。拖动时等待目标文件夹高亮再松开。拖动时将组件/页面悬停在目标文件夹名称上直到其背景高亮然后松开鼠标。对于多层嵌套可以逐级展开文件夹后再拖入。8. 最佳实践与工程建议掌握新功能后遵循以下最佳实践能让你的设计文件更专业、更高效。命名规范为每个 Auto Layout 容器赋予有意义的名称如按钮 / 主要、卡片 / 用户信息、列表项 / 带图标。在嵌套文件夹中使用一致的命名前缀或数字排序如01_原子元素、02_分子组件、03_模块来维持顺序。构建可伸缩的组件利用新的Padding独立设置创建内容区域可变的组件。例如一个卡片组件其Padding的左右值固定上下值根据内容自适应或固定这样无论内容多少卡片都能保持美观。将经常需要绝对定位的元素如角标、装饰点制作成组件并预设为Absolute Position方便随时调用和替换。为开发做好准备在将设计稿交付给前端工程师时主动说明你使用了新的 Auto Layout 结构。可以分享一个简单的示例解释Spacing对应 CSS 的gapPadding对应padding绝对定位子元素需要position: absolute。使用 Figma 的Inspect面板让开发者清晰地看到每个容器的布局属性。团队协作流程在团队中建立关于使用新 Auto Layout 和嵌套文件夹的简单规范。例如规定所有新组件必须使用分离的Spacing和Padding。利用嵌套文件夹为设计系统建立单一可信来源并通过Library发布。确保团队成员都从库中调用而非本地创建。性能考量虽然新 Auto Layout 更强大但过度复杂的嵌套例如超过5-6层仍可能影响大型文件的性能。在满足需求的前提下尽量保持结构扁平。定期使用CtrlAltL(CmdOptL在 Mac) 整理图层名称并归档或删除未使用的页面和组件保持文件整洁。9. 总结与后续学习方向Figma 的这次更新特别是 Auto Layout 的重构标志着一个重要的转变设计工具正从“模拟视觉”走向“定义规则”。它要求设计师不仅思考“看起来怎么样”更要思考“如何构建以及如何变化”。通过本文你应该已经掌握了理解核心改动Spacing与Padding的分离、Absolute Position的支持是本次更新的精髓。掌握重构方法通过一个列表卡片案例学会了如何用更扁平的结构替代旧的嵌套模式。管理设计资产利用可嵌套文件夹为你的组件库和项目页面建立清晰的层级结构。规避常见陷阱了解了迁移和操作中可能遇到的问题及解决方法。要真正融会贯通建议你动手改造一个旧组件选择你项目中最常用的一个按钮或卡片用新 Auto Layout 重新构建它对比前后的图层结构和易用性。探索复杂布局尝试用新功能构建一个完整的、包含头像、多行文本、标签和操作按钮的评论列表或者一个仪表盘的卡片网格。关注开发实现与你的前端伙伴坐在一起看看你新构建的组件在 Inspect 面板中生成的 CSS 属性是否更合理、更易于实现。设计工具的进化最终是为了让创造更顺畅让想法落地更快捷。这次更新或许需要你改变一些习惯但它带来的长期收益——更清晰的设计系统、更高效的协作、更精准的交付——无疑是值得投入的。建议将本文作为手边参考在实际项目中大胆应用和验证这些新特性。