这期Figma学习笔记--02我打算不再聊画布、钢笔、布尔运算这些入门级操作了。上一期把这些基础功能过了一遍当时觉得自己什么都学会了可真到拿Figma完整做一个页面时才意识到工具操作只占很小一部分真正花时间的是“怎么布局、怎么复用、怎么统一、怎么让页面动起来”。这期整理了连续两周高强度使用后的记录自动布局、组件与变体、样式与本地变量、原型交互、插件提效最后用一个“个人中心”页面把这些功能全部串起来跑了一遍完整流程。如果你是刚结束基础操作的学习者这篇笔记正好可以接上如果已经会组件和自动布局可以直接跳到后面看变量管理和原型动画部分那里有反复试错后总结出来的细节坑。每个部分我尽量讲清楚“为什么这么做”不是单纯记操作步骤——因为后面你会发现Figma真正值钱的地方不是某个按钮怎么点而是一整套设计组织思维。1. 这期笔记的学习主线与目标1.1 为什么从画图思维切换到搭建思维刚开始用Figma最容易犯的毛病是把它当成一个可以无限缩放的画图工具拉几个矩形当卡片背景再用文本工具戳几个标题最后靠眼睛对对齐。这样画出来的页面在静态状态下看起来没问题但只要数据一变、文字变长、图片替换整个布局马上崩掉要花大量时间重新摆位置。真正的转机发生在我强迫自己改用自动布局和组件之后。举一个最简单的例子做一张商品卡片传统画法是一个矩形背景、一张图、两行文字、一个按钮逐个摆放然后用自动布局的做法是先创建一个纵向容器把图片、标题区、操作区依次放进去设置好间距和边距。图片来了、文字长了、按钮位置变了卡片会自己长高或者压缩永远不乱。这个思维改变很重要Figma不是用来“画界面”的而是用来“搭界面”的。画图思维是静态的搭积木思维是动态的。一旦你开始用容器、嵌套、约束来思考页面结构后面做组件、做变体、做设计系统就都顺理成章了。1.2 这期覆盖的内容模块这一篇笔记里我给自己规划了五个主要学习模块也是实际工作里出现频率最高的部分。模块核心功能解决的核心问题自动布局让一个容器内的元素自动排列、自动适应内容页面改起来不崩新增内容后结构不乱组件与变体把重复模块固化成可复用零件支持多状态按钮、卡片、导航栏不用反复画样式与本地变量统一管理颜色、字体、间距、圆角等设计参数全项目改主题色只需要改一处原型交互为静态页面添加跳转、滚动、动画反馈让评审和使用者提前体验产品流程插件与快捷操作用外部能力补充内置功能批量命名、图标整理、切图这类重复劳动交给工具每个模块都不难但组合起来力量很大。我的建议是不要急着把功能全部学完而是先做到能独立完成一个带交互的完整页面再回头补细节。1.3 适合的读者范围这篇笔记的定位是从入门迈向进阶的衔接。如果只会基础绘制建议先熟悉选区、图层、画板这些概念再看本文第2、3章会比较有体感。如果已经会组件和自动布局重点看第4章变量管理、第5章原生动画、第6章插件边界这些属于用一段时间之后才会遇到的深水区。如果是产品经理或者开发同学想了解设计端的协作逻辑前3章值得读能帮你理解为什么设计师要反复强调命名、规范、组件库。2. 自动布局让界面像书架一样自动规整2.1 用生活类比理解自动布局的核心机制自动布局英文名是Auto Layout它解决的是一件事让容器内部的元素不再靠手工微调位置而是按照规则自动排列和响应内容变化。我每次给别人解释自动布局都喜欢拿书架类比。你有一个书架每层放一排书书和书之间本来留了固定空隙。这时有人又递给你一本新书你希望的是其他书自动往旁边挪一挪而不是你把一整排书全部拿出来重新排。自动布局做的就是这个你在一个Frame里放入若干元素设置好排列方向、间距、内边距之后往里面塞新的文本、图片、按钮其他元素自动让位不需要你再拖一遍。这套逻辑的底层其实是网页开发里Flexbox的思想横向排列、纵向排列、主轴对齐、交叉轴对齐、内容撑开、容器填满。所以如果你有前端基础理解自动布局几乎是零成本没有也没关系把书架的例子记住就够用了。2.2 自动布局参数面板逐项拆解在Figma里选中一个已经添加了自动布局的Frame右侧属性面板会出现一排关键参数。我按我自己的理解逐个拆开。第一个是布局方向。Horizontal是横向排布元素从左到右Vertical是纵向排布元素从上到下。实际页面里纵向用得最多比如卡片内容从上到下依次是图、标题、描述、按钮横向则适合导航栏、按钮组、标签栏这类一排元素。第二个是内边距。它的作用类似手机壳和屏幕之间的缓冲区域控制容器边缘和内部元素之间的距离。四个方向分别设置也可以点中间链接图标统一调整。很多初学者做出来的页面文字紧贴卡片边缘就是漏了内边距的设置。第三个是元素间距。它控制容器内相邻元素之间的空隙注意它不是内边距只作用于元素和元素之间。间距设置得好整组元素看起来透气舒服设置不好要么挤在一起要么空白过大。第四个是对齐方式。容器内元素在交叉轴上的对齐关系常见有顶部对齐、居中、底部对齐。纵向容器里这个参数控制元素在水平方向是靠左、靠右还是居中横向容器里则控制垂直方向。最后是尺寸行为也是最容易混淆的部分。Fixed表示这个元素保持固定宽度不管容器怎么变它都不变Hug contents表示元素宽度由内容撑开文字越多整体越宽Fill container表示元素填满整个容器容器变宽它也跟着变宽。2.3 尺寸行为组合与嵌套实战尺寸行为组合起来能玩出很多实用的布局效果。我做一个页面顶栏举例左侧是固定的返回箭头中间是标题右侧是一个操作按钮。整个顶栏用横向自动布局箭头和按钮设成Hug标题设成Fill。这样无论标题文字多长它都会把中间空间填满左右两个元素始终固定在两侧不会出现标题长一点就把按钮挤出屏幕的问题。这只是单层容器更多时候需要嵌套。比如一个纵向卡片容器里图片区用固定高度文本区用Hug操作按钮区再嵌一个横向自动布局。嵌套的层级一多性能消耗会变大图层结构也开始复杂。我的习惯是给每个容器起好名称命名格式类似“卡片 / 内容区 / 标题区”这样可以保证后期改起来不晕。嵌套自动布局时还要注意父容器和子容器之间的约束关系。子元素设成Fill container它就会跟着父容器走设成Hug它就会以自身内容为准。把这两层关系理顺你就能像搭积木一样做出非常灵活的页面内容随便增减结构都不会坏。2.4 我踩过的自动布局坑这块全是实战经验每一个都花了我不少时间排查。第一个坑是图片在自动布局里不听话。把一张图片拖进自动布局容器后它的尺寸行为默认可能是Fixed但你拖动图片角上的点想随意缩放时容器里的布局会跟着跳动。后来我发现不能直接拖动图片调整大小而要在尺寸行为里改成Fill或者设置固定宽高图片才会按照你预期的方式撑满区域。第二个坑是按钮文字变长后整个容器无限增宽。有一次做一个按钮组件文字从“确定”改成“确认提交”按钮宽度失控页面布局全部被撑坏。原因是我把按钮宽度设成了Hug而Hug遇到长文本会一直扩张。解决方案是给按钮设定一个最大宽度或者直接把宽度改成Fill让它限制在容器范围内。第三个坑是嵌套层级太深导致页面卡顿。一个复杂的列表页我嵌套了七八层自动布局结果文件操作越来越卡拖动元素还有明显延迟。后来我把不必要的中间容器合并能用一层解决的就不要套两层页面流畅性立刻恢复。自动布局虽然方便但也不是越深越好结构简洁永远是第一原则。3. 组件与变体把重复设计固化成可调用零件3.1 组件和实例到底是什么关系组件Component是Figma里最重要的概念之一它让你把一组已经设计好的图层保存成可复用的零件。用的时候只需要拖出来得到的就是一个实例Instance。实例像组件的一个分身它有独立的修改空间但始终保持和组件之间的关联。可以把它理解成编程里的“类”和“对象”组件是类是设计模板实例是对象是模板具体出现的每一个形态。你改了组件所有实例会自动同步更新你只改某一个实例的文字或颜色其他实例不受影响。这就是它比CtrlC、CtrlV强的地方——如果你用复制粘贴复制了20个按钮某天要把按钮圆角从8改成12你要手动改20个地方改成组件你只需要改一次。这里要特别强调一个习惯凡是会在页面里出现两次以上的模块都值得做成组件。导航栏、标签页、卡片、按钮、输入框、弹窗这些高频出现的元素能组件化就组件化越早建立这个意识后面积累下来节省的时间越可观。3.2 从零创建一个带状态的按钮组件简单演示一个按钮组件的完整创建过程这是我这期练习里最典型的一个案例。第一步画一个背景矩形设置好圆角、填充色、阴影效果再用文本工具输入按钮文字把背景和文字一起拖进一个横向自动布局容器设置好内边距。这里自动布局负责让按钮宽度随文字伸缩后续做不同长度文案时非常方便。第二步选中这个组合好的图层点击顶部工具栏的Create Component按钮或者右键选择Create Component。创建完组件后右侧属性面板会多出“组件”相关设置同时在图层面板会出现一个四菱形的主组件图标。第三步给组件增加状态变体。选中主组件后点击属性面板里“变体”旁边的加号图标Figma会创建一个新的变体属性可以命名为State。然后在下面新建一个变体复制一份主线绣把填充色、文字颜色改成悬停状态的颜色再改名为Hover。第四步把主组件重命名为Default。这时你会发现变体面板自动生成了“StateDefault”和“StateHover”两个变体。回到画布上选中任意实例右侧会出现一个State下拉框切换下拉就能在两种状态之间切换不需要再维护两套按钮图层。这个流程看起来简单但真正上手做一遍你对“变体”的理解会比看十遍教程都深。3.3 变体属性四种类型怎么配变体属性是组件灵活性的核心Figma提供了四种属性类型每一种负责解决不同的问题。第一种是变体属性适合描述组件的状态或尺寸。比如按钮的Default、Hover、Pressed、Disabled或者尺寸的Small、Medium、Large。这类属性通过下拉菜单切换逻辑清晰。第二种是布尔属性。适合控制某个元素是否显示。比如图标是否展示、尾部的箭头是否存在。只需要在组件里选中某个图层添加布尔属性并命名实例面板就会出现一个开关开和关直接控制这个图层的可见性。第三种是文本属性。适合让每个实例的文字内容自由修改。比如一个列表行组件标题、说明文字都配置成文本属性每次拖出一个新实例就能直接在右侧属性面板里填内容不需要双击进入图层去改。第四种是实例切换属性。它的意思是允许某个区域替换成另一个组件实例。比如一个卡片组件里可能需要放不同类型的内容图标你可以在卡片内部放置一个图标组件占位然后添加实例切换属性到时候就能在下拉菜单里把占位图标换成任意不同的图标。用好这四种属性一个组件就可以覆盖大量变化场景整个页面的可维护性会高很多。3.4 组件团队协作管理经验组件在个人项目里用起来很顺手但一旦拿到团队项目里就涉及很多管理规范这是我最近最深的体会。第一命名要极其清晰。组件名称里包含类别、功能、状态比如“按钮 / 主按钮 / 默认态”。这样在组件面板里检索的时候才能快速定位也不会出现一堆叫“副本 2”的混乱组件。可以约定命名规范比如大类放在最前面用斜杠分层多人协作时基本不会混淆。第二主组件不要随便被改动。团队文件里如果任何人都能修改主组件很容易造成样式悄悄变化。比较好的做法是统一由一个同学维护主组件其他人只使用实例如果要调整组件先沟通再动手改完及时同步团队。第三组件库要发布成团队库。Figma允许把组件发布到团队库Team Library发布之后其他文件可以引用这套组件。这样做的好处是全公司的页面都能基于同一套基础组件品牌一致性会相当稳定。如果发现某个组件有bug在库文件里修改再发布一次所有引用它的文件都能收到更新提示逐个点击更新即可。4. 样式与本地变量让颜色字号从“记”变成“管”4.1 颜色、文本、效果样式怎么建做很多页面之后我发现一个明显问题相同的颜色在不同页面里总会有轻微偏差。有的地方用的蓝色是#0F6FFF另一个地方可能是#0970F0肉眼几乎分辨不出但真到上线前走查就会发现这些细节让人抓狂。样式功能就是解决这个问题的。在Figma里给一个图层设置好颜色后点击属性面板右侧的样式图标选择“添加颜色样式”给这个颜色命名比如“品牌主色 / 常规”之后任何元素要使用这个颜色直接点样式库就能套用。最爽的地方是如果项目改版、品牌色从深蓝换成了湖蓝只需要改这一个样式所有引用它的图层全都会同步更新不用再满画布找颜色。文本样式也是同样道理。把标题、正文、辅助说明各自的字体、字号、行高、字距存成样式之后所有页面都能一键套用文字层级在视觉上会非常统一。效果样式的逻辑也一模一样阴影、模糊这类效果可以统一管理避免每个阴影都手工调一遍产生大量差异。4.2 设计令牌与本地变量实操如果说样式是“管颜色”那本地变量就是“管设计决策的源头”。本地变量可以存储颜色、数字、字符串和布尔值在Figma的“本地变量”面板里可以统一维护。我在实际项目里最先用起来的是颜色变量。方式是先建立基础色板变量比如“灰阶 50 #F5F6F7”“灰阶 100 #E8EAED”再建立语义化变量比如“背景色 / 页面 灰阶50”“文字 / 主要 灰阶900”。这样图层上并不直接使用基础色而是使用语义变量。未来如果要做暗色模式只需要给同一组变量切换不同的模式整个文件瞬间就能出现不同主题。间距变量也很实用。设计一套间距序列4、8、12、16、24、32把每种间距存成变量在自动布局里设置间距时直接引用。这样页面上不会出现6px、13px这种随缘间距所有间隙都会落到同一套节奏上页面整体精致感会大大提升。字体变量同样值得做把常用字号从10到40分别定义成变量在文本样式里引用这些变量形成“变量 → 样式 → 图层”的完整链条。第一次搭这套系统比较繁琐但搭完之后改主题、改字重、适配多端都非常快。4.3 样式库与项目文件如何联动本地变量和样式建好之后还要考虑怎么在多个文件之间共享。只呆在一个文件里这些规范价值有限真正厉害的是团队所有项目的页面都在使用同一套变量。Figma的做法是把样式和变量发布到库然后在其他文件里启用。启用之后画布上的图层、自动布局的间距、原型里的颜色都可以直接引用库里的变量。发布更新后所有启用了该库的文件侧边会出现更新提示设计师可以根据实际情况选择更新或者暂缓。这里有个建议把变量按目录组织好。基础层放品牌色彩和字体语义层放组件相关的颜色和圆角应用层放页面级参数。层级越多越清晰但也不建议一开始就铺太大先做最常用的十来个变量比建三十个用不上的变量更务实。变量贵精不贵多。还有一点启用库之前确认团队里的同学是否都熟悉这套机制。变量和样式对新人来说有一定学习门槛如果团队成员不看文档直接上手容易在图层上写了一堆手工色值把规范体系破坏掉。配合一份简单的使用说明通常会顺利很多。5. 原型交互静态页面开始有手感5.1 页面级跳转与交互触发方式静态页面完成后原型功能能让它“活”起来。Figma原型功能位于右上角Prototype面板点开之后选中任意图层或画板按住圆圈图标拖一条线到目标画板就建立了一个交互连接。交互触发方式有很多种常用的是点击、悬停、拖动、键盘输入。点击是最基础的比如点击登录按钮跳转到首页悬停适合做提示效果比如鼠标放在菜单项上显示下拉拖动适合做轮播图或者侧边栏抽屉键盘输入适合表单页面用户输入文字后按回车跳转。我对这套功能最大的体会是它不是给开发做最终交互稿的而是给产品评审和用户测试用的。所以在搭原型的时候不需要追求每个元素都可点击把主线流程打通、边缘流程能走到就达到了阶段性的验证目的。把主要用户路径用几条连线串起来比把所有页面铺满连线更清晰。5.2 动画参数、缓动与Smart Animate技巧原型里最容易忽略但其实最出效果的是动画。Figma内置的Smart Animate功能可以在两个画板之间自动识别相同的图层名和结构然后平滑地过渡位置、大小、透明度这些属性。使用Smart Animate有个前提两个画板之间的元素名称必须一一对应。比如从列表页进入详情页同一个标题文本在首页叫“标题”在详情页叫“产品标题”Smart Animate就认不出它们会直接生硬跳转。我一开始没反应过来来回跳转都看不出动画后来才意识到图层命名必须完全一致。除了Smart Animate动画参数的调节也值得花时间。时长控制动画快慢通常在200到400毫秒之间最有质感缓动函数(Easing)决定运动节奏Linear是匀速Ease Out是减速结束Ease In Out是两端减速。做列表页跳转的时候用Ease Out会比Linear自然得多因为人的视线习惯在结尾处缓冲一下。还有一个技巧是滚动设置。页面内容超过屏幕高度时需要指定滚动方向否则预览时没法上下滑动。在原型属性里给某个区域设置“垂直滚动”并选中固定元素做置顶处理页面滚起来才像真实App。做这个功能的时候配合移动设备预览体验会非常接近真实产品。5.3 用一个完整流程检验原型原型做完以后我喜欢把它当作一个完整产品而不是零散页面来检验。先把主流程全部连起来首页 → 列表 → 详情 → 操作 → 返回。再把每个页面的返回路径补上检查每一步有没有断线。最后用Figma的演示预览功能打开点击一遍看节奏是否流畅。这里有个很容易被忽略的点预览顺序和连线顺序不同。Figma默认按照画板位置来演示不按照连线路径来演示。如果你希望用户按你的核心路径走需要在原型面板里设置合理的Starting Frame并且把画板摆放顺序和连线逻辑对齐。我第一次演示时预览完首页后跳到了旁边的副页面观众一脸懵后来才发现是开始节点设错了。完成这些之后最好再邀请一个不太熟悉这个项目的朋友操作一遍看他能不能自己点击完成整个流程。如果对方会卡住很大概率不是他笨而是原型的路径埋得太隐蔽。交互设计的一个重要目标就是让使用者不需要说明也能走通流程。6. 插件与自定义快捷操作重复劳动交给机器6.1 我筛选和管理插件的原则Figma的插件市场非常大各种插件成千上万。刚开始学的时候我很容易被各种看起来很炫的插件吸引一口气装了一堆结果真正用到的不到五分之一还拖慢了菜单加载速度。后来我给自己定了一个原则只保留那些在每周工作中至少遇到一次且自己手动处理要花超过五分钟的场景对应的插件。换句话说插件只服务于真实痛点不为“可能会用到”安装。现在我的插件列表基本保持在五款以内每一款都确认过使用场景打开率明显提高。选择插件时我更看重维护频率和社区口碑。长期不更新的插件在新的编辑器和运行时环境里容易失效装的时候看着能用过两个月可能就报错。另外插件运行的权限问题必须看仔细涉及读取外部文件、网络请求这类敏感操作的要格外谨慎。6.2 四类高频场景的插件使用思路按我的使用频率最值得推荐的是四类场景的插件思路。第一类是批量重命名。做大型页面时图层经常叫“Frame 128”“Rectangle 55”整理起来非常痛苦。批量重命名类插件可以一键给多个图层添加统一前缀、按层级结构重新命名虽然功能小众但能省下大量整理时间。图层命名规范了后续做组件、做交付、做文档都会顺畅许多。第二类是图标资源管理。很多插件可以直接对接图标库搜索图标后拖进画布不用担心版权和清晰度。个人项目里自己画图标还行项目稍大就特别消耗时间。引入图标资源插件后选图标、换尺寸、改颜色都方便得多。第三类是内容填充。设计表格、列表、简介卡片时需要大量真实文字和图片。内容填充类插件可以一键生成随机用户、随机商品名称、随机头像让页面看起来更真实。相比自己一个一个输入假数据效率差距非常大。第四类是切图导出。开发交付时需要把图层导出成不同倍率的图片切图插件可以按批次快速导出并自动生成多套尺寸和压缩版本。虽然Figma自带导出功能但用了插件之后整个过程可以更自动化尤其适合页面多到想哭的项目。6.3 插件使用中的安全边界插件虽然好用但不能没有边界意识。Figma插件本质上是在你的文件环境里跑的一段脚本它能看到你当前画布的内容也能访问一些外部接口所以来源一定要可靠。我的习惯是优先使用官方插件其次是知名社区里使用人数多的插件确保没有恶意代码。每一次安装前我都会快速看一遍权限说明尤其是那些要求“访问外部API”“发送网络请求”的如果功能本身用不到坚决不装。另一个边界是不要过度依赖插件。曾经有一段时间我为了省事安装了好几个自动布局辅助插件搞得页面结构都很怪异每个插件生成的代码风格不一样后面对接开发时很麻烦。插件可以提效但核心设计能力还是要靠自己对Figma原生功能的掌握盲目依赖外部工具反而是透支效率。7. 一次完整实操从空白文件到可点击的个人中心页7.1 需求拆解与组件规划理论讲了这么多最后用一个完整案例把这些能力串起来。我选择做一个移动端“个人中心”页面因为这个页面结构很典型涵盖的内容足够练习常用功能。需求拆解下来是这样一个顶部导航栏带返回和设置按钮一页用户信息卡片含头像、昵称、简介中间是一组功能入口列表比如订单、收藏、消息、设置底部有一个退出登录按钮。开始动手前先规划组件列表。导航栏可以作为独立组件用户卡片做成组件列表的每一行也做成组件退出按钮用之前做好的按钮组件变体来替换文字。这样规划之后页面搭建就变成了组件摆放而不是从零画起。7.2 页面搭建关键步骤第一步创建一个375x812的移动端画板命名“个人中心 / 基础版”把总布局设为纵向自动布局页边距设为16间距设为12。这样后续往里面塞任何模块都不用手动调整各模块间隔。第二步拖入导航栏组件左侧返回箭头、中间标题“个人中心”、右侧设置图标全部用实例属性提前配置好不需要在画布里额外调整。第三步放入用户卡片组件。卡片包括一个渐变背景头像区域、昵称文本、一行简介文字文字内容通过文本属性修改。卡片内部也使用自动布局这样简介文字变长卡片高度会自适应增长。第四步添加功能列表。列表整体用一个纵向自动布局容器内部放四行列表项组件。列表项组件的结构是一行横向自动布局左侧一个图标、中间一列标题和副标题、右侧一个箭头。通过文本属性和实例切换属性快速更换每一行图标和文字。第五步底部放退出登录按钮直接把按钮组件的实例拖进来把文本改成“退出登录”按钮宽度设为Fill这样它会自动撑满手机屏幕宽度。删掉所有辅助灰块从组件库检查一遍是否所有元素的颜色、字体都引用了样式库中的样式而不是手写值。这一步做下来整个页面的修改速度会比纯静态画法快好几倍。7.3 原型串联与交付前自检页面完成后进入Prototype面板。给导航栏的返回箭头设置跳转到上一页设置按钮跳转到设置页每个列表行点击后跳转到对应的功能页面退出按钮跳转到一个空白确认页。全部连线完成后用演示模式从头到尾跑一遍。演示完不等于交付完成交付前我还会过一遍自检清单。第一图层是否命名清晰组件、样式有没有悬空的重复定义第二页面里有没有用“Fill container”导致个别元素被过度拉伸的情况第三所有文本是否通过文本样式挂到统一字体变量上第四原型连线是否有遗漏的返回路径第五是否有不需要出现在最终交付里的辅助图层如果有就清理干净。自检这五块内容能避免很多交付后被退回修改的情况。做个人中心页的那天我整个流程走下来不到两个小时而用传统画法可能要画一整天。这中间最明显的差距不是在绘图速度上而是当你把组件、样式、变量这些基础建好之后剩下的时间几乎是“搭积木”每一块积木都非常标准。8. 学习过程中的几点真实体会学了这半个月Figma最大的体会是“工具效率和设计规范是同一件事”。以前我也觉得规范是给别人看的要求自己做小项目不需要但通过自动布局和组件库我才发现规范本质上是一种节省自己时间的手段。你越早把重复劳动抽象成组件和样式后面改版、适配、交付就越省力。第二个很直接的体会是在真项目里练习能学到的东西远超看教程。教程通常讲单个功能的操作项目则逼着你做组合决策什么时候用变体、什么时候用布尔属性、是不是要把间距也做成变量这些判断没有标准答案只能靠多做、多犯错、多总结才能形成自己的速度。第三个想分享的小技巧是建一个属于自己的个人积累文件。每次做项目遇到值得复用的组件、巧妙的自动布局结构、满意的变量组织方式都复制到积累文件里。这个文件像是一本设计字典随着时间越来越厚你下一次开新项目的时候可以少走很多弯路。一点实操建议如果你只打算学一个功能我会毫不犹豫推荐自动布局。它是理解现代界面设计逻辑的钥匙也是后续学习组件、变量、设计系统的基础。先花一个完整时间段把自动布局吃透再用组件和变量去巩固它整个Figma的学习路径会顺畅很多。
