一只捡星星的熊

2.1 Canvas：画布#

Canvas 是无限大的工作区域。你可以在画布上放很多页面、模块、组件和草稿。

注意：

• Canvas 本身不是页面
• 真正的页面通常放在 Frame 里
• 不要把所有东西散落在画布上，要用 Frame、Section 和 Page 管理

2.2 Page：文件内的分页#

一个 Figma 文件里可以有多个 Page。

常见分法：

• Cover：封面和说明
• Wireframe：低保真线框图
• Design：高保真页面
• Components：组件
• Archive：废弃稿
• Handoff：交付页面

Page 的作用是整理文件，而不是设计页面本身。

2.3 Frame：框架 / 画板 / 容器#

Frame 是 Figma 中最重要的容器，可以理解成页面、屏幕、模块或组件容器。

常见 Frame：

• 手机屏幕
• 网页页面
• 卡片容器
• 按钮容器
• 导航栏容器
• 弹窗容器

在 Figma 中，新手应该优先使用 Frame，而不是普通 Group。

2.4 Layer：图层#

画布上的每个对象都是图层，包括：

• Frame
• Text
• Shape
• Image
• Component
• Instance
• Vector

左侧 Layers 面板会显示图层结构。图层结构是否清楚，直接影响你后续修改、做组件和交付。

2.5 Component：组件#

Component 是可复用的 UI 元素。

例子：

• 按钮
• 输入框
• 标签
• 卡片
• 顶部导航
• 底部标签栏

组件有一个主组件，复制出去的是实例。修改主组件后，实例会同步更新。

2.6 Instance：实例#

Instance 是组件的使用副本。

比如你做了一个 Button / Primary 主组件，在页面里复制 10 个按钮，这 10 个就是实例。你可以改实例里的文字，但它仍然受主组件控制。

2.7 Style：样式#

Style 是可复用的视觉样式。

常见 Style：

• 颜色样式
• 文字样式
• 效果样式
• 网格样式

例如你可以创建一个颜色样式 Color / Brand / Primary，之后所有主按钮都引用它。

2.8 Variable：变量#

Variable 是更灵活的设计变量，可以保存颜色、数字、文字、布尔值，并支持不同模式。

常见用途：

• 亮色 / 暗色模式
• 品牌主题切换
• 间距 Token
• 圆角 Token
• 原型中的状态变化

简单理解：

• Style 更像“固定可复用样式”
• Variable 更像“可被切换、可被引用、可变动的设计 Token”

2.9 Prototype：原型#

Prototype 是让设计稿可以点击、跳转、弹窗、滑动和模拟操作的功能。

它解决的问题是：

• 用户点击按钮后去哪
• 弹窗怎么出现
• 页面怎么切换
• 列表怎么滚动
• 交互流程是否合理

2.10 Library：库#

Library 是团队共享组件、样式和变量的地方。

比如团队可以有一个基础组件库，所有项目都引用同一套按钮、输入框和颜色，保证产品一致。

3.1 Workspace / Team#

这是团队空间。个人账号也会有自己的草稿区。

常见内容：

• 团队成员
• 项目
• 文件
• 共享库
• 权限设置

3.2 Project#

Project 用来分类文件。

例子：

• 公司官网改版
• 移动 App 3.0
• 后台管理系统
• 组件库

3.3 File#

File 是具体设计文件。

一个 File 可以包含很多页面、组件、原型和设计稿。

新手建议：

• 一个练习项目放一个文件
• 不要所有练习都堆在一个文件里
• 文件名写清楚，例如 记账 App - UI 练习

3.4 Page#

Page 是文件内部的分页。

推荐结构：

1
00 Cover
2
01 Research
3
02 Wireframe
4
03 UI Design
5
04 Components
6
05 Prototype
7
06 Handoff
8
99 Archive

不是每个小项目都必须这么完整，但复杂项目最好有清楚结构。

3.5 Section#

Section 用来在画布上分组管理多个 Frame。

适合：

• 把同一流程的页面框起来
• 把同一版本的页面框起来
• 标注“已确认”“待评审”“交付中”

3.6 Frame#

Frame 是实际设计页面或模块。

常见命名：

1
Login / Default
2
Login / Error
3
Home / Empty
4
Home / Loaded
5
Product Detail / Default
6
Settings / Mobile
7
Dashboard / Desktop

命名越清楚，后续做原型、评审和交付越轻松。

4.1 顶部工具栏#

顶部工具栏包含常用工具：

• Move：选择和移动
• Frame：创建 Frame
• Shape：矩形、圆形、线条、箭头等
• Pen：钢笔工具
• Text：文字工具
• Resources：组件、插件、资源
• Hand：拖动画布
• Comment：评论
• Present：演示原型

4.2 左侧面板#

左侧有两个常用区域：

• Layers：图层列表
• Assets：组件资源

Layers 用来管理当前 Page 的所有图层。

Assets 用来查找当前文件或共享库中的组件。

4.3 中间画布#

中间是无限画布。你在这里放置 Frame、组件、图形和文字。

常用操作：

• 滚轮缩放或平移
• 拖动对象
• 框选多个对象
• 查看页面整体结构

4.4 右侧属性面板#

右侧是最重要的属性设置区域。

根据选择对象不同，会显示：

