## Figma 使用说明

---

## 一、Figma 是什么？

**基于浏览器的 UI/UX 设计工具**，一套工具覆盖全流程：

- 设计（Design）
- 原型（Prototyping）
- 协作（多人实时编辑）
- 开发交付（生成 CSS/代码片段）

**核心竞争力**：全平台（Win/Mac/Linux/网页）、实时协作、组件化设计系统。

---

## 二、工作台速览

```
┌─────────┬──────────────────────────────────────┐
│  图层    │              画布 (Canvas)             │
│  面板    │                                      │
│          │    ┌──────────┐  ┌──────────┐        │
│  Page 1  │    │  Button  │  │   Card   │        │
│  ├─ Frame │    └──────────┘  └──────────┘        │
│  ├─ Button│                                      │
│  └─ Icon  │                                      │
├──────────┼──────────────────────────────────────┤
│  属性    │  设计 / 原型 / 检查  (右侧面板)        │
│  面板    │                                      │
└──────────┴──────────────────────────────────────┘
```

### 三块核心面板

| 面板 | 位置 | 用途 |
|------|------|------|
| **图层面板** | 左 | 管理所有图层、组件、页面 |
| **画布** | 中 | 绘制和排版 |
| **属性面板** | 右 | 调整样式、约束、原型交互 |

---

## 三、核心概念

### 1. Frame（框架）→ 相当于 Artboard
```text
⌘ + Option + G   → 选中的元素包装成 Frame
⌘ + '            → 显示/隐藏网格
Frame 可以嵌套，可以做响应式布局
```

**常见 Frame 预设：**
- Desktop: 1440×1024, 1280×800
- Tablet: 1024×768, 834×1194
- Mobile: 375×812 (iPhone), 390×844

### 2. Auto Layout（自动布局）⭐ 最重要功能
```
类似 Flexbox：Figma 的 Auto Layout = CSS Flexbox

快捷键:
  Shift + A    → 选中元素应用 Auto Layout
  Option + →/← → 调整间距
  ⌘ + Enter   → 进入/退出容器

属性:
  Direction:  水平 / 垂直
  Padding:    内边距
  Gap:        间距
  Alignment:  对齐方式
  Hug / Fill: 自适应 / 填充
```

**为什么重要**：Auto Layout 让组件自适应内容变化，修改文案时自动撑开。

### 3. Components（组件）
```
一个设计稿 = 无数组件拼装

创建组件:     ⌘ + Option + K
创建变体:     选中组件 → 右侧 Add Variant
编辑主组件:   双击进入 → 全局同步更新
覆盖局部:     在实例中修改 ≠ 影响主组件

属性定义 (Component Properties):
  - Text 属性 → 可替换文案
  - Boolean 属性 → 显隐开关
  - Instance swap → 切换子组件
  - Variant → 多状态 (禁用/悬停/选中)
```

### 4. Styles（样式）
```
Figma 设计令牌 (Design Tokens) 的实现：

创建样式（选中元素 → 右侧样式图标）：
  Color:    主色/辅色/文字色
  Text:     标题/正文/小字（字号+字重+行高）
  Effect:   阴影/模糊
  Grid:     网格布局

应用：拖拽样式到其他元素，全局同步更新
```

### 5. Constraints（约束）
```
类似 CSS position/布局：
  Left / Right / Top / Bottom
  Scale / Center / Stretch

用途：让元素在不同尺寸 Frame 中自适应
```

---

## 四、快捷键速查

| 操作 | Mac | Win |
|------|-----|-----|
| 移动工具 | V | V |
| 矩形 | R | R |
| 文字 | T | T |
| 圆形 | O | O |
| 画线 | L | L |
| 钢笔 | P | P |
| 切片 | S | S |
| 放大 | Z + 点击 | Z + 点击 |
| 适配画布 | Shift + 1 | Shift + 1 |
| 复制 | ⌘ + D | Ctrl + D |
| 编组 | ⌘ + G | Ctrl + G |
| 框架 | ⌘ + Option + G | Ctrl + Alt + G |
| Auto Layout | Shift + A | Shift + A |
| 布尔运算 | ⌘ + Option + B | Ctrl + Alt + B |
| 标记为完成 | Shift + E | Shift + E |

---

## 五、原型交互（Prototyping）

