Figma 是什么？

第 1 步：认识 Figma

✅ 什么是 Figma？

• 一款基于浏览器的UI/UX 设计工具
• 支持实时协作（多人同时编辑）
• 免费版功能强大，适合个人和团队
• 可用于设计网页、App、图标、原型等

💡 访问 https://www.figma.com，注册账号并登录。

---

第 2 步：熟悉界面

打开 Figma 后，点击 “New design file” 创建新文件。

主要区域：

1. 工具栏（左侧）：选择、画框、形状、文字、钢笔等
2. 画布（中间）：你的设计区域
3. 右侧面板：属性设置（尺寸、颜色、字体等）
4. 顶部菜单：文件、分享、原型、插件等

🛠️ 实践任务：
在画布上用 Rectangle（矩形） 工具画一个 375×812 的手机屏幕（iPhone 尺寸），作为你的画板（Frame）。

---

第 3 步：基础操作与简单 UI

🎯 目标：制作一个“登录页面”

步骤 1：创建画板（Frame）

• 选中 Frame 工具（F）
• 在画布点击，选择 iPhone 13/14 – 375×812

步骤 2：添加标题

• 选 Text 工具（T）
• 点击画板，输入 “Welcome Back”
• 在右侧面板设置字体：Bold，24px，居中对齐

步骤 3：添加输入框

• 用 Rectangle 工具 画一个宽 300px、高 50px 的矩形
• 设置圆角（Corner Radius）为 8
• 填充色设为白色，边框（Stroke）设为浅灰色（#E0E0E0）
• 复制两个（Ctrl/Cmd + D），分别作为“邮箱”和“密码”输入框

步骤 4：添加按钮

• 再画一个矩形（宽 300px，高 50px）
• 填充色设为蓝色（如 #4F46E5）
• 添加白色文字 “Login”，居中
• 设置圆角 8

步骤 5：对齐与间距

• 选中所有元素（按住 Shift 多选）
• 点击右侧面板的 “Align center”（水平居中）
• 手动调整垂直间距（上下留白）

✅ 你现在有了一个简单的登录界面！

---

第 4 步：使用样式与组件

🎨 创建文本样式（Text Styles）

• 选中 “Welcome Back” 文字
• 右侧面板点击 “+” 旁的 “Create style”
• 命名为 “Heading / Large”

以后所有标题都可以一键应用这个样式！

🧩 创建组件（Components）

• 选中“Login”按钮
• 点击右上角 “Create component”（或按 Alt + Cmd/Ctrl + K）
• 现在你可以复制这个按钮（实例），修改文字为 “Sign Up”，但样式保持一致

💡 组件的好处：改一个，所有实例自动更新！

---

第 5 步：简单交互原型

🔄 添加点击跳转效果

1. 切换到顶部 “Prototype” 标签
2. 选中 “Login” 按钮
3. 拖动右侧出现的 “+” 连接点 到另一个 Frame（比如你新建一个“Home”页面）
4. 设置 On Click → Navigate To → Home Frame
5. 点击右上角 ▶️ Present 预览原型

✅ 现在你可以点击按钮跳转页面，模拟真实 App 体验！

---

第 6 步：协作与导出

👥 分享设计

• 点击右上角 “Share”
• 设置权限为 “Can view” 或 “Can edit”
• 复制链接发给同事或朋友

📤 导出资源

• 选中图标或按钮
• 在右侧面板底部点击 “Export”
• 选择格式（PNG、SVG 等）和倍数（1x, 2x）
• 点击 “Export” 下载

---

---

☀️ Figma 实战：设计一个“天气 App”界面

🎯 设计目标

• 创建一个主屏幕：显示当前城市天气 + 未来 5 天预报
• 风格：简洁、现代、高可读性
• 包含：温度、天气图标、日期、城市名、简要描述（如“晴”）

---

第 1 步：准备画板（2 分钟）

1. 打开 Figma，新建设计文件
2. 按 F 键选择 Frame 工具
3. 在画布点击，选择设备模板：iPhone 14 – 375×812 px