• Design：设计属性
• Prototype：原型交互
• Inspect / Dev Mode：开发查看

Design 常见设置：

• 位置和尺寸
• Auto Layout
• Constraints
• Fill
• Stroke
• Effects
• Text
• Export

4.5 顶部文件栏和协作区#

通常可以看到：

• 文件名
• 分享按钮
• 协作者头像
• 评论
• 版本历史

多人协作时，每个人的光标都会显示在画布上。

5.1 选择对象#

常用方式：

• 单击选择
• 拖拽框选
• 在左侧 Layers 面板选择
• 双击进入嵌套对象
• Ctrl + 点击可以穿透选择更深层对象

建议：

复杂页面中，左侧图层面板比直接点画布更可靠。

5.2 移动对象#

移动对象：

• 鼠标拖动
• 方向键微调
• Shift + 方向键大步移动

一般情况下：

• 方向键移动 1px
• Shift + 方向键移动 10px

5.3 缩放画布#

常用：

• Ctrl + + 放大
• Ctrl + - 缩小
• Ctrl + 0 适应当前视图
• Ctrl + 1 查看全部
• Ctrl + 2 缩放到选中对象

5.4 复制对象#

常用：

• Ctrl + C 复制
• Ctrl + V 粘贴
• Alt + 拖拽复制
• Ctrl + D 重复上一次复制或变换

快速做列表时，Alt 拖动一个列表项，再用 Ctrl + D 可以连续复制。

5.5 编组和取消编组#

快捷键：

• Ctrl + G 编组
• Ctrl + Shift + G 取消编组

但是新手要注意：

Group 只是简单打包，不具备 Frame 的很多布局能力。做 UI 时，很多场景更推荐使用 Frame。

5.6 Frame Selection#

把选中的对象包进 Frame：

• Ctrl + Alt + G

这个操作非常重要。比如你选中图标和文字后，可以把它们包成一个按钮 Frame，再添加 Auto Layout。

5.7 命名图层#

双击图层名可以重命名。

推荐命名方式：

1
Button
2
Icon / Search
3
Text / Title
4
Card / Product
5
Nav / Top
6
Input / Email
7
Modal / Delete Confirm

不要长期使用：

1
Rectangle 32
2
Frame 891
3
Group 44
4
Text 12

图层命名清楚，后续做组件、交付和维护都会轻松很多。

6.1 创建 Frame#

按 F 选择 Frame 工具，然后在画布上拖拽，或者在右侧选择预设尺寸。

常见预设：

• Phone
• Tablet
• Desktop
• Watch
• Paper
• Social Media

常用设计稿尺寸：

6.2 Frame 和 Group 的区别#

UI 设计中，大多数时候优先用 Frame。

6.3 Clip Content#

Frame 可以开启 Clip content，让超出 Frame 的内容被裁剪。

适合：

• 手机页面裁剪
• 卡片图片裁剪
• 滚动区域
• 弹窗内容区域

注意：

如果内容莫名其妙看不到，检查是否被父 Frame 的 Clip content 裁掉。

6.4 Frame 背景#

Frame 可以设置 Fill。

常见背景：

• App 页面：#FFFFFF
• 后台页面：#F5F7FA
• 卡片：#FFFFFF
• 弹窗遮罩：半透明黑色

建议：

页面级 Frame 一定要设置背景色，不要透明。透明背景在导出和演示时容易出问题。

7.1 图层顺序#

左侧图层面板中，越靠上的图层在画布上越靠前。

例如：

1
Modal
2
Overlay
3
Page Content
4
Background

Modal 应该在 Overlay 上方，Overlay 应该在页面内容上方。

7.2 图层嵌套#

一个清楚的按钮图层结构可能是：

1
Button / Primary
2
  Icon / Plus
3
  Label

一个清楚的卡片结构可能是：

1
Card / Product
2
  Image
3
  Content
4
    Title
5
    Price Row
6
      Price
7
      Tag
8
  Actions
9
    Button / Add

7.3 图层命名规则#

推荐命名：

• 用英文或中英文都可以，但保持统一
• 组件名用 / 分层
• 状态写清楚
• 避免默认名称

例子：

1
Button / Primary / Default
2
Button / Primary / Hover
3
Button / Primary / Disabled
4
Input / Default
5
Input / Error
6
Card / Course
7
Nav / Sidebar

7.4 锁定和隐藏图层#

常见操作：

• 锁定背景，避免误选
• 隐藏废弃元素
• 锁定参考图

注意：

不要把大量无用隐藏图层留在最终交付稿里。隐藏图层太多会影响文件理解。

8.1 矩形#

矩形是 UI 中最常见图形。

用途：

• 按钮背景
• 卡片背景
• 输入框
• 图片占位
• 分割区域
• 弹窗

常见属性：

• Fill：填充色
• Stroke：描边
• Corner radius：圆角
• Effects：阴影或模糊

8.2 圆角#

常见圆角：

注意：

一个产品里的圆角要有规律，不要 3px、5px、7px、11px 随便混用。

8.3 线条#

线条常用于：

• 分割线
• 图表线
• 箭头
• 简单图标

UI 中分割线通常不要太重。常见颜色是浅灰，例如 #E5E7EB。

9.1 Pen 工具#

Pen 工具可以创建路径。

适合：