### 连线交互
```
1. 选中任意图层/组件
2. 右侧切换到 "Prototype" 面板
3. 点击右边的小圆点 → 拖拽到目标 Frame
4. 设置触发条件和动画

交互类型:
  On Click      → 点击
  While Hovering → 悬停
  While Pressing → 按下
  After Delay   → 延迟
  Drag          → 拖拽（移动端）

动画:
  Instant       → 跳转
  Dissolve      → 渐隐
  Smart Animate → 智能动画（同名元素自动补间）
  Push/Pull     → 推入/推出
  Slide In/Out  → 滑动
```

### Smart Animate 使用技巧
```
条件：
  ✅ 两个 Frame 有同名图层
  ✅ 同名图层的属性发生变化

场景：
  列表展开/收起
  导航栏滚动切换
  开关按钮
  菜单弹出/关闭
```

---

## 六、协作功能

### 多人实时编辑
```
谁在哪个图层上编辑 → 头像会显示
光标实时出现 → 能看到别人在画的形状
不会冲突 → Figma 的锁机制自动处理
```

### 评论与批注
```
C          → 切换评论工具
双击任意位置 → 添加评论
@用户名     → @某人

状态:
  Open / Resolved
```

### 分享与权限
```
右上角 Share 按钮:
  Can view     → 只读
  Can edit     → 可编辑
  Can leave    → 可下载导出

链接分享: https://figma.com/file/xxx
团队项目: 需付费版组织项目
```

---

## 七、开发交付

### 切图导出
```text
选中图层 → 右侧 Export 面板

格式:
  PNG / JPG / SVG / PDF
  WebP / AVIF (新版本)

缩放:
  1x, 2x, 3x  （对应 @1x @2x @3x）

批量导出:
  选中多个图层 → 统一设置导出参数
```

### 开发模式（Dev Mode）
```
Figma 2023 推出的开发者专用模式

右上角切换: Design / Dev Mode

功能:
  查看元素属性 (CSS 样式)
  复制 CSS/ iOS / Android 代码
  查看间距、约束
  下载切图 (SVG/PNG)
  查看变体和组件属性
  标注 (Redlines)
```

### CSS 代码生成示例
```
选中一个 Button 组件 → Dev Mode 右侧显示：

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #1890FF;
  border-radius: 8px;
  color: #FFFFFF;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
```

---

## 八、设计系统搭建

### 推荐结构
```
项目 /
├── 🎨 品牌基础 /                ← Colors, Typography, Spacing, Icon
├── ☰ 组件库 /                  ← Components 主文件
│   ├── Button (Primary/Secondary/Ghost)
│   ├── Input (Default/Error/Disabled)
│   ├── Card (Image/Content/Action)
│   └── ...
├── 📱 页面设计 /                ← 具体页面
│   ├── 首页
│   ├── 列表页
│   └── 详情页
└── 📖 设计规范文档              ← 文字说明
```

### 组件原子化
```
Atom → Molecule → Organism → Pages

原子: Color, Typography, Icon, Spacing
分子: Button (文字+背景+圆角)
组织: SearchBar (Input + Button + Icon)
页面: HomePage (SearchBar + CardList + Footer)
```

---

## 九、插件推荐

| 插件 | 用途 |
|------|------|
| **Content Reel** | 填充真实数据（人名、头像、地址） |
| **Iconify** | 图标库（数万开源图标） |
| **Unsplash** | 图片占位 |
| **Autoflow** | 快速画流程图连线 |
| **Remove BG** | 一键去背景 |
| **Stark** | 无障碍检查（对比度/色盲模拟） |
| **FigJam AI** | 白板 AI 辅助 |
| **Annotate** | 添加标注 |

---

## 十、工作流示例

### 设计师
```
1. 调研 → 画线框图 (Low-fi)
2. 建立颜色/字体系统
3. 设计关键页面 (High-fi)
4. 组建组件库
5. 连线原型 → 用户测试
6. 交付开发 (Dev Mode + 切图)
```

### 开发者
```
1. 打开 Figma → 切换到 Dev Mode
2. 查看设计 → 直接复制 CSS
3. 导出 SVG/PNG 图标
4. 按组件库对照实现
5. 截图对比 → 确认像素级一致
```

> **一句话总结：** Figma = 设计师的 VS Code —— 免费、开放、实时协作、生态丰富。Auto Layout 和组件化是做可维护设计的关键，Dev Mode 是设计师和开发者的桥梁。