💡 命名这个 Frame 为 “Weather Home”

---

第 2 步：设计顶部状态栏（3 分钟）

添加状态栏元素（可选，Figma 自带）

• 在资源库中搜索 “iPhone status bar” 或手动创建：
  • 画一条 375×44 的矩形（顶部留白）
  • 添加文字：时间 “9:41”（字体：SF Pro, 17pt, 黑色）
  • 右侧加电池图标和信号图标（可用简单矩形模拟）

✅ 小技巧：Figma 社区有免费状态栏组件，搜索 “iOS Status Bar” 直接拖入使用。

---

第 3 步：添加城市与当前天气（10 分钟）

1. 城市名称

• 使用 Text 工具（T）
• 输入：杭州
• 字体：Bold，28px，颜色 #111827

2. 天气描述

• 新建文字：晴 · 体感 28°C
• 字体：Regular，16px，颜色 #6B7280
• 放在城市名下方，间距 4px

3. 当前温度（大字号）

• 输入：26°
• 字体：Bold，72px，颜色 #1F2937
• 放在描述下方，左对齐

4. 天气图标（用简单图形模拟）

• 用 Ellipse 工具（O） 画一个 60×60 的黄色圆形（#FBBF24）代表太阳
• 放在温度右侧，垂直居中对齐
• 或从 https://www.figma.com/community 搜索 “weather icons” 导入 SVG

✅ 对齐技巧：选中温度和图标 → 右键 → “Align vertical centers”

---

第 4 步：添加今日详情（可选，5 分钟）

在温度下方添加一行小信息，例如：

湿度 65%    风速 12 km/h    紫外线 中等

• 字体：14px，颜色 #9CA3AF
• 用空格或制表符分隔，或用多个 Text 并设置间距

---

第 5 步：未来 5 天天气预报（10 分钟）

创建预报区域标题

• 文字：未来五天
• 字体：Semibold，20px，颜色 #111827
• 顶部留白 32px

设计每日预报卡片（使用 Auto Layout 更高效，但初学者可手动）

每行包含：

• 星期（如“周二”）
• 天气图标（小太阳/云）
• 高温 / 低温（如 30° / 22°）

示例一行：

1. 画一条水平线（或留白分隔）
2. 添加文字 “周三”（16px, #4B5563）
3. 右侧放小图标（30×30）
4. 再右侧放文字 “31° / 23°”（16px, #1F2937）

✅ 快速复制：做好一行后，按 Cmd/Ctrl + D 复制 4 次，修改文字即可

排列建议：

• 所有行左对齐
• 行间距 16px
• 整体宽度不超过 300px，居中或左对齐

---

第 6 步：美化与统一风格（5 分钟）

创建文本样式（提升效率）

• 选中“杭州” → 右侧面板 → Create style → 命名 “Text / City”
• 同样为温度、日期、预报文字创建样式

使用颜色样式（可选）

• 主色：深灰 #111827（文字）
• 辅助色：浅灰 #6B7280（次要信息）
• 强调色：蓝色 #3B82F6（可用来突出高温）

💡 小技巧：背景设为纯白（#FFFFFF）或极浅灰（#F9FAFB）提升清新感

---

第 7 步：（可选）添加交互原型

1. 点击顶部 Prototype 标签
2. 选中某一天的预报行
3. 拖动连接点 ➝ 新建一个 Frame（“Detailed Forecast”）
4. 设置动效：Smart Animate
5. 点击 ▶️ 预览，点击即可跳转详情页

---

🎨 最终效果预览（文字描述）

[状态栏：9:41  📶 🔋]

杭州
晴 · 体感 28°C
26°    ☀️

湿度 65%    风速 12 km/h

未来五天
周二    ☀️    30° / 22°
周三    ⛅    29° / 23°
周四    🌧️    27° / 21°
周五    🌦️    28° / 20°
周六    ☀️    31° / 24°

---

📦 附加资源推荐

• 免费天气图标：
  https://www.figma.com/community/file/734698704632389939/Weather-Icons

---