• 自定义图标
• 简单插画
• 不规则形状

新手不需要一开始深入矢量绘图。UI 入门阶段更重要的是布局、组件和规范。

9.2 Boolean Operations#

布尔运算用于组合图形：

• Union Selection：合并
• Subtract Selection：减去
• Intersect Selection：交集
• Exclude Selection：排除重叠

用途：

• 制作简单图标
• 制作特殊形状
• 合成矢量图形

9.3 Flatten#

Flatten 可以把图形合并成一个矢量路径。

注意：

Flatten 后可编辑性会下降，操作前最好确认是否还需要保留原结构。

10.1 创建文字#

按 T 选择文字工具。

两种方式：

• 单击画布：创建自适应宽度文本
• 拖拽画布：创建固定宽度文本框

建议：

正文、卡片标题、段落说明尽量使用固定宽度文本框，这样更接近真实 UI。

10.2 Text Resize#

Figma 文字框常见尺寸模式：

• Auto width：宽度随文字变化
• Auto height：宽度固定，高度随文字变化
• Fixed size：宽高固定

使用建议：

10.3 字号#

常见 UI 字号：

新手建议一个页面控制在 3 到 5 个字号。

10.4 行高#

推荐：

• 12px 字号：16px 行高
• 14px 字号：20px 行高
• 16px 字号：24px 行高
• 20px 字号：28px 行高
• 24px 字号：32px 行高

正文行高太小会拥挤，太大又会松散。

10.5 字重#

常用：

• Regular：正文
• Medium：强调
• Semibold：标题
• Bold：强标题

不要整页全用 Bold。粗体的作用是制造层级，用多了就没有层级。

10.6 Text Style#

当你反复使用同一套文字样式时，应该创建 Text Style。

例子：

1
Text / Display / 32
2
Text / Heading / 24
3
Text / Title / 20
4
Text / Body / 16
5
Text / Body / 14
6
Text / Caption / 12

好处：

• 修改全局字体更方便
• 页面视觉更统一
• 开发交付更清楚

11.1 导入图片#

常见方式：

• 拖拽图片到画布
• 复制图片后粘贴
• 在 Fill 里选择 Image

11.2 图片填充模式#

Figma 图片 Fill 常见模式：

• Fill：填满容器，可能裁剪
• Fit：完整显示，可能留白
• Crop：手动裁剪
• Tile：平铺

使用建议：

11.3 蒙版 Mask#

Mask 可以让一个形状裁剪另一个对象。

例子：

• 圆形头像
• 不规则图片裁剪
• 图片只显示在某个区域

常见步骤：

1. 准备一个形状
2. 把图片放在形状上方或下方
3. 选择两个对象
4. 使用 Mask

注意：

很多时候，用 Frame 加 Clip Content 比 Mask 更适合 UI 卡片裁剪。

12.1 Fill 填充#

Fill 可以是：

• 纯色
• 渐变
• 图片
• 视频

UI 中最常用的是纯色和图片。

常见用法：

• 页面背景
• 卡片背景
• 按钮背景
• 标签背景
• 图标颜色

12.2 Stroke 描边#

Stroke 用于边框。

常见设置：

• Inside
• Center
• Outside

UI 控件通常建议使用 Inside，这样尺寸更稳定。

常见描边：

• 输入框边框
• 卡片边框
• 分割线
• 标签轮廓

12.3 Effects 效果#

常见 Effects：

• Drop shadow：投影
• Inner shadow：内阴影
• Layer blur：图层模糊
• Background blur：背景模糊

UI 中投影要克制。

常见卡片阴影：

1
X: 0
2
Y: 4
3
Blur: 12
4
Spread: 0
5
Color: rgba(0, 0, 0, 0.08)

注意：

不要用很黑、很大的阴影。过重阴影会让页面显得廉价和混乱。

13.1 常见对齐#

右上角属性面板有对齐按钮：

• 左对齐
• 水平居中
• 右对齐
• 顶部对齐
• 垂直居中
• 底部对齐

13.2 分布#

当选中 3 个以上对象时，可以使用：

• 水平均匀分布
• 垂直均匀分布
• Tidy up

适合：

• 图标列表
• 卡片网格
• 功能入口

13.3 Smart Selection#

当多个对象间距有规律时，Figma 会显示粉色间距控制点。你可以直接拖动调整对象间距。

适合快速调整：

• 多个按钮之间的间距
• 列表项间距
• 图标网格间距

14.1 为什么需要 Constraints#

假设你设计一个手机页面，顶部有标题，右上角有设置按钮。当手机 Frame 变宽时：

• 标题可能需要保持居中
• 设置按钮需要贴住右侧
• 底部按钮需要贴住底部

这就是 Constraints 的作用。

14.2 常见约束#

水平方向：

• Left
• Right
• Left and right
• Center
• Scale

垂直方向：

• Top
• Bottom
• Top and bottom
• Center
• Scale

14.3 使用建议#

14.4 Constraints 和 Auto Layout 的关系#

Constraints 主要处理对象在父容器变大变小时的位置和尺寸。

Auto Layout 主要处理多个子元素之间的排列、间距和自适应。

简单理解：

• Constraints 管“跟父容器怎么变”
• Auto Layout 管“里面的元素怎么排”

复杂 UI 中，两者经常一起使用。

