为什么需要Figma变量和组件库
老板说品牌色从蓝色改成绿色，你打开了30个设计文件逐一修改。客户说标题字号要大一点，你又在几十个页面里手动调整。Figma变量让颜色、文字、间距变成可统一管理的设计令牌，一处修改全局生效。组件库让常用元素标准化，团队成员复用而非重画。
第一步：创建变量
在Figma右侧属性面板点击本地变量。变量类型包括：
- 颜色变量——品牌色、功能色、背景色
- 数字变量——间距、圆角、边框宽度
- 字符串变量——文字内容（用于多语言）
- 布尔变量——控制显示/隐藏
创建颜色变量示例：点击创建变量 → 颜色 → 命名Brand/Primary → 设置色值#0066FF。用/创建层级，如Brand/Primary、Brand/Secondary、Semantic/Error。
第二步：应用变量到设计
选中图层，在填充/描边/效果属性上点击图标，选择对应的变量。应用后属性旁显示变量名而非具体值。
变量嵌套：一个颜色变量可以引用另一个变量。例如Surface/Card引用Brand/Primary但透明度20%。这样改Brand/Primary时，所有引用它的变量自动更新。
第三步：组件与变体
把常用元素做成组件：选中元素，右键创建组件（Ctrl+Alt+K）。组件的优势是修改主组件，所有实例同步更新。
变体（Variant）让同一个组件有不同状态：
- 选中按钮组件，点击添加变体
- 创建属性：Type（Primary/Secondary）、Size（Large/Medium/Small）、State（Default/Hover/Disabled）
- 组合属性生成所有变体状态
使用时从资源面板拖拽组件，在右侧属性面板切换变体。一个按钮组件覆盖所有状态，无需创建多个独立组件。
第四步：自动布局
自动布局（Auto Layout）让设计元素随内容自适应。选中元素，按Shift+A添加自动布局。设置：
- 方向——垂直或水平排列
- 间距——元素之间的固定间距
- 内边距——容器边缘到内容的距离
- 对齐方式——左对齐、居中、两端对齐
嵌套自动布局：一个卡片用垂直自动布局（标题+描述+按钮），内部按钮用水平自动布局（图标+文字）。整个卡片随内容自适应，无需手动调整尺寸。
第五步：发布团队库
组件和变量建好后，发布为团队库供其他文件使用：
- 点击资源面板 → 库图标 → 发布更新
- 填写更新说明（版本日志）
- 团队成员在其他文件中点击资源面板 → 团队库 → 开启该库
- 组件和变量出现在资源面板，可直接使用
库更新后，使用方会收到更新提示，可以选择接受更新或保持旧版本。这个功能让设计系统迭代不影响进行中的项目。
第六步：设计令牌导出
变量可以与开发协作。在变量面板点击… → Export，可以导出为JSON、CSS变量、SCSS等格式。前端开发者直接导入代码，实现设计与开发的颜色/间距/字号完全一致。
推荐工具：Figma Tokens Studio插件，支持更复杂的设计令牌管理和多平台导出。
常见问题与误区
- 变量名混乱——建立命名规范，用Category/Subcategory/Name层级
- 组件过度抽象——不是所有元素都需要组件，只在重复使用3次以上的元素上投入
- 自动布局嵌套太深——超过3层嵌套难以维护，复杂布局拆分成多个组件
- 库更新导致意外变化——大版本更新前通知团队，小修改用详细更新说明
效率数据
实测：一个中型项目（50个页面），传统方式改品牌色约2小时，用变量约2分钟。组件库让新页面设计速度提升40%——复用已有组件而非从头画。设计系统维护：无变量时每次设计审查发现的颜色不一致约15处，使用变量后接近0处。核心建议是：2人以上的团队必须建立组件库，3个以上项目必须建立变量系统。