🎨 04 - 色彩与样式
色彩是设计的灵魂——它传递情感、引导注意力、建立品牌识别。本课将深入讲解Figma中的颜色系统、填充与描边、效果系统，以及如何构建可复用的样式系统。
📌 本课要点
- 颜色模型：HEX、RGB、HSL的选择与转换
- 填充类型：纯色、线性/径向/角度渐变、图片填充
- 描边设置：宽度、对齐方式、虚线
- 效果系统：Drop Shadow、Inner Shadow、Layer Blur、Background Blur
- 颜色样式与效果样式的创建和管理
- 配色方案设计：单色、互补色、类似色策略
一、颜色基础知识
在开始操作前，理解颜色模型和配色原理是必要的。Figma支持三种颜色输入方式：
🎨 颜色模型对比
| 模型 | 适用场景 | 示例 | 特点 |
|---|
| HEX | Web开发、设计标注 | #8B5CF6 | 6位16进制数，开发最常用 |
| RGB | 屏幕显示、数字设计 | 139,92,246 | 红绿蓝三通道，0-255 |
| HSL | 配色调整、色相变换 | 258°,91%,86% | 色相/饱和度/亮度，直觉调色 |
推荐工作流：设计时用HSL调色（直觉），标注时用HEX（开发友好）。在Figma颜色选择器中直接输入格式即可切换。
💡 快捷取色：颜色选择器打开时，按住⌘/Ctrl，光标变吸管，可从画布任意位置取色。松开恢复。比切换工具高效得多。
二、填充类型详解
选中形状或文字后，右侧属性面板 Fill 区域设置填充。可以为一个元素添加多层填充。
1. 纯色填充
1设置纯色：点击Fill色块打开颜色选择器。选预设色板颜色，或在色轮上自由选择。输入精确HEX/RGB值确保颜色准确。
2透明度：颜色选择器右下角透明度滑块调整。也可在Fill列表直接调。注意：Fill透明度 ≠ 元素Opacity——前者只影响填充，后者影响整个元素。
2. 渐变填充
↗ 线性渐变
沿直线方向过渡，最常用。
- 点击画布渐变线改变方向
- 拖动端点调整起止位置
- 点击控制线中间添加色标
- 双击渐变条添加/删除色标
常用：按钮渐变 #8b5cf6→#ec4899
🔴 径向渐变
从中心向外圆形扩散。
- 拖中心点改变渐变中心
- 调外圈半径改变扩散范围
- 拖手柄改变椭圆比例
- 常用：光晕、聚光灯效果
常用：光斑 rgba(139,92,246,0.3)→transparent
🔄 角度渐变
绕中心旋转的锥形渐变。
- 拖中心改变旋转中心
- 添加多色标创建彩虹效果
- 可用于饼图配色方案
- 创意背景和装饰效果
3. 图片填充
1选择Fill类型为Image图标，上传图片或拖拽文件。图片按形状轮廓裁剪。
2填充模式：Fill（等比填满裁剪）、Fit（等比适应留白）、Crop（自由裁剪）、Tile（平铺纹理）。
三、描边（Stroke）设置
✏️ 描边属性详解
| 属性 | 选项 | 说明 |
|---|
| 对齐 | Inside / Center / Outside | Inside不增加外部尺寸，最常用 |
| 端点 | Butt / Round / Square | Round更柔和，Square加方块末端 |
| 连接 | Miter / Round / Bevel | Round圆角连接更精致 |
| 虚线 | Dash + Gap | 如 Dash:4, Gap:4 创建虚线边框 |
⚠️ 描边对齐：Inside描边不加外部尺寸——100×100矩形加2px Inside仍是100×100。Center各占一半，Outside完全在外——外部尺寸变102×102。自动布局中推荐Inside对齐。
四、效果系统（Effects）
🔽 Drop Shadow
最常用效果，添加外部阴影。
| 参数 | 常用值 |
|---|
| X | 0 |
| Y | 2-8px |
| Blur | 8-24px |
| Spread | 0 |
| 颜色 | rgba(0,0,0,0.1-0.25) |
写实双层阴影：
Layer1: y:1, blur:2, 0.08
Layer2: y:4, blur:12, 0.12
🔼 Inner Shadow
内部阴影，凹陷或内发光效果。
常见用途：输入框凹陷、按钮按压状态、深色模式凹陷卡片
🌫️ Layer Blur
高斯模糊整个元素内容。
常用：磨砂背景、焦点外元素。配合Fill透明度使用。
🔮 Background Blur
只模糊下方背景，元素本身清晰。
必须搭配半透明Fill：
Fill rgba(255,255,255,0.7)
+ Background Blur 20px
= 毛玻璃效果
💡 阴影设计原理：真实阴影由两部分组成——接触阴影（紧贴底部，小范围深）和环境阴影（远离元素，大范围浅）。两层Drop Shadow叠加更真实。
五、样式系统
1. 颜色样式
1创建颜色样式：使用目标颜色的元素，Fill区域点击四点图标 → "+" → 命名。推荐命名：primary/500、gray/100、success/main。
2语义化命名：bg/primary 比 blue/500 更好——品牌色从蓝色变为紫色时，只改一个样式定义，不用到处替换引用。
2. 效果样式
1创建效果样式：选中已添加效果的元素，Effects区域的四点图标 → "+" → 命名。如 shadow/sm、shadow/md、blur/glass。
📐 标准阴影体系
shadow/sm: y:1, blur:2, rgba(0,0,0,0.05) — 微弱层次
shadow/md: y:2, blur:8, rgba(0,0,0,0.10) — 卡片浮起
shadow/lg: y:4, blur:16, rgba(0,0,0,0.15) — 弹窗浮起
shadow/xl: y:8, blur:24, rgba(0,0,0,0.20) — 模态对话框
六、配色方案设计
🎯 单色配色
同一色相不同明暗
- #EDE9FE (最浅)
- #C4B5FD (浅)
- #8B5CF6 (主)
- #5B21B6 (深)
- #3B0764 (最深)
适合：品牌感强的设计
🔄 互补配色
色轮180度对立色
- #8B5CF6（紫）
- #F59E0B（琥珀）
- #6B7280（灰）
适合：活力、对比强烈
🌊 类似色
色轮相邻色
- #6366F1（靛蓝）
- #8B5CF6（紫）
- #EC4899（粉）
适合：和谐渐变效果
✅ 60-30-10法则：60%主色（背景大区域）、30%辅助色（卡片区域）、10%强调色（按钮标签）。比例平衡视觉不混乱。
七、实战案例：完整配色系统
1主色板：选品牌色#8B5CF6，用插件Color Shades生成9级色阶50-900，创建颜色样式。
2中性色板：灰色9级 #F9FAFB到#111827。
3语义色板：success/warning/error/info各3级。
八、总结与练习
✅ 知识检查
- 线性渐变和径向渐变分别适合什么场景？
- 多层Drop Shadow为什么比单层更真实？
- 颜色样式为什么要语义化命名？
- Background Blur需要配合什么属性？
- 60-30-10法则核心思想？
🎯 练习：亮暗双色主题卡片
- 创建完整配色样式（主色9级+中性色9级+语义色12级）
- 用样式设计一张亮色主题卡片
- 复制卡片切换为暗色主题
- 为两种卡片添加效果样式
- 修改主色样式验证全局同步
🎨
第四课完成！
下一课：画框与布局——创建响应式设计的关键。