15.1 Auto Layout 能解决什么问题#

它可以解决：

• 按钮文字变长时，按钮自动变宽
• 卡片内容增多时，卡片自动变高
• 列表项之间保持固定间距
• 图标和文字始终垂直居中
• 页面宽度变化时，内容自动伸缩
• 组件内部元素按规则排列

15.2 添加 Auto Layout#

选择一个或多个对象后：

• 快捷键：Shift + A
• 或右侧面板点击 Auto Layout

常见操作：

1. 选中文字和图标
2. Shift + A
3. 设置方向为水平
4. 设置间距为 8
5. 设置 Padding
6. 得到一个按钮或信息行

15.3 Auto Layout 的方向#

常见方向：

• Horizontal：水平排列
• Vertical：垂直排列
• Wrap：自动换行排列

使用场景：

15.4 Gap：间距#

Gap 控制子元素之间的距离。

例子：

• 图标和文字：4px 或 8px
• 表单字段之间：16px
• 卡片内容之间：12px
• 页面模块之间：24px 或 32px

建议使用 4 或 8 的倍数，不要随意使用 13、17、23 这类没有规则的间距。

15.5 Padding：内边距#

Padding 控制容器边缘和内容之间的距离。

按钮例子：

1
按钮高度：40px
2
左右 Padding：16px
3
图标和文字 Gap：8px
4
圆角：6px

卡片例子：

1
卡片 Padding：16px 或 24px
2
内部 Gap：12px
3
模块间 Gap：16px

15.6 Hug、Fixed、Fill#

这是 Auto Layout 最容易让新手困惑的地方。

1
搜索栏
2
  Icon / Search：Fixed 20
3
  Input Text：Fill container
4
  Button：Hug contents

15.7 Alignment：对齐#

Auto Layout 容器可以设置子元素对齐方式。

常见：

• 左上
• 左中
• 居中
• 右中
• 底部
• Space between

Space between 常用于：

• 左侧标题 + 右侧操作
• 列表项左侧内容 + 右侧箭头
• 导航栏 Logo + 菜单

15.8 Auto Layout 做按钮#

基础按钮结构：

1
Button / Primary
2
  Icon / Plus
3
  Label

设置：

• Direction：Horizontal
• Gap：8
• Padding left/right：16
• Padding top/bottom：10
• Height：40 或 Hug
• Radius：6
• Fill：主色
• Label：白色，14px 或 16px

变体：

• 有图标
• 无图标
• 加载中
• 禁用
• 大尺寸
• 小尺寸

15.9 Auto Layout 做输入框#

输入框结构：

1
Input
2
  Label
3
  Field
4
    Icon
5
    Placeholder
6
  Help Text / Error Text

外层：

• Direction：Vertical
• Gap：8

Field：

• Direction：Horizontal
• Gap：8
• Padding：12 或 16
• Height：40 或 44
• Stroke：边框色
• Radius：6

Placeholder：

• Fill container
• 文本颜色用辅助色

15.10 Auto Layout 做卡片#

卡片结构：

1
Card / Course
2
  Cover Image
3
  Content
4
    Title
5
    Description
6
    Meta Row
7
      Avatar
8
      Author
9
      Time
10
  Button

设置：

• Card：Vertical，Gap 12，Padding 16
• Cover Image：Fill container，固定高度或比例
• Content：Vertical，Gap 8
• Meta Row：Horizontal，Gap 8
• Title：Fill container，Auto height

15.11 Auto Layout 做页面#

页面结构：

1
Mobile Page
2
  Status Bar
3
  Top Nav
4
  Content
5
    Search
6
    Category Tabs
7
    Card List
8
  Bottom Tab Bar

设置：

• Page：Vertical
• Top Nav：Fixed height
• Content：Fill container
• Bottom Tab Bar：Fixed height

注意：

页面级 Auto Layout 不一定要一开始就做。新手可以先把页面画出来，再逐步把关键模块改成 Auto Layout。

15.12 Auto Layout 新手练习顺序#

建议按这个顺序练：

1. 图标 + 文字的信息行
2. 一个主按钮
3. 一个带图标按钮
4. 一个输入框
5. 一个列表项
6. 一个商品卡片
7. 一个弹窗
8. 一个手机页面
9. 一个响应式 Web 卡片

15.13 Auto Layout 常见错误#

常见错误：

• 外层和内层都乱设 Fixed，导致无法自适应
• 文字没有设置 Auto height，长文本被裁掉
• 应该 Fill 的内容设置成 Hug，导致布局不铺满
• Padding 和 Gap 混乱，分不清内边距和元素间距
• 嵌套层级太多，每一层都没命名
• 组件里不用 Auto Layout，只靠手动摆放

判断是否做对：

• 改按钮文字，按钮能自动适配
• 改卡片标题长度，卡片不乱
• 调整父容器宽度，子元素按预期变化
• 插入或删除列表项，间距仍然统一

16.1 什么是组件#

组件是可复用设计元素。

例子：

• 按钮
• 输入框
• 标签
• 头像
• 卡片
• 导航栏
• 弹窗

组件的好处：

• 一处修改，多处更新
• 保持视觉一致
• 方便复用
• 方便做状态
• 方便开发理解

16.2 创建组件#

选择一个设计好的元素后：

