EP02. “Frame、形状、文字与图层：画出第一个网页版面”
🔒 登录后可标记已读- 在 Figma 里，一个网页画面、一个按钮、一张卡片，都是用 Frame（框架） 包起来的——先搞懂 Frame，后面的 Auto Layout、组件、原型才接得上
- Frame 和 Group 看起来很像，但 Frame 有自己的尺寸、背景、可以裁切内容，也能套 Auto Layout；设计网页时几乎都用 Frame
- 最常用的工具只有几个：F Frame、R 矩形、O 圆形、T 文字、P 钢笔，记住快捷键速度会快很多
- 图层命名整齐，之后交给开发者或自己回头改，都省很多时间
重点内容
常用工具与快捷键
| 工具 | 快捷键 | 用途 |
|---|---|---|
| Move | V | 选取、移动 |
| Frame | F（或 A） | 建立画面 / 容器 |
| Rectangle | R | 矩形、按钮底色、图片占位 |
| Ellipse | O | 圆形、头像 |
| Line | L | 分隔线 |
| Pen | P | 自由画向量图形 |
| Text | T | 文字 |
| Hand | 按住空格 | 平移画布 |
| Comment | C | 留言 |
Frame：画面与容器
建立网页画面：
- 按
F，右侧面板会出现预设尺寸清单 - 选 Desktop（例如 1440 × 1024）或 Phone（例如 iPhone 尺寸），也可以直接在画布上拖出任意大小
- Frame 名称会显示在左上角，双击可以改名，例如「首页 - Desktop」
Frame vs Group：
| Frame | Group（Ctrl+G） | |
|---|---|---|
| 尺寸 | 自己有固定尺寸 | 跟着里面的物件大小变 |
| 背景 / 圆角 / 描边 | ✅ 可以设 | ❌ 没有 |
| 裁切超出的内容 | ✅ Clip content | ❌ |
| 可套 Auto Layout | ✅ | ❌ |
| 可当原型的一页 | ✅（最上层 Frame） | ❌ |
| 适合 | 画面、卡片、按钮、区块 | 暂时把几个物件绑在一起移动 |
💡 已经选了好几个物件，想用 Frame 包起来：按 Ctrl+Alt+G（Frame selection）。
形状与图片
R拉出矩形后，右侧 Design 面板可以设：- Fill 填色（颜色、渐层、图片）
- Stroke 描边
- Corner radius 圆角
- Effects 阴影、模糊
- 放图片：直接把图片文件拖进 Figma，或选一个矩形 → Fill 改成 Image → 上传
- 图片填充模式：Fill（填满裁切）、Fit（完整显示）、Crop（手动裁切）、Tile（重复）
文字
T点一下是自动宽度文字（一直往右延伸）；拖出一个框是固定宽度（会自动换行）- 右侧面板设定字体、大小、行高（Line height）、字距（Letter spacing）、对齐
- 中文字体可以用 Google Fonts 的 Noto Sans SC、Noto Serif SC，网页版不用另外安装
颜色与文字样式：一次改全部
同一个品牌色用在几十个地方，要改色时一个个改会改到崩溃。建立样式（Style）或变量（Variable）：
- 选取有这个颜色的物件，在 Fill 旁边按 四个小点图标（Apply styles and variables）
- 按 + 建立 Color style，命名例如
Brand/Primary - 之后其他物件都套这个样式；改一次样式，全部跟着变
文字样式同理：例如 Heading/H1、Body/Regular。
📌 样式名称用 / 分组（例如 Brand/Primary、Brand/Secondary），在清单里会自动变成资料夹，比较好找。
图层（Layers）
| 操作 | 做法 |
|---|---|
| 改名 | 在左侧 Layers 双击图层名称 |
| 调上下顺序 | 拖拉图层，或 Ctrl+] 上移、Ctrl+[ 下移 |
| 锁定 | 图层旁的 🔒（避免不小心移动背景） |
| 隐藏 | 图层旁的 👁 |
| 选取 Frame 里面的物件 | Ctrl + 点击（深层选取），或双击进入 |
| 批量改名 | 选取多个图层 → Ctrl+R |
命名建议：
| ❌ | ✅ |
|---|---|
| Rectangle 23 | Hero 背景 |
| Frame 105 | 产品卡片 |
| Group 8 | 页脚 / 联络资料 |
对齐与间距
- 选取多个物件后，右侧面板上方的对齐按钮：左、水平置中、右、上、垂直置中、下
- 移动物件时出现的红色参考线和数字就是跟旁边物件的距离
- 选一个物件后按住
Alt，鼠标移到另一个物件上，会显示两者之间的距离 - 用方向键移动 1px，
Shift+ 方向键移动 10px - 建议间距用 8 的倍数（8、16、24、32、48），整体看起来比较整齐
学完你会
- ✅ 用 Frame 建立 Desktop、Phone 画面
- ✅ 分得清 Frame 和 Group
- ✅ 画形状、放图片、打文字
- ✅ 建立颜色、文字样式，一次改全部
- ✅ 整理图层、对齐与测量间距
常见错误
- ❌ 整个网页用 Group 包起来：Group 没有背景、不能套 Auto Layout，也不能当原型的一页。
- ❌ 每个颜色都手打色码：改品牌色时要一个个找，应该建 Color style。
- ❌ 图层全部叫 Rectangle 23、Frame 105：自己和开发者都找不到东西。
- ❌ 点不到 Frame 里面的物件：用
Ctrl+ 点击深层选取，或先双击进去。 - ❌ 间距随便拉：用 8 的倍数，版面比较整齐。
Sources
官方文档：