写 Figma 学习笔记，是给自己定的一个固定输出习惯。上一期我把界面布局、画板、图层、布尔运算这些基础操作梳理了一遍，这一期“02”想聊聊真正让 Figma 和传统设计工具有本质区别的东西：组件系统、变体、自动布局、约束、原型交互，以及多人协作的工程化思路。如果你已经开始用 Figma 画过一些带真实业务的界面，但总觉得改起来很费劲、或者原型做出来不像那么回事，这篇笔记应该能帮你把效率拉起来。
这期笔记更接近“能直接拿回去用”的经验合集，而不是功能说明书。我会从一次真实的改稿场景讲起，把组件为什么好用、变体怎么设计、自动布局什么时候用、约束怎么配合，一整套逻辑串起来。适合已经会新建画板、会用基础绘制工具、但对“组件化”还没有完整概念的设计新手，也适合想系统整理自己 Figma 工作流的进阶用户。
1. 组件与实例：把重复劳动变成一次修改
1.1 一个改稿场景：如果主色调要换
先设想一个几乎人人都会碰到的场景。你花了两天时间把一个后台管理系统的所有页面都画完了，里面光是按钮就有几十个，散落在表单页、列表页、弹窗里。这时候产品经理走过来说：“整体品牌色要换，从蓝色改成紫色。”如果没有组件，你只能打开每一个页面、每个按钮逐个改填充色，改到最后还会漏掉几个角落里的次级按钮。而用组件的话，整个流程是：选中一个主按钮，改填充颜色，然后所有页面里的按钮瞬间全部跟着变。
这就是组件和实例的价值，一句话总结就是“一处修改，处处更新”。组件（Component）相当于一个原件模板，实例（Instance）是原件在画板中的具体化身。原件改属性，实例跟着变；实例也可以单独覆盖部分属性，不影响原件和其他实例。听起来很神奇，但它的原理很简单：实例里存的是“引用”，不是“副本”。就像你在几百份合同上盖同一个章，章面上的字是什么，所有合同上的印迹就是什么。
从学习路径来看，我强烈建议新手做完第一套完整界面之后，立刻回头把所有重复超过三次的元素做成组件。这个动作会彻底改变你对“改稿”这件事的理解，也会让后面的变体、自动布局学起来顺畅很多。
1.2 组件与实例创建的标准动作
创建组件的方式其实很简单：在画板上选中一个或多个元素，按键盘快捷键Option + Command + K（Mac）或Ctrl + Alt + K（Windows），或者直接点右侧面板顶部的“组件”图标。执行之后，图层面板里这个图层会多出一个像“◇”一样的绿色图标，这就表示它已经成为组件原件。
有几个细节值得注意。第一，可以给组件单独命名，命名里用“/”符号可以形成层级，比如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. 原型与交互：把页面变成可点击的 Demo
5.1 连线交互的基础动作
静态页面完成之后，下一步就是把它变成能点击的原型。Figma 里做原型不需要任何代码，打开右侧面板的“原型”标签页，选中画板里的某个元素，按住右侧原点拖到另一个画板上，就能建立起一条交互线。
拖出连线之后，右侧会出现触发方式和动作设置。触发方式一般选“点击”（On click），这是移动端原型最常见的入口。动作用“导航到”（Navigate to），目标选择要跳转到的画板。做完一条线之后，页面间的关系就形成了。预览时，从“起始画板”（带播放图标的那一个）进入，整个可点击流程就活了。
在实际项目里，我会先建一个专门的“流程总览页”，把所有主要画板的小缩略图摆在一起，然后用连线梳理出完整用户路径。这么做的好处是，图上一眼能看到哪些页面是死角、哪些流程缺了返回入口，比直接在页面之间拉线清晰得多。
5.2 过渡动画与 Smart Animate 的细节
给交互线设置动画时，可选效果有无、溶解、智能动画、移入、推出等。其中智能动画（Smart Animate）最有意思，它会自动识别两个画板里“同名图层”，给它们之间的位置、大小、透明度变化补上平滑动画。做得好的话，一个列表到详情页的过渡就能像原生 App 一样流畅。
但智能动画也有脾气。它要求两个画板里的对应图层名字一致，层级结构相似。如果你在列表页的商品卡片叫product-card，详情页的图片叫product-image，Figma 就认不出对应关系，动画要么生硬跳转，要么莫名其妙地闪烁。我的习惯是：在画稿初期就为关键交互动画统一命名规则，比如详情页的主标题就叫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 和开发交付衔接的具体做法补上。
