写 Figma 学习笔记是给自己定的一个固定输出习惯。上一期我把界面布局、画板、图层、布尔运算这些基础操作梳理了一遍这一期“02”想聊聊真正让 Figma 和传统设计工具有本质区别的东西组件系统、变体、自动布局、约束、原型交互以及多人协作的工程化思路。如果你已经开始用 Figma 画过一些带真实业务的界面但总觉得改起来很费劲、或者原型做出来不像那么回事这篇笔记应该能帮你把效率拉起来。这期笔记更接近“能直接拿回去用”的经验合集而不是功能说明书。我会从一次真实的改稿场景讲起把组件为什么好用、变体怎么设计、自动布局什么时候用、约束怎么配合一整套逻辑串起来。适合已经会新建画板、会用基础绘制工具、但对“组件化”还没有完整概念的设计新手也适合想系统整理自己 Figma 工作流的进阶用户。1. 组件与实例把重复劳动变成一次修改1.1 一个改稿场景如果主色调要换先设想一个几乎人人都会碰到的场景。你花了两天时间把一个后台管理系统的所有页面都画完了里面光是按钮就有几十个散落在表单页、列表页、弹窗里。这时候产品经理走过来说“整体品牌色要换从蓝色改成紫色。”如果没有组件你只能打开每一个页面、每个按钮逐个改填充色改到最后还会漏掉几个角落里的次级按钮。而用组件的话整个流程是选中一个主按钮改填充颜色然后所有页面里的按钮瞬间全部跟着变。这就是组件和实例的价值一句话总结就是“一处修改处处更新”。组件Component相当于一个原件模板实例Instance是原件在画板中的具体化身。原件改属性实例跟着变实例也可以单独覆盖部分属性不影响原件和其他实例。听起来很神奇但它的原理很简单实例里存的是“引用”不是“副本”。就像你在几百份合同上盖同一个章章面上的字是什么所有合同上的印迹就是什么。从学习路径来看我强烈建议新手做完第一套完整界面之后立刻回头把所有重复超过三次的元素做成组件。这个动作会彻底改变你对“改稿”这件事的理解也会让后面的变体、自动布局学起来顺畅很多。1.2 组件与实例创建的标准动作创建组件的方式其实很简单在画板上选中一个或多个元素按键盘快捷键Option Command KMac或Ctrl Alt KWindows或者直接点右侧面板顶部的“组件”图标。执行之后图层面板里这个图层会多出一个像“◇”一样的绿色图标这就表示它已经成为组件原件。有几个细节值得注意。第一可以给组件单独命名命名里用“/”符号可以形成层级比如Button / Primary / Default这样在资产面板里会自动按文件夹折叠团队后期找人方便很多。第二把光标从组件原件上拖出来你会得到它的实例实例的图层左上角会有一个中空的“◇”图标这就是实例的标记看到它你就知道这个元素是从某个原件“复制引用”出来的。第三如果你对自己在原图上做的修改不满意想要强制某个实例回到原件的默认状态右键点击实例选择“返回主组件”Reset Overrides即可。我实际使用中发现有个很多新手会踩的误区直接用快捷键复制粘贴一个组件图层以为这样就产生了一个新的实例。其实复制粘贴得到的仍然是实例仍然受原件控制。如果你想要一个“和现在很像、但之后完全独立”的新原件正确做法是右键实例选择“取消实例关联”Detach Instance把它彻底变成普通图层组再重新创建组件。1.3 实例覆盖的边界在哪里实例虽然受原件控制但它允许一定程度的“局部覆盖”。在 Figma 里选中一个实例右侧面板颜色、文字、填充、边框这些属性都会显示出来改动它们不会回传到原件。最常见的覆盖是改文字内容做了一个.Button组件放到不同页面时把标签文字从“确定”改成“取消”完全没问题。其次是换图标和换颜色状态这些都是日常高频操作。但也有不能乱动的部分。如果你在原件里精心设计了水平居中的布局某个实例上手动把里面的文字左对齐了等原件布局一调整这个实例很可能会变得不伦不类。我的经验是覆盖属性时尽量只碰“内容”和“视觉态”不要碰“结构”。文字、图标、颜色、圆角这类可以直接覆盖嵌套层级、布局方式、是否换行这类最好回原件改。如果你发现自己需要频繁覆盖某个结构属性这其实是设计系统出了问题——说明这个组件该拆分或者该被设计成变体而不是硬用覆盖来解决。2. 变体一个组件多种姿态2.1 为什么需要变体而不是一堆独立组件刚开始做组件时最容易出现的问题是组件数量爆炸。一个按钮有 Primary、Secondary、Danger 三种颜色每种颜色又有 Default、Hover、Pressed、Disabled 四种状态很多人就老老实实做了 12 个互相独立的组件。改起来倒也能用但资产面板里一片混乱调用的时候还得靠肉眼分辨名字。变体Variants就是来解决这个问题的。它允许你把一组相关的组件合并成一个“组件集”通过属性Property来控制切换。依然是按钮的例子你可以定义一个组件集里面有两个属性类型Primary / Secondary / Danger和状态Default / Hover / Pressed / Disabled。放到界面上时不需要去找 12 个分散的组件只需要拖一个按钮组件出来然后在右侧属性面板下拉选择具体是哪一个状态就完了。用变体管理状态还有一个隐藏优势它逼着你把组件的状态设计想清楚。如果没有变体你很容易漏做某个交互状态有了属性面板所有状态一目了然缺没缺一眼就能看出来。而且 Figma 的变体处理逻辑是“同一个组件集里的所有变体图层结构尽量保持一致”这反过来会促使你把代码层面的状态也在视觉上统一起来设计质量会跟着上升。2.2 合并变体组的完整流程把零散组件合并成变体操作并不复杂。先在画板上把要合并的几个组件全部选中然后在右侧面板组件区块的图标旁边找到一个形似“四宫格带加号”的图标点击它选“合并为变体”Combine as variants几个组件就会合并成一个组件集。合并之后右侧会出现属性设置区。默认情况下Figma 会根据你这些变体的差异自动生成属性和属性值比如它发现两个按钮的填充色不一样就可能自动生成一个叫“颜色 1”的属性。但是自动生成的属性名一般不好用你需要手动改点属性名可以重命名点属性值可以改成明确含义。我的建议是直接删掉自动生成的属性按自己的想法重新建立。规则很简单“属性名”是维度“属性值”是这个维度下的具体选项。例如属性名设为类型值设为Primary、Secondary、Danger。属性在右侧面板里的排布顺序是可以拖动的把最常用的维度放上面比如类型放最上面状态放下面的行这样后续在实例上切换时手指少挪一点。合并成组件集之后资产面板里只显示一个条目展开后是组件集的全部变体直接拖出任意一个即可。2.3 变体属性设计要贴近真实状态设计变体属性时不要凭空想一堆层级应该按照产品真实状态建模。登录按钮有哪些状态有默认、悬停、按压、不可用、加载中消息卡片的图标有哪些类型头像、文件、图片、视频把这些状态映射成属性和值组件才会真正好用。属性不只有下拉选择这一种。Figma 里还可以设置布尔属性Boolean作用类似于“开关”比如一个卡片组件里有一个“显示删除按钮”的开关值为开就是普通卡片值为关就是纯展示卡片还可以设置文本属性把组件里的某段文字做成可配置的输入框。这些设置都在组件集属性面板的对应位置点属性类型图标可以切换。我踩过的一个坑是把所有状态都做成了独立变体结果一个“开关式属性”就能解决的事硬是做了四个版面。比如一个需要“显示/隐藏备注”的字段在变体集里做成备注模式显示 / 隐藏两个变体明显比用布尔属性更冗余而且改文本时还得每个变体都改一遍。做变体之前先在心里问一句这个差异能不能用一个布尔属性控制如果只是“有”和“无”的区别优先用布尔属性而不是单独做一排变体。3. 自动布局让界面学会自我排版3.1 自动布局的本质是什么自动布局Auto Layout是目前 Figma 里最值得花时间学透的功能没有之一。你可以把它理解成 CSS 的 Flexbox 布局一旦给某个容器开启了自动布局里面的元素就会按照你设定的方向、间距、对齐方式自动排列。往容器里面加新内容它们不会乱跑而是自动排好容器尺寸改变里面的内容也跟着按规则收缩或扩展。为什么说它是“现代设计”的基石因为真实界面很少是静态的。一行文字变长了怎么办卡片内容多了会怎样屏幕尺寸从手机切换到平板布局如何调整手动摆放图层任何一处内容变化都会引发连锁位移而自动布局把这些变化规则化让界面结构像弹簧一样伸缩。我自己用的一个比喻是手工排版像在玻璃板上摆积木每次摆完都担心碰一下会倒自动布局像给积木装了一套导轨你只需要关心导轨本身积木自己会找到正确的位置。3.2 搭一张卡片的实操路径我们从一张最简单的卡片开始拆解。选中一个作为容器的矩形按快捷键Shift A它会变成一个自动布局容器右侧面板会出现方向、间距、内边距、对齐等设置项。接着把标题、正文、按钮放进去再设置一下像素间距一张会“自动长高”的卡片就出现了。有几个关键参数必须理解清楚。方向Direction横向排列还是纵向排列取决于主轴线。卡片通常是纵向标题在上、正文在中、按钮在下。间距Gap子元素之间的距离相当于 CSS 里的 gap。内边距Padding容器内部四周留的空白控制内容与卡片边缘的距离。对齐Alignment子元素在主轴上靠起点、居中还是终点。尺寸模式Sizing容器可以是“固定”Fixed、“可伸缩”Fill或“贴合内容”Hug contents。说起来抽象但实际用的时候逻辑很清楚。想让卡片宽度固定、高度随文字增长就把宽度设为固定、高度设为贴合内容。想让一个按钮在卡片底部始终占满横向空间就把它的宽度设为 Fill它会自动拉伸填满剩余宽度。想让几张卡片排在一起并且均匀分布就在它们的共同父级容器里把方向改成横向、间距固定甚至用“Space between”来让它们自动撑开。练习时我最推荐做的东西是“列表项”和“标签 chip”。这两种元素都是同一个配方一个横向自动布局容器里面一个文字、一个关闭按钮。文字变长时整个标签自动变宽关闭按钮始终顶在右侧。一两天之内你就能形成肌肉记忆之后做任何复杂页面都敢上手了。3.3 嵌套自动布局的常见套路单层自动布局只能解决“一排东西”的问题真实界面是层层叠叠的结构。好在自动布局支持嵌套就像套娃一样一个容器里装的可以是另一个自动布局容器。外面控制大方向里面控制小方向各层各司其职。拿聊天界面来说最外层是垂直方向的自动布局里面每一个“消息气泡”子项又是一个水平方向的自动布局气泡内部再嵌套文字、时间、状态图标。外层控制会话流水的上下顺序和间距中间层控制每条消息的内部排版最内层控制内容和图标的对齐关系。任何一个地方改动都不会影响整体。嵌套自动布局的难点在于“哪个元素应该在哪一层”。我的经验是反复观察真实界面的结构层级。一个卡片从外到内通常是“容器 → 横排区块 → 纵排区块 → 文字层级”。一开始可以先画粗结构再逐步往里细化。还有一点如果一个子元素想脱离自动布局的约束自由定位比如卡片右上角的角标可以选中这个子元素在右侧把它的位置改成“绝对定位”Absolute position它就像从布局流里逃出来一样可以随意拖动但又不会影响其他元素的排列。4. 约束与自适应做能伸缩的页面框架4.1 约束是怎么工作的约束Constraints解决的是另一个问题当整个画板或外层框架被拉大缩小时内部元素应该怎么动。你可以把约束理解成“锚点”它规定了元素相对于容器四条边的依附关系。Figma 的约束分水平和垂直两轴。水平方向有靠左、居中、靠右、同时靠两边左右拉伸、等比缩放垂直方向有靠上、居中、靠下、上下拉伸、等比缩放。举个例子页面顶部有一个标题栏希望它始终贴着容器顶部、宽度撑满左右水平约束选“Left and right”垂直约束选“Top”容器变宽时标题栏就会自动拉伸贴齐两侧。约束和自动布局很容易混淆但它们定位不同。自动布局关注的是“内部元素如何排布”约束关注的是“某个元素如何响应容器尺寸变化”。实战里我通常这样分工页面级的大框架用帧Frame和约束来控制具体到某个组件内部用自动布局来控制。它们一个管宏观一个管微观配合使用才能做一个真正响应式的页面。4.2 搭一个典型后台页面骨架用约束做响应式的最典型场景是后台管理界面。假设要做的是一个左侧导航、顶部栏、内容区三明治结构。左侧导航固定 240px 宽模块切换时不能变形它的水平约束设为“Left”宽度固定即可顶部栏要始终贴顶部并且横跨内容区域水平约束设为“Left and right”垂直约束设为“Top”内容区作为自适应区域水平约束同样设为“Left and right”垂直约束设为“Top and bottom”这样窗口无论怎么缩放内容区都会自动填满剩余空间。约束设置完之后有一个很实用的校验方法直接拖动整个外层帧的宽度看看骨架会不会塌。如果左侧导航被挤扁了说明它没锁定宽度如果顶部栏没跟上宽度说明约束设置漏了。这个小实验几秒钟就能做完比在浏览器里反复预览效率高得多。4.3 最小/最大宽度与防溢出自动布局加约束的常见翻车现场是一段很长的文本把容器撑爆或者某个固定宽度的区块在窄屏上挤压出横向滚动条。较新版本的 Figma 自动布局容器支持设置最小宽度、最大宽度和最小高度、最大高度这一组参数能有效解决大部分溢出问题。比如做卡片组件时你希望文字多的时候卡片长高而不是变宽那就给卡片容器设置一个最大宽度希望文字再怎么少也不会缩得比标题还窄就设置一个最小宽度。输入框组件同理设置好最小宽度后会让响应式体验稳定很多。这一块属于“参数不多但坑不少”的地方。我自己的调试流程是先放一段超长文字看容器怎么变形再放一段超短文字看是否缩得太小最后把外层画板拉到手机宽度检查有没有内容溢出。三步走完组件在各种宽度下的表现基本就有数了。5. 原型与交互把页面变成可点击的 Demo5.1 连线交互的基础动作静态页面完成之后下一步就是把它变成能点击的原型。Figma 里做原型不需要任何代码打开右侧面板的“原型”标签页选中画板里的某个元素按住右侧原点拖到另一个画板上就能建立起一条交互线。拖出连线之后右侧会出现触发方式和动作设置。触发方式一般选“点击”On click这是移动端原型最常见的入口。动作用“导航到”Navigate to目标选择要跳转到的画板。做完一条线之后页面间的关系就形成了。预览时从“起始画板”带播放图标的那一个进入整个可点击流程就活了。在实际项目里我会先建一个专门的“流程总览页”把所有主要画板的小缩略图摆在一起然后用连线梳理出完整用户路径。这么做的好处是图上一眼能看到哪些页面是死角、哪些流程缺了返回入口比直接在页面之间拉线清晰得多。5.2 过渡动画与 Smart Animate 的细节给交互线设置动画时可选效果有无、溶解、智能动画、移入、推出等。其中智能动画Smart Animate最有意思它会自动识别两个画板里“同名图层”给它们之间的位置、大小、透明度变化补上平滑动画。做得好的话一个列表到详情页的过渡就能像原生 App 一样流畅。但智能动画也有脾气。它要求两个画板里的对应图层名字一致层级结构相似。如果你在列表页的商品卡片叫product-card详情页的图片叫product-imageFigma 就认不出对应关系动画要么生硬跳转要么莫名其妙地闪烁。我的习惯是在画稿初期就为关键交互动画统一命名规则比如详情页的主标题就叫detail-title列表页这一项也叫同一个相对路径名这样切动画时基本零调整。动画时长和缓动也需要花心思。平常我用的两个预设是“柔和缓和”Ease Out和“大约 200ms”。想表现页面切换的轻快感就用Move In或Push想表现视觉状态切换或同元素过渡就选智能动画。那一堆参数其实不用死记拉一遍每个效果你就懂什么场合用哪个了。5.3 滚动、固定和浮层弹窗移动端原型里列表滚动是刚需。Figma 支持把画板里的某个图层设置为“固定”Fix position while scrolling效果类似 CSS 的 sticky。选中顶部导航栏勾选固定在预览里滚动页面时导航栏会一直钉在最上面内容从它下面流过。这是做长列表和高保真原型时几乎天天要用的功能。弹窗和浮层用“覆盖”Overlay来实现。新建一个小尺寸画板作为弹窗内容在交互线的动作里选择“打开覆盖层”Open overlay并设置对齐位置、背景遮罩等参数。这样预览时点击一个按钮弹窗会像真实界面一样浮在当前页面上方而不会跳转到另一个独立页面。覆盖层的过渡动画也可以配智能动画浮层弹出的阻尼感都能模拟出来。我做原型时有一条规定关键流程尽量避免用真实设备支架直接用 Figma 的画板裸页预览。因为设备外壳会掩盖布局问题而产品评审更关注交互逻辑本身不需要额外的视觉干扰。6. 协作与工程化让设计资产形成正循环6.1 图层结构和命名规范的落地办法一个人做项目时图层怎么命名都无所谓一旦多人协作或者交付开发命名就是工程质量的底线。我最基础的规范是页面按“产品模块”划分图层用“类型-名称-状态”命名比如Button/Primary/Default、Icon/Close/24。使用“/”命名的组件在资产面板会自动分级一长串组件也不会堆成平铺列表。颜色和文字样式也要集中管理。在 Figma 右侧面板里可以把常用颜色保存为“颜色样式”把标题、正文、辅助文字保存为“文本样式”。这样修一个全局色板所有引用样式的图层都会跟着变。这个能力和组件系统配合起来才算勉强摸到“设计系统”的门槛。我见过不少新手文件图层名字全是“Frame 123”“Ellipse 45”“Group 8”功能完全没问题但协作起来寸步难行。命名这件事前期多花一分钟后期省十分钟属于性价比最高的工作习惯。6.2 团队组件库与发布更新组件和样式做出来后可以从文件发布到“团队库”让整个团队的文件都能调用。具体操作是点击文件右上角的“发布”Publish选择要发布的组件和样式写入版本说明后发布。这样其他设计师打开新文件到资产面板的“团队库”里就能直接拖用不需要复制源文件。库发布之后如果源文件里的组件改了并再次发布所有使用该库的文件会在顶部出现“更新可用”的通知。点更新文件里所有相关实例就会同步到新版本。这里有一个重要的经验更新之前先看“变更说明”团队应该在每次发布时简要写清改了什么避免更新之后才发现某个组件的尺寸变了、把页面搞乱。团队库的维护一定要克制。不是组件越多越好而是稳定复用的才值得进库。我看到过一些团队把全部组件一股脑发布结果库文件越拖越重设计变更还会互相影响最后大家都不敢动源文件。6.3 版本历史、分支和评审流程Figma 的版本历史功能很适合做安全网。打开文件菜单里的“版本历史”可以看到整个文件的时间线任意一步都能一键恢复。我的用法是在每次大规模重排布局之前手动创建一个“版本点”这就等于给自己留了后悔药。万一改崩了还能退回去重新来。实验性方案建议放到“分支”Branch里做。分支和主文件相互独立可以在分支上大胆改配色、改结构满意之后再合并回主文件。这个机制完美适配“改版方案讨论”——主管可能想看看新方案的效果但又不想破坏现网版本的操作。多人同时在线编辑已经是 Figma 的默认能力实时协作者的光标位置、选中区域都会互相可见。我发现效率最高的一种用法是设计师在画板边加评论产品经理直接回复一个评论线程从头聊到尾比去聊天软件翻聊天记录靠谱太多。评论有关键字搜索界面改动原因都能追溯。7. 常见问题与避坑实录7.1 组件和实例不同步到底哪里出了问题组件改了实例没跟着变这是新手问得最多的问题。先检查你改的是不是原件如果右键选中的是实例那改的只是局部覆盖不会影响其他实例。其次检查是不是“组件和实例在不同文件”且发布后没有更新团队库场景里要手动点“更新”才会同步。还有一种情况是原件被删除了实例还残留在画板里。它不会立刻消失但右键时会失去“查看原件”的路径这种行为等同于实例断了根。如果你需要清理掉某个旧组件正确流程是先找到所有使用它的地方换上新组件再从组件集或资产面板删除最后发布新版本。直接删原件会留下很多“无效实例”这是我在真实项目里踩过的大坑。7.2 自动布局失控元素全挤到了一边自动布局最常见的失控状态是添加新元素后所有内容都跑到一侧堆着或者某个子元素宽度异常。这时候我先看三件事容器的对齐方式是不是设成了“Start”子元素的尺寸模式是“Fixed”还是“Fill”。如果子元素都是固定宽度整体就会靠左堆想让它们均匀占满就把子元素设为“Fill”。文字溢出也常导致失控。容器宽度是固定的文字超过容器宽度时取决于对齐设置会自动换行还是溢出边界。这时候给文字层加上“自动高度”并在容器层设置合理的最大宽度问题基本就解决了。还有一点容易忽略嵌套自动布局时最内层的元素属性会受外层约束限制排查时要由外到内逐层看而不是盯着一个烂掉的小元素使劲调。7.3 Smart Animate 失灵或者闪变智能动画不生效大部分是图层匹配失败。名字不一致、层级不一致、图层顺序不一致都会让它识别不到对应关系。我的排查顺序是先选中两个画板里希望过渡的图层看是否同名再看父级层级是否一一对应最后看两个画板尺寸差异是不是太大导致出现穿帮式的缩放。还有一个经常被忽略的细节如果两个画板之间除了目标图层外还有其他同名字段智能动画会把它们也纳入动画。比如两个页面都叫背景的矩形如果尺寸不同就会产生一条多余的缩放动画。处理方式有两种要么给不相关的图层改名要么用“覆盖”模式把它们设为不可见。7.4 文件越用越卡性能排查实录Figma 文件卡顿通常不是软件问题而是文件本身太“脏”。常见元凶有大量高分辨率位图直接拖进画板、布尔运算层级过深、重复画板嵌套太深、残留大量不可见图层。解决办法很简单能用矢量就不放位图位图务必在导入前压缩布尔运算能拆就拆定期清理没有引用的大画板。对于大型项目我还会专门建一个“归档”页面把已经定稿的旧版画板移进去并隐藏起来。这样做不会删除历史又不会让当前工作区被一堆无关画板拖慢。再配合“查找并替换字体/颜色”的功能做全局统一文件会长期保持在一个健康状态。最后说一点个人体会。Figma 的功能密度很高但真正决定你效率的并不是记了多少快捷键而是能不能把“组件、变体、自动布局、约束、原型”这一整套逻辑串起来用。初学时不用贪多按“先做一个小项目 → 回头组件化 → 再增加交互和响应式细节”的路径走比对着教程刷十遍都有效。这一版的笔记先到这里下一期我会把样式变量、Design Tokens 和开发交付衔接的具体做法补上。