• 快捷键：Ctrl + Alt + K
• 或右键选择 Create component

创建后，主组件会有紫色边框。

16.3 主组件和实例#

主组件：

• 组件的源头
• 修改后影响所有实例

实例：

• 主组件的副本
• 可以局部修改文字、图片等
• 仍然保持和主组件的关联

16.4 Override：覆盖#

实例里可以覆盖部分内容，例如：

• 按钮文字
• 图标
• 图片
• 文本颜色
• 显示或隐藏某些层

但如果你修改了实例的结构，可能会破坏和主组件的同步。

16.5 Detach Instance#

Detach 是解除实例和主组件的关系。

不建议频繁 Detach。

适合：

• 临时探索
• 这个实例确实不再需要跟随组件
• 需要大幅改结构

如果大量 Detach，说明组件设计可能不够灵活。

16.6 组件命名#

推荐：

1
Button / Primary
2
Button / Secondary
3
Button / Ghost
4
Input / Text
5
Input / Password
6
Card / Product
7
Nav / Bottom Tab
8
Modal / Confirm

使用 / 可以让组件在 Assets 面板里形成层级。

16.7 什么时候应该做组件#

满足这些条件之一就可以考虑组件化：

• 同一个元素会出现 3 次以上
• 这个元素有多个状态
• 这个元素会在多个页面复用
• 这个元素需要和开发组件对应
• 这个元素属于设计规范的一部分

不要一开始就把所有东西都组件化。新手可以先画页面，发现重复后再抽组件。

17.1 适合做 Variants 的场景#

• 按钮类型
• 按钮尺寸
• 按钮状态
• 输入框状态
• 标签类型
• 开关状态
• Checkbox 选中和未选中
• Tab 选中和未选中

17.2 Variant 属性和值#

一个按钮组件集可以有这些属性：

1
Type = Primary / Secondary / Text
2
Size = Small / Medium / Large
3
State = Default / Hover / Pressed / Disabled
4
Icon = True / False

每个具体按钮是这些属性组合中的一个。

17.3 变体命名示例#

推荐：

1
Button
2
  Type=Primary, Size=Medium, State=Default, Icon=False
3
  Type=Primary, Size=Medium, State=Hover, Icon=False
4
  Type=Primary, Size=Medium, State=Disabled, Icon=False
5
  Type=Secondary, Size=Medium, State=Default, Icon=False

17.4 不适合用 Variants 的情况#

不要把完全不同的东西硬塞进一个 Variants。

不推荐：

• 把所有图标做成一个巨大的 Icon Variants
• 把不同业务卡片塞成一个复杂组件
• 把页面模板做成超复杂 Variants

Variants 适合“同一类组件的不同状态或属性”，不是万能收纳箱。

18.1 Boolean 属性#

Boolean 是 true / false。

适合：

• 按钮是否显示图标
• 卡片是否显示标签
• 输入框是否显示错误提示
• 列表项是否显示右侧箭头

例子：

1
Button
2
  Show icon = true / false

18.2 Text 属性#

Text 属性让实例使用者可以直接在右侧面板改文字。

适合：

• 按钮文案
• 卡片标题
• 输入框占位符
• 标签文案

18.3 Instance Swap 属性#

Instance Swap 让你替换嵌套组件。

适合：

• 按钮左侧图标
• 菜单项图标
• 卡片头像
• 空状态插画

例子：

一个按钮组件里默认是 Icon / Plus，实例中可以换成 Icon / Search。

18.4 Slot 属性#

Slot 是更灵活的组件区域，适合需要自由插入内容的组件。

适合：

• 弹窗内容区
• 卡片内容区
• 列表容器
• 复杂表单区域

新手可以先掌握 Boolean、Text、Instance Swap 和 Variants，再学习 Slot。

18.5 组件属性设计原则#

好的组件属性应该：

• 名字清楚
• 选项不太多
• 和真实使用场景对应
• 不暴露过多内部细节
• 能减少 Detach

坏的组件属性：

• 命名含糊
• 选项非常多
• 使用者不知道该选哪个
• 一个组件承担太多职责

19.1 颜色样式#

推荐命名：

1
Color / Brand / Primary
2
Color / Brand / Primary Hover
3
Color / Text / Primary
4
Color / Text / Secondary
5
Color / Text / Disabled
6
Color / Background / Page
7
Color / Background / Card
8
Color / Border / Default
9
Color / State / Success
10
Color / State / Warning
11
Color / State / Error

19.2 文字样式#

推荐命名：

1
Text / Display / Large
2
Text / Heading / H1
3
Text / Heading / H2
4
Text / Body / Medium
5
Text / Body / Small
6
Text / Caption

文字样式应包含：

• 字体
• 字号
• 字重
• 行高
• 字间距

19.3 Effect 样式#

常见：

1
Effect / Shadow / Card
2
Effect / Shadow / Dropdown
3
Effect / Shadow / Modal

19.4 Grid 样式#

可以为 Web 页面创建 12 栏栅格样式。

例如：

1
Grid / Desktop / 12 Columns
2
Grid / Tablet / 8 Columns
3
Grid / Mobile / 4 Columns

19.5 什么时候用 Style#

当某种样式会重复出现，并且未来可能统一修改时，就应该创建 Style。

适合：

• 品牌色
• 文本色
• 页面背景
• 标题文字
• 正文文字
• 卡片阴影

不适合：

• 一次性临时颜色
• 单个特殊图形效果
• 还没稳定的探索稿

20.1 变量是什么#

变量是可复用的值。

常见变量类型：

• Color：颜色
• Number：数字
• String：文字
• Boolean：真假

变量可以应用到：

• 填充色
• 描边色
• 文字内容
• 宽高
• 圆角
• Auto Layout 属性
• 组件变体属性
• 原型交互状态

20.2 Styles 和 Variables 的区别#

简单建议：

• 小练习：先用 Styles
• 要做亮暗模式或设计 Token：用 Variables
• 团队设计系统：Styles 和 Variables 结合使用

20.3 变量集合 Collection#

变量通常放在 Collection 里。

例子：

1
Collection: Color
2
  color.brand.primary
3
  color.text.primary
4
  color.text.secondary
5
  color.bg.page
6

7
Collection: Size
8
  radius.sm
9
  radius.md
10
  space.4
11
  space.8
12
  space.16

20.4 Modes 模式#

Modes 可以让同一个变量在不同模式下有不同值。

例子：

1
color.bg.page
2
  Light = #FFFFFF
3
  Dark = #111827
4

5
color.text.primary
6
  Light = #111827
7
  Dark = #F9FAFB

适合：

• 亮色 / 暗色模式
• 多品牌主题
• 不同平台主题

20.5 Alias 变量#

Alias 是让一个变量引用另一个变量。

例如：

1
color.brand.primary = blue.600
2
color.button.primary.bg = color.brand.primary

好处：

• 语义更清楚
• 换主题更方便
• 开发 Token 更好对应

20.6 新手变量练习#

建议先做一套简单变量：

1
color.brand.primary
2
color.text.primary
3
color.text.secondary
4
color.bg.page
5
color.bg.card
6
color.border.default
7
space.4
8
space.8
9
space.16
10
space.24
11
radius.sm
12
radius.md
13
radius.lg

然后把按钮、卡片、输入框都应用这些变量。

21.1 原型的基本结构#

一次交互通常包含：

• Trigger：触发方式
• Action：执行动作
• Destination：目标页面或对象
• Animation：动画方式

例子：

1
点击登录按钮 -> Navigate to 首页 -> Smart Animate

21.2 常见 Trigger#

常见触发方式：

• On click：点击
• On drag：拖拽
• While hovering：悬停
• While pressing：按下
• Key/Gamepad：键盘
• After delay：延时

新手最常用的是 On click。

21.3 常见 Action#

常见动作：

• Navigate to：跳转到另一个 Frame
• Open overlay：打开浮层
• Swap overlay：替换浮层
• Close overlay：关闭浮层
• Back：返回上一页
• Scroll to：滚动到某个区域
• Open link：打开链接
• Set variable：设置变量

21.4 Flow Starting Point#

Flow Starting Point 是原型播放的起点。

一个文件可以有多个 Flow，例如：

• 登录流程
• 注册流程
• 下单流程
• 设置流程

命名建议：

1
Flow / Login
2
Flow / Checkout
3
Flow / Settings

21.5 Overlay 弹层#

Overlay 适合：

• 弹窗
• 下拉菜单
• Toast
• 底部操作面板
• 确认框

设置重点：

• 位置：居中、顶部、底部、自定义
• 背景遮罩
• 点击外部是否关闭
• 动画方式

21.6 Smart Animate#

Smart Animate 会根据同名图层的位置、大小、透明度等变化自动生成过渡动画。

适合：

• Tab 切换
• 卡片展开
• 按钮状态
• 页面过渡
• 开关切换

使用技巧：

• 两个 Frame 中对应图层名称要一致
• 图层结构尽量一致
• 不要随便改图层层级

21.7 Interactive Components#

交互组件可以让组件本身带交互。

例子：

• 按钮 Hover 状态
• Switch 开关切换
• Checkbox 选中状态
• Tab 切换状态

好处：

• 不用每个页面重复连线
• 原型更接近真实组件行为
• 组件库更完整

21.8 Variables in Prototypes#

变量可以用于更高级原型。

例子：

• 点击切换亮色 / 暗色模式
• 购物车数量增加
• 收藏状态切换
• 根据条件显示不同内容

新手建议：

先学普通页面跳转和弹窗，再学变量原型。

21.9 原型新手练习#

做一个登录流程：

1. 登录页
2. 输入错误状态
3. 首页
4. 忘记密码页
5. 重置成功页

需要连接：

• 登录按钮 -> 首页
• 输入错误示例 -> 错误状态
• 忘记密码 -> 忘记密码页
• 返回 -> 登录页
• 提交 -> 重置成功页

22.1 响应式设计要表达什么#

设计稿应该告诉开发：

• 桌面端布局是什么
• 平板端布局怎么变化
• 手机端布局怎么变化
• 哪些内容固定宽度
• 哪些内容弹性伸缩
• 哪些内容会换行
• 哪些内容会隐藏或折叠

22.2 常见响应式变化#

22.3 Figma 中表达响应式的工具#

常用：

• Constraints
• Auto Layout
• Fill container
• Hug contents
• Wrap
• 不同尺寸 Frame
• Layout Grid

22.4 设计响应式页面的流程#

推荐：

1. 先确定内容和页面结构
2. 设计桌面端或移动端主版本
3. 使用 Auto Layout 让模块内部自适应
4. 复制 Frame 改成另一种尺寸
5. 调整布局变化
6. 标注变化规则

22.5 新手不要追求完全自动响应#

Figma 的响应式能力主要用于设计表达，不等于真实前端布局。

实际项目中更常见：

• 设计桌面、平板、手机几个关键断点
• 说明断点之间的变化规则
• 开发用 CSS 实现真实响应式

23.1 新手最小设计系统#

一个最小设计系统可以包括：

• 颜色
• 字体
• 间距
• 圆角
• 阴影
• 图标
• 按钮
• 输入框
• 标签
• 卡片
• 弹窗

23.2 基础 Token#

先定义这些：

1
Colors
2
  Brand
3
  Text
4
  Background
5
  Border
6
  State
7

8
Typography
9
  Heading
10
  Body
11
  Caption
12

13
Spacing
14
  4
15
  8
16
  12
17
  16
18
  24
19
  32
20

21
Radius
22
  4
23
  6
24
  8
25
  12

23.3 组件库页面结构#

推荐：

1
Page: Components
2
  Section: Foundations
3
    Colors
4
    Typography
5
    Spacing
6
    Radius
7
  Section: Basic Components
8
    Button
9
    Input
10
    Select
11
    Checkbox
12
    Radio
13
    Switch
14
  Section: Patterns
15
    Form
16
    Table
17
    Card
18
    Modal

23.4 组件文档写什么#

每个组件最好说明：

• 组件用途
• 什么时候使用
• 什么时候不要使用
• 有哪些状态
• 有哪些尺寸
• 文案规则
• 可访问性注意事项

例子：

1
Button / Primary
2
用途：页面主要操作。
3
规则：一个页面区域内尽量只出现一个主按钮。
4
状态：Default、Hover、Pressed、Disabled、Loading。

24.1 交付前设计师要做什么#

交付前检查：

• 页面命名清楚
• 图层命名清楚
• 组件状态完整
• 颜色和字体使用样式或变量
• 页面状态完整
• 响应式规则说明清楚
• 不要有无用隐藏图层
• 图片资源可导出

24.2 Ready for Dev#

可以把确定好的 Frame 标记为准备开发。

适合：

• 告诉开发哪些页面已确认
• 避免开发拿到未完成草稿
• 在多人协作中减少误会

24.3 标注说明#

Figma 能显示很多自动标注，但复杂交互仍需要设计师写说明。

需要手写说明的情况：

• 表单校验规则
• 加载和错误状态
• 动画时长
• 弹窗关闭规则
• 权限不足状态
• 响应式断点
• 长文本处理
• 空数据处理

24.4 导出资源#

常见导出格式：

• PNG：位图、普通图片
• JPG：照片
• SVG：图标、矢量图形
• PDF：文档或展示

图标建议优先 SVG，照片建议 JPG，透明位图用 PNG。

24.5 交付给开发的检查清单#

• 主流程页面是否完整
• 异常状态是否完整
• 空状态是否完整
• 加载状态是否完整
• 组件是否使用统一样式
• 颜色是否命名
• 字体是否命名
• 图片是否可导出
• 交互是否连好
• 响应式是否说明
• 是否标记 Ready for Dev

25.1 插件能做什么#

常见用途：

• 插入图标
• 生成头像
• 生成占位图片
• 检查对比度
• 批量改名
• 生成表格
• 清理图层
• 导出资源
• 生成文案
• 设计转代码辅助

25.2 新手常用插件类型#

推荐类型：

• 图标库插件
• 图片占位插件
• 内容生成插件
• 对比度检查插件
• 批量重命名插件
• 图层整理插件

注意：

插件是辅助，不要依赖插件替代基础能力。Auto Layout、组件、字体、颜色这些基础必须自己掌握。

25.3 插件使用建议#

• 只安装常用插件
• 不要随便授权不可信插件
• 团队项目优先使用团队认可的插件
• 插件生成的内容要检查质量

26.1 Figma Design#

主要用于：

• UI 设计
• 原型
• 组件库
• 设计系统
• 开发交付

这是你学习 UI 设计最需要掌握的核心。

26.2 FigJam#

FigJam 是白板协作工具。

适合：

• 头脑风暴
• 用户旅程图
• 流程图
• 需求梳理
• 会议协作
• 便签整理

26.3 Figma Slides#

Slides 用于做演示文稿。

适合：

• 设计评审
• 产品方案展示
• 项目汇报

26.4 Figma Community#

Community 是社区资源库。

你可以找到：

• UI 模板
• 图标
• 插件
• 组件库
• 练习文件
• 设计系统示例

新手建议多看社区优秀文件，但不要只下载不分析。

27.1 基础操作#

27.2 编辑#

27.3 视图#

27.4 图层#

注意：快捷键可能因系统、输入法和 Figma 版本略有差异，可以在 Figma 菜单里查看 Keyboard shortcuts。

28.1 练习一：做一个登录页#

目标：

• 熟悉 Frame
• 熟悉文字、输入框、按钮
• 熟悉 Auto Layout

页面内容：

• Logo
• 标题
• 邮箱输入框
• 密码输入框
• 登录按钮
• 忘记密码
• 注册入口

