主题
04 - Figma 实操入门（Figma Hands-on）
"工具是思维的延伸。掌握 Figma，让你的产品想法看得见、摸得着。"
目录
Figma 是什么
Figma 是一款基于浏览器的协作式界面设计工具，2016 年正式发布，2022 年被 Adobe 收购（后因监管取消）。如今 Figma 已经成为全球最流行的 UI/UX 设计工具。
Figma 的核心特点
┌────────────────────────────────────────────────────────────┐
│ Figma 核心特点 │
├────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 浏览器 │ │ 实时协作 │ │ 设计+原型 │ │ 免费可用 │ │
│ │ 即可使用 │ │ 多人编辑 │ │ 一体化 │ │ 个人免费 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 组件系统 │ │ 社区资源 │ │ Dev Mode │ │ 跨平台 │ │
│ │ 可复用 │ │ 极其丰富 │ │ 开发交付 │ │ Win/Mac │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
└────────────────────────────────────────────────────────────┘Figma vs 其他设计工具
| 维度 | Figma | Sketch | Adobe XD |
|---|---|---|---|
| 平台 | Web + 桌面端 | 仅 Mac | Win + Mac |
| 协作 | 实时多人协作 | 需第三方工具 | 有限协作 |
| 价格 | 免费版可用 | $12/月 | 已停止更新 |
| 社区 | 极其活跃 | 较活跃 | 逐渐衰弱 |
| 生态 | 插件丰富 | 插件丰富 | 插件较少 |
| 趋势 | 行业主流 | 份额下降 | 被 Adobe 放弃 |
为什么 PM 要学 Figma
PM 学 Figma 的六大理由
┌──────────────────────────────────────────────────────────┐
│ PM 为什么要学 Figma？ │
├──────────────────────────────────────────────────────────┤
│ │
│ 1. 提升沟通效率 │
│ ┌────────────────────────────────────────────┐ │
│ │ 文字描述："首页顶部有一个搜索框，下面是 │ │
│ │ 轮播图，再下面是推荐列表..." │ │
│ │ VS │ │
│ │ 直接画出来，一图胜千言 │ │
│ └────────────────────────────────────────────┘ │
│ │
│ 2. 加速需求验证 │
│ 快速画出低保真原型，和用户/团队验证想法 │
│ │
│ 3. 减少信息损耗 │
│ PM 直接产出可视化方案，减少传话中的信息丢失 │
│ │
│ 4. 理解设计师的工作 │
│ 懂 Figma 后，能和设计师更高效地协作 │
│ │
│ 5. 提高个人竞争力 │
│ 会 Figma 的 PM 在求职时更有优势 │
│ │
│ 6. 参与设计评审更专业 │
│ 能看懂设计稿，提出有建设性的反馈 │
│ │
└──────────────────────────────────────────────────────────┘PM 需要掌握到什么程度？
设计师水平 ████████████████████████████ 100%
^
│ PM 不需要达到这个水平
│
PM 目标水平 █████████████████░░░░░░░░ 60%
^ ^
│ │
基础操作 能独立画低保真原型
看懂设计稿 会用组件和 Auto Layout
会写评论 理解设计系统基本概念
建议学习路径：
基础操作 (2h) --> 组件概念 (2h) --> 动手练习 (4h) --> 持续实践Figma 界面介绍
当你打开 Figma 并进入一个设计文件时，你会看到以下界面：
┌──────────────────────────────────────────────────────────────────────┐
│ ☰ Figma │ 文件名 │ [▶ Prototype] [< > Dev Mode] │ 头像 分享│
├─────────────┴──────────┬─────────────────────────────────┬──────────┤
│ │ 工具栏 Toolbar │ │
│ │ [↖][□][○][△][T][🖼][✏][💬][...]│ │
│ ├─────────────────────────────────┤ │
│ 左侧面板 │ │ 右侧面板 │
│ Left Panel │ │ Right │
│ │ │ Panel │
│ ┌──────────────┐ │ │ │
│ │ 页面列表 │ │ 画布 Canvas │ ┌──────┐│
│ │ │ │ │ │Design││
│ │ - Page 1 │ │ │ │ ││
│ │ - Page 2 │ │ ┌───────────────┐ │ │属性 ││
│ │ │ │ │ │ │ │填充 ││
│ ├──────────────┤ │ │ 设计画板 │ │ │描边 ││
│ │ 图层列表 │ │ │ (Frame) │ │ │效果 ││
│ │ │ │ │ │ │ │ ││
│ │ > Frame 1 │ │ │ │ │ │布局 ││
│ │ > 元素 A │ │ │ │ │ │ ││
│ │ > 元素 B │ │ └───────────────┘ │ │ ││
│ │ > Frame 2 │ │ │ └──────┘│
│ │ │ │ │ │
│ └──────────────┘ │ │ │
│ │ │ │
├────────────────────────┴─────────────────────────────────┴──────────┤
│ [? 帮助] 缩放: 100% ▾ │
└─────────────────────────────────────────────────────────────────────┘各区域功能说明
| 区域 | 功能 | 常用操作 |
|---|---|---|
| 顶部菜单栏 | 文件操作、模式切换 | 切换 Design/Prototype/Dev Mode |
| 工具栏 | 绘图和编辑工具 | 选择、画框、画圆、文字、钢笔 |
| 左侧面板 | 页面列表 + 图层列表 | 管理页面、查看/选择图层 |
| 画布 | 主要设计区域 | 拖拽、缩放、设计 |
| 右侧面板 | 属性面板 | 调整尺寸、颜色、字体、效果 |
| 底部状态栏 | 缩放和帮助 | 调整画布缩放比例 |
工具栏详解
工具栏图标说明：
↖ 选择工具 (V) - 选择和移动元素
□ 矩形工具 (R) - 画矩形/正方形
○ 椭圆工具 (O) - 画圆/椭圆
△ 多边形工具 - 画三角形等多边形
T 文字工具 (T) - 添加文字
🖼 图片工具 - 插入图片
✏ 钢笔工具 (P) - 画自由路径
💬 评论工具 (C) - 添加评论
# Frame 工具 (F) - 创建画板/框架
/ 画线工具 (L) - 画直线核心概念
1. Frame（画板/框架）
Frame 是 Figma 中最基础的概念，可以理解为一个"容器"。
Frame 的多种用途：
1. 作为页面画板（如手机屏幕）
┌──────────────┐
│ iPhone 16 Pro│ 375 x 812
│ │
│ (设计内容) │
│ │
└──────────────┘
2. 作为布局容器（类似 HTML 的 div）
┌──────────────────────────────┐
│ Header Frame │
├──────────────────────────────┤
│ ┌────────┐ ┌────────────┐ │
│ │Nav Item│ │ Nav Item │ │ <-- 嵌套的 Frame
│ └────────┘ └────────────┘ │
└──────────────────────────────┘
3. 作为组件的基础
┌──────────────┐
│ Button Frame │
│ [按钮文字] │
└──────────────┘创建 Frame 的方式：
- 按
F键，然后在画布上拖拽 - 从右侧面板选择预设尺寸（iPhone、iPad、Desktop 等）
- 选中多个元素后按
Ctrl/Cmd + Alt + G打组为 Frame
2. 图层（Layers）
Figma 中的每个元素都是一个图层，图层按照从上到下的顺序排列，上方的图层会覆盖下方的图层。
图层面板： 画布上的效果：
┌────────────────┐ ┌──────────────────┐
│ > Page Frame │ │ │
│ │ │ │ ┌──────┐ │
│ ├ 蓝色圆形 │ (最上层) │ │ 蓝圆 │ │
│ │ │ │ └──┬───┘ │
│ ├ 红色矩形 │ (中间层) │ ┌──┴───┐ │
│ │ │ │ │ 红矩形│ │
│ ├ 背景 │ (最下层) │ └──────┘ │
│ │ │ │ 背景色 │
│ │ │ │
└────────────────┘ └──────────────────┘
图层面板中靠上的元素，在画布中显示在靠前（覆盖下方元素）图层操作：
- 拖拽排序：调整元素的前后关系
- 锁定图层：防止误操作（点击锁图标）
- 隐藏图层：点击眼睛图标
- 重命名：双击图层名称
3. 组件（Component）
组件是 Figma 的核心功能之一，允许你创建可复用的设计元素。
组件的工作原理：
主组件 (Main Component) 实例 (Instance)
┌─────────────────────┐ ┌─────────────────────┐
│ ◆ Button │ │ ◇ Button │
│ ╔═══════════════╗ │ │ ╔═══════════════╗ │
│ ║ 提 交 ║ │ 复制 │ ║ 提 交 ║ │
│ ╚═══════════════╝ │ ───> │ ╚═══════════════╝ │
│ │ │ │
└─────────────────────┘ └─────────────────────┘
◆ = 主组件标志 ◇ = 实例标志
修改主组件 --> 所有实例自动更新
修改实例 --> 仅影响该实例（覆盖/Override）
实际应用：
┌────────────────────────────────────────┐
│ 设计一个按钮组件 │
│ │
│ 主组件: ╔══════════╗ │
│ ║ 按钮 ║ │
│ ╚══════════╝ │
│ │ │
│ ┌───────┼───────┐ │
│ │ │ │ │
│ v v v │
│ ╔══════╗ ╔══════╗ ╔══════╗ │
│ ║ 登录 ║ ║ 注册 ║ ║ 提交 ║ │
│ ╚══════╝ ╚══════╝ ╚══════╝ │
│ 实例1 实例2 实例3 │
│ (文字覆盖) (文字覆盖) (文字覆盖) │
└────────────────────────────────────────┘创建组件：
- 选中要变成组件的元素
- 按
Ctrl/Cmd + Alt + K（或右键 > Create Component） - 主组件显示 ◆ 图标
- 复制主组件即得到实例（◇ 图标）
4. Auto Layout（自动布局）
Auto Layout 让元素按照规则自动排列，类似 CSS 中的 Flexbox。
没有 Auto Layout： 有 Auto Layout：
手动排列，间距靠目测 自动等间距排列
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│ 标签1│ │标签2 │ │ 标签1 │ │ 标签2 │ │ 标签3 │
└──────┘ └──────┘ └──────┘ └──────┘ └──────┘
┌──────┐ 间距=8 间距=8
│标签3 │
└──────┘ 添加新元素自动排列：
间距不一致，排列歪斜 ┌──────┐┌──────┐┌──────┐┌──────┐
│ 标签1 ││ 标签2 ││ 标签3 ││ 标签4│
└──────┘└──────┘└──────┘└──────┘
自动等间距！Auto Layout 的属性：
┌────────────────────────────────────────────┐
│ Auto Layout 属性 │
├────────────────────────────────────────────┤
│ │
│ 方向： → 水平排列 │ ↓ 垂直排列 │
│ │
│ 间距： 元素之间的距离（如 8px, 16px） │
│ │
│ 内边距：容器内部边距 │
│ ┌─────────────────────┐ │
│ │ padding │ │
│ │ ┌───┐ ┌───┐ ┌───┐ │ │
│ │ │ A │ │ B │ │ C │ │ │
│ │ └───┘ └───┘ └───┘ │ │
│ │ │ │
│ └─────────────────────┘ │
│ │
│ 对齐：左对齐/居中/右对齐/两端对齐 │
│ │
│ 尺寸：Fixed（固定）/ Hug（适应内容） │
│ / Fill（填充父容器） │
│ │
└────────────────────────────────────────────┘添加 Auto Layout：
- 选中 Frame，按
Shift + A - 或在右侧面板点击 "+" 添加 Auto Layout
5. 样式（Styles）
样式允许你定义可复用的颜色、文字、效果等属性。
样式的类型：
1. 颜色样式 2. 文字样式
┌────────────────┐ ┌────────────────────┐
│ Primary #1677FF│ │ H1 24px Bold │
│ Success #52C41A│ │ H2 20px Bold │
│ Warning #FAAD14│ │ Body 16px Regular │
│ Error #FF4D4F│ │ Caption 12px Light │
│ Gray-1 #333333│ └────────────────────┘
│ Gray-2 #666666│
│ Gray-3 #999999│ 3. 效果样式
└────────────────┘ ┌────────────────────┐
│ Shadow-sm 轻阴影 │
│ Shadow-md 中阴影 │
│ Shadow-lg 重阴影 │
└────────────────────┘使用样式的好处：
- 全局修改一处，所有使用该样式的元素自动更新
- 保持设计一致性
- 方便团队协作
实操教程：创建移动端页面
下面我们一步步创建一个简单的移动端"个人中心"页面。
最终效果预览
┌─────────────────────────┐
│ 个人中心 │
├─────────────────────────┤
│ │
│ ┌─────┐ │
│ │ 头像 │ 用户昵称 │
│ │ │ ID: 123456 │
│ └─────┘ │
│ │
├─────────────────────────┤
│ 📦 我的订单 > │
├─────────────────────────┤
│ 📍 收货地址 > │
├─────────────────────────┤
│ 🎫 优惠券 > │
├─────────────────────────┤
│ ⭐ 我的收藏 > │
├─────────────────────────┤
│ ⚙️ 设置 > │
├─────────────────────────┤
│ │
│ [退出登录] │
│ │
├─────────────────────────┤
│ 首页 │ 分类 │ 购物车│ 我的│
└─────────────────────────┘Step 1：创建画板
- 打开 Figma，新建文件
- 按
F键选择 Frame 工具 - 在右侧面板选择 iPhone 16 Pro（393 x 852）
- 将 Frame 命名为"个人中心"
操作路径：
F 键 --> 右侧面板 --> Phone --> iPhone 16 Pro
┌──────────────────────┐
│ Frame │
│ Design │
│ │
│ iPhone 16 Pro │
│ W: 393 H: 852 │
│ │
└──────────────────────┘Step 2：创建顶部导航栏
- 在 Frame 内按
R画一个矩形（W: 393, H: 44） - 填充颜色设为白色
- 按
T添加文字"个人中心"，居中对齐 - 给导航栏添加底部描边（1px, #E8E8E8）
┌──────────────────────────────┐
│ 个人中心 │ <-- 顶部导航栏
│─────────────────────────────│ W:393 H:44Step 3：创建用户信息区域
- 按
F创建一个新 Frame（W: 393, H: 120） - 按
O画一个圆形（W: 60, H: 60）作为头像 - 按
T添加昵称和 ID 文字 - 选中这些元素，按
Shift + A添加 Auto Layout
┌──────────────────────────────┐
│ │
│ ┌──────┐ │
│ │ │ 用户昵称 │ <-- 用户信息区域
│ │ 头像 │ ID: 123456 │ W:393 H:120
│ │ │ │
│ └──────┘ │
│ │
└──────────────────────────────┘Step 4：创建菜单列表
创建一个菜单项组件：
- 画一个 Frame（W: 393, H: 56）
- 左侧添加图标（可用文字 emoji 代替）
- 中间添加菜单文字
- 右侧添加箭头">"
- 添加 Auto Layout
- 右键 > Create Component（创建组件）
复制 5 个实例，分别修改文字
单个菜单项组件结构：
┌───────────────────────────────────────┐
│ [图标] 菜单文字 > │ H: 56
└───────────────────────────────────────┘
│ padding: 16 │ │ spacing: 12 │
Auto Layout: 水平排列, 间距 12, 内边距 16Step 5：创建底部 Tab 栏
- 按
F创建 Frame（W: 393, H: 83） - 添加 4 个 Tab 项（首页、分类、购物车、我的）
- "我的" Tab 设为选中状态（蓝色）
- 添加 Auto Layout，水平排列，均匀分布
底部 Tab 栏：
┌──────────────────────────────────────────┐
│ │
│ 🏠 📋 🛒 👤 │
│ 首页 分类 购物车 我的 │ <-- "我的"为蓝色
│ │
└──────────────────────────────────────────┘
W: 393 H: 83
Auto Layout: 水平, Space BetweenStep 6：整合所有部分
- 选中所有元素
- 确保它们在主 Frame 内
- 给主 Frame 添加 Auto Layout（垂直排列）
- 调整各部分间距
最终图层结构：
> 个人中心 (Frame - iPhone 16 Pro)
> 顶部导航栏 (Frame)
- "个人中心" (Text)
> 用户信息区 (Frame)
- 头像 (Ellipse)
- 用户昵称 (Text)
- ID (Text)
> 菜单列表 (Frame)
> ◇ 菜单项 - 我的订单 (Instance)
> ◇ 菜单项 - 收货地址 (Instance)
> ◇ 菜单项 - 优惠券 (Instance)
> ◇ 菜单项 - 我的收藏 (Instance)
> ◇ 菜单项 - 设置 (Instance)
> 退出登录按钮 (Frame)
> 底部 Tab 栏 (Frame)完成后的检查清单
┌──────────────────────────────────────────┐
│ 设计完成检查清单 │
├──────────────────────────────────────────┤
│ │
│ [ ] 图层命名清晰有意义 │
│ [ ] 使用了 Auto Layout │
│ [ ] 可复用元素做成了组件 │
│ [ ] 颜色和字体使用了样式 │
│ [ ] 间距和对齐一致 │
│ [ ] 所有文字可读（字号 >= 12px） │
│ [ ] 按钮尺寸足够（>= 44pt） │
│ │
└──────────────────────────────────────────┘协作功能
Figma 最强大的优势之一就是协作功能。以下是 PM 最常用的协作功能：
1. 评论功能（Comments）
如何添加评论：
1. 按 C 键切换到评论模式
2. 点击要评论的位置
3. 输入评论内容
4. @ 团队成员
┌──────────────────────────┐
│ │
│ ┌──────────────┐ │
│ │ 登录按钮 │ │
│ └──────┬───────┘ │
│ │ │
│ ┌────┴────────────┐ │
│ │ 💬 @设计师小王 │ │
│ │ 这个按钮的圆角 │ │
│ │ 建议改为 8px │ │
│ │ │ │
│ │ [回复] [解决] │ │
│ └─────────────────┘ │
│ │
└──────────────────────────┘评论使用技巧：
| 技巧 | 说明 |
|---|---|
| @ 提及 | @团队成员让对方收到通知 |
| 标记解决 | 已处理的评论标记为"Resolved" |
| 回复追踪 | 在同一评论下回复，保持上下文 |
| 表情回应 | 快速表达认同或疑问 |
2. 分享链接
分享方式：
┌────────────────────────────────┐
│ Share 分享设置 │
├────────────────────────────────┤
│ │
│ 链接权限： │
│ ○ 仅邀请的人可访问 │
│ ● 拥有链接的人可查看 │ <-- PM 常用设置
│ ○ 拥有链接的人可编辑 │
│ │
│ 邀请团队成员： │
│ [输入邮箱地址...] │
│ │
│ 角色： │
│ · Can View (仅查看) │
│ · Can Edit (可编辑) │
│ │
│ [复制链接] │
│ │
└────────────────────────────────┘PM 分享建议：
- 给开发/测试分享：查看权限即可
- 给设计师分享：编辑权限
- 给领导/客户分享：查看权限 + Prototype 链接
3. Dev Mode（开发模式）
Dev Mode 是 Figma 为开发者提供的专属模式，PM 也需要了解。
Dev Mode 提供的信息：
┌────────────────────────────────────────────┐
│ Dev Mode │
├────────────────────────────────────────────┤
│ │
│ 选中元素后可查看： │
│ │
│ 1. 尺寸和间距 │
│ W: 120px H: 44px │
│ Margin: 16px │
│ Padding: 12px 24px │
│ │
│ 2. CSS 代码 │
│ background: #1677FF; │
│ border-radius: 8px; │
│ font-size: 16px; │
│ │
│ 3. 颜色值 │
│ Fill: #1677FF (Primary) │
│ │
│ 4. 字体信息 │
│ Font: PingFang SC │
│ Weight: Medium │
│ Size: 16px │
│ Line Height: 24px │
│ │
└────────────────────────────────────────────┘4. 版本历史（Version History）
版本历史功能：
┌────────────────────────────────────┐
│ Version History │
├────────────────────────────────────┤
│ │
│ ● 当前版本 │
│ 今天 14:30 - 你 │
│ │
│ ○ V2.0 - 评审后修改 │ <-- 可以命名版本
│ 今天 10:15 - 你 │
│ │
│ ○ V1.0 - 初稿 │
│ 昨天 18:00 - 你 │
│ │
│ ○ 自动保存 │ <-- Figma 自动保存
│ 昨天 16:30 - 小王 │
│ │
│ 可以恢复到任意历史版本 │
│ │
└────────────────────────────────────┘
保存命名版本：Ctrl/Cmd + Alt + S版本管理建议：
- 重要节点手动保存命名版本（如"评审前版本""终稿"）
- 大幅修改前先保存当前版本
- 版本名称写清楚改了什么
Figma 快捷键速查表
基础操作
| 快捷键 | 功能 | 使用频率 |
|---|---|---|
V | 选择工具 | 极高 |
F | Frame 工具 | 高 |
R | 矩形工具 | 高 |
O | 椭圆工具 | 中 |
L | 画线工具 | 低 |
T | 文字工具 | 高 |
P | 钢笔工具 | 低 |
C | 评论工具 | 中 |
编辑操作
| 快捷键 | 功能 | 使用频率 |
|---|---|---|
Ctrl/Cmd + C | 复制 | 极高 |
Ctrl/Cmd + V | 粘贴 | 极高 |
Ctrl/Cmd + D | 原位复制 | 高 |
Ctrl/Cmd + Z | 撤销 | 极高 |
Ctrl/Cmd + Shift + Z | 重做 | 高 |
Ctrl/Cmd + G | 编组 | 高 |
Ctrl/Cmd + Shift + G | 取消编组 | 中 |
Ctrl/Cmd + Alt + G | Frame 打组 | 高 |
视图操作
| 快捷键 | 功能 | 使用频率 |
|---|---|---|
Ctrl/Cmd + + | 放大 | 高 |
Ctrl/Cmd + - | 缩小 | 高 |
Ctrl/Cmd + 0 | 缩放到 100% | 中 |
Ctrl/Cmd + 1 | 缩放适配全部 | 高 |
Ctrl/Cmd + 2 | 缩放适配选中 | 高 |
Space + 拖拽 | 平移画布 | 极高 |
组件和布局
| 快捷键 | 功能 | 使用频率 |
|---|---|---|
Ctrl/Cmd + Alt + K | 创建组件 | 高 |
Shift + A | 添加 Auto Layout | 极高 |
Ctrl/Cmd + Alt + S | 保存命名版本 | 中 |
Alt + 拖拽 | 复制元素 | 极高 |
Shift + 拖拽 | 等比缩放/水平垂直移动 | 高 |
对齐操作
| 快捷键 | 功能 |
|---|---|
Alt + A | 左对齐 |
Alt + D | 右对齐 |
Alt + W | 顶对齐 |
Alt + S | 底对齐 |
Alt + H | 水平居中 |
Alt + V | 垂直居中 |
快捷键记忆口诀：
V - View (查看/选择)
F - Frame (画板)
R - Rectangle (矩形)
O - Oval (椭圆)
T - Text (文字)
C - Comment (评论)
Shift + A = Auto Layout (自动布局)
Ctrl + Alt + K = Komponent (组件，K开头方便记忆)推荐学习资源
官方资源
| 资源 | 链接 | 说明 |
|---|---|---|
| Figma 官方帮助中心 | help.figma.com | 最权威的学习资料，涵盖所有功能 |
| Figma 官方 YouTube | YouTube 搜索 "Figma" | 官方教程视频，有新功能介绍 |
| Figma Community | 在 Figma 内访问 | 免费的模板、组件库、设计文件 |
| Figma Blog | figma.com/blog | 设计趋势、功能更新、案例分享 |
推荐学习路径
┌──────────────────────────────────────────────────────┐
│ PM 学习 Figma 路线图 │
├──────────────────────────────────────────────────────┤
│ │
│ 第1周：基础操作 │
│ ├─ 熟悉界面和工具栏 │
│ ├─ 学会创建 Frame、矩形、圆形、文字 │
│ ├─ 掌握选择、移动、缩放、对齐 │
│ └─ 练习：临摹一个简单的 App 页面 │
│ │
│ 第2周：核心概念 │
│ ├─ 理解 Auto Layout（重点！） │
│ ├─ 学会创建和使用组件 │
│ ├─ 了解样式（颜色、文字、效果） │
│ └─ 练习：设计一个包含列表的页面 │
│ │
│ 第3周：原型和交互 │
│ ├─ 学会添加页面跳转交互 │
│ ├─ 了解 Prototype 模式 │
│ ├─ 学会分享原型链接 │
│ └─ 练习：做一个 3-5 页的可交互原型 │
│ │
│ 第4周：协作和进阶 │
│ ├─ 掌握评论和版本管理 │
│ ├─ 了解 Dev Mode │
│ ├─ 探索 Community 资源 │
│ └─ 练习：完成一个完整的产品原型 │
│ │
│ 持续提升： │
│ ├─ 学习使用社区组件库 │
│ ├─ 了解设计系统的基本概念 │
│ └─ 尝试使用 Figma 的 AI 功能 │
│ │
└──────────────────────────────────────────────────────┘中文学习资源
| 资源 | 平台 | 推荐理由 |
|---|---|---|
| Figma 中文社区 | 微信公众号 | 中文教程和案例 |
| B站 Figma 教程 | bilibili.com | 大量免费视频教程 |
| 即时设计 | js.design | 国产 Figma 替代品，中文界面 |
| 蓝湖 | lanhuapp.com | 设计协作平台，有 Figma 插件 |
推荐练习项目
从简单到复杂的练习路线：
Level 1: 临摹静态页面
┌──────────────────────┐
│ 临摹你常用 App 的 │
│ 一个页面（如设置页） │
│ 预计耗时：1-2 小时 │
└──────────────────────┘
│
v
Level 2: 设计多页面流程
┌──────────────────────┐
│ 设计一个登录注册流程 │
│ (3-5 个页面) │
│ 预计耗时：3-4 小时 │
└──────────────────────┘
│
v
Level 3: 完整产品原型
┌──────────────────────┐
│ 设计一个小型 App 原型 │
│ (10-15 个页面+交互) │
│ 预计耗时：1-2 天 │
└──────────────────────┘
│
v
Level 4: 使用组件库
┌──────────────────────┐
│ 使用社区组件库 │
│ 快速搭建产品原型 │
│ 并添加完整交互 │
│ 预计耗时：1 天 │
└──────────────────────┘本节小结
┌────────────────────────────────────────────────────┐
│ 本节核心要点 │
├────────────────────────────────────────────────────┤
│ │
│ 1. Figma 是当前最主流的设计工具 │
│ 浏览器即可使用，实时协作能力最强 │
│ │
│ 2. PM 不需要达到设计师水平 │
│ 能画低保真原型、看懂设计稿即可 │
│ │
│ 3. 五个核心概念务必掌握： │
│ Frame、图层、组件、Auto Layout、样式 │
│ │
│ 4. Auto Layout 是最重要的功能 │
│ 掌握它能让你的效率翻倍 │
│ │
│ 5. 善用协作功能： │
│ 评论、分享、Dev Mode、版本历史 │
│ │
│ 6. 学习建议： │
│ 先看教程了解概念，再动手临摹练习 │
│ 实践出真知，多练多用 │
│ │
└────────────────────────────────────────────────────┘练习任务
- 注册一个 Figma 账号，熟悉界面布局
- 创建一个 iPhone 画板，画出"个人中心"页面
- 将按钮做成组件，练习复用
- 为菜单列表添加 Auto Layout
- 添加评论，体验协作功能
- 尝试为 2-3 个页面添加跳转交互