要求：

• 手机尺寸 390 x 844
• 页面左右边距 24px
• 输入框高度 44px
• 按钮高度 44px
• 用 Auto Layout 做表单区
• 做一个错误状态

28.2 练习二：做按钮组件#

目标：

• 掌握组件和变体

做这些状态：

1
Type: Primary / Secondary / Text
2
Size: Small / Medium / Large
3
State: Default / Hover / Pressed / Disabled / Loading
4
Icon: True / False

要求：

• 按钮使用 Auto Layout
• 文字可修改
• 图标可显示隐藏
• 图标可替换
• 禁用状态明显

28.3 练习三：做商品卡片#

目标：

• 掌握图片、Auto Layout、文本溢出处理

卡片内容：

• 商品图
• 商品名
• 价格
• 标签
• 评分
• 加入购物车按钮

要求：

• 卡片宽度可以变化
• 商品名最多两行
• 图片比例固定
• 卡片内容间距统一

28.4 练习四：做移动 App 首页#

目标：

• 掌握页面布局
• 掌握导航和列表

页面内容：

• 顶部栏
• 搜索框
• 分类入口
• 推荐卡片
• 内容列表
• 底部 Tab Bar

要求：

• 页面用 Frame
• 底部 Tab Bar 固定在底部
• 列表项做组件
• 做空状态
• 做加载状态

28.5 练习五：做 Web Dashboard#

目标：

• 掌握桌面端布局和表格

页面内容：

• 侧边导航
• 顶部栏
• 数据卡片
• 折线图占位
• 表格
• 筛选器

要求：

• 设计稿尺寸 1440 x 900
• 使用 12 栏栅格
• 侧边栏固定宽度
• 主内容区域自适应
• 表格数字右对齐
• 状态标签清楚

29.1 只会拖，不会布局#

症状：

• 元素位置全靠手动摆
• 改文字后按钮不变宽
• 改屏幕尺寸后页面乱掉

解决：

• 学 Auto Layout
• 学 Hug、Fixed、Fill
• 重要模块都用 Frame 管理

29.2 不会命名图层#

症状：

1
Frame 123
2
Rectangle 456
3
Group 88

解决：

• 每个核心模块命名
• 组件用 / 分层命名
• 页面状态写清楚

29.3 所有东西都用 Group#

问题：

Group 不适合做页面和复杂 UI 容器。

解决：

• 页面用 Frame
• 组件用 Frame
• 模块用 Frame
• Group 只用于临时简单打包

29.4 不做组件#

症状：

• 10 个按钮长得略有不同
• 修改主色要一个个改
• 页面越做越乱

解决：

• 重复 3 次以上就考虑组件
• 按钮、输入框、卡片优先组件化
• 用 Variants 管理状态

29.5 组件做得太复杂#

症状：

• 一个组件有几十个属性
• 使用者不知道怎么选
• 改一点就坏

解决：

• 一个组件只解决一类问题
• 复杂业务组件拆成多个小组件
• 属性命名清楚

29.6 只画正常状态#

问题：

真实产品有很多状态。

至少补齐：

• 默认
• 加载
• 空数据
• 错误
• 禁用
• 成功

29.7 不考虑真实文本#

问题：

设计时只写短文案，真实数据一来就溢出。

检查：

• 长标题
• 长用户名
• 空内容
• 多行文本
• 数字很大
• 图片缺失

29.8 颜色和字体不建样式#

问题：

页面越多越难统一。

解决：

• 常用颜色建 Style 或 Variable
• 常用字体建 Text Style
• 主按钮、正文、背景都引用统一样式

29.9 原型连线混乱#

症状：

• 页面之间线很多
• 不知道从哪里开始演示
• 评审时点错流程

解决：

• 给每个流程设置 Flow Starting Point
• 页面按流程排列
• 命名清楚
• 删除无用连线

第 1 天：熟悉界面和基础工具#

目标：

• 会创建文件
• 会创建 Frame
• 会画矩形、文字、图片
• 会移动、复制、对齐

练习：

• 临摹一个简单登录页

第 2 天：学习 Auto Layout#

目标：

• 理解方向、Gap、Padding
• 理解 Hug、Fixed、Fill

练习：

• 做按钮
• 做输入框
• 做列表项

第 3 天：学习组件#

目标：

• 创建主组件
• 使用实例
• 修改实例文字
• 做简单变体

练习：

• 做按钮组件
• 做输入框组件

第 4 天：学习样式和变量#

目标：

• 创建颜色样式
• 创建文字样式
• 理解基础变量

练习：

• 给登录页套统一颜色和字体
• 创建简单设计 Token

第 5 天：学习原型#

目标：

• 连接页面
• 打开弹窗
• 设置返回
• 播放原型

练习：

• 做登录到首页流程
• 做忘记密码流程

第 6 天：学习响应式和交付#

目标：

• 理解 Constraints
• 理解桌面和手机布局差异
• 会查看 Dev Mode

练习：

• 做一个 Web 卡片桌面版和手机版
• 标注响应式规则

第 7 天：完成一个小项目#

建议项目：

• 待办 App
• 记账 App
• 个人博客后台
• 课程学习首页

至少包含：

• 3 到 5 个页面
• 基础组件
• 页面状态
• 可点击原型
• 简单交付说明