Figma教程：UI设计工具从入门到精通

Figma是一款基于云端的设计工具，近年来已成为UI/UX设计行业的首选软件。它支持团队协作、跨平台使用、无需安装即可在浏览器中使用。本教程将带你从零开始，系统学习Figma的核心功能和设计流程。

一、认识Figma

1.1 Figma是什么

Figma是一款矢量设计工具，主要用于用户界面（UI）和用户体验（UX）设计。它集设计、原型制作、协作和交付功能于一体，是现代设计团队不可或缺的工具。

Figma的核心特点：

特点	说明
云端协作	多人同时编辑同一文件，实时同步
跨平台	支持Windows、Mac、Linux，浏览器直接使用
组件化设计	可创建可复用组件，提高设计效率
原型制作	内置原型功能，快速制作交互演示
设计交付	一键生成设计标注和代码，简化开发对接

与Sketch、Adobe XD的对比：

功能	Figma	Sketch	Adobe XD
平台支持	全平台	仅Mac	Mac/Windows
协作功能	原生支持	需插件	需插件
原型制作	内置	需InVision等	内置
价格	免费团队版	付费	订阅制
社区资源	丰富	丰富	一般

1.2 Figma的适用场景

UI设计：

• 网站界面设计
• 移动应用界面设计
• 桌面应用界面设计

UX设计：

• 用户流程设计
• 线框图（Wireframe）
• 交互原型制作

团队协作：

• 设计评审
• 设计系统构建
• 设计交付与交接

1.3 账号注册与界面介绍

注册账号：

1. 访问 figma.com
2. 点击”Sign up”注册
3. 可使用Google账号或邮箱注册
4. 选择个人或团队使用

免费版限制：

• 最多3个Figma项目
• 最多3个FigJam项目
• 无限查看者
• 无限个人文件

界面布局：

• 顶部导航栏：项目名称、缩放比例、演示模式、分享按钮
• 左侧工具栏：选择工具、画板工具、钢笔工具、文字工具等
• 中间画布：设计工作区域，可缩放、拖拽
• 右侧属性面板：选中元素的属性设置

二、基础操作入门

2.1 创建画板

什么是画板：画板（Frame）相当于设计中的”页面”，可以理解为一张空白的画布。移动应用设计通常有多个画板，分别代表不同屏幕。

创建画板方法：

方法一：使用工具栏

1. 在左侧工具栏选择”Frame”工具（快捷键F）
2. 在右侧属性面板选择预设尺寸
3. 常用预设：iPhone、Android、平板、Web
4. 也可以手动输入宽高

方法二：自定义尺寸

1. 选择Frame工具后
2. 在属性面板输入宽度和高度
3. 如：375 × 812（iPhone X尺寸）

常用设备尺寸参考：

设备类型	尺寸（px）
iPhone 14	390 × 844
iPhone 14 Pro Max	430 × 932
Android通用	360 × 640
iPad	1024 × 768
Web Banner	1920 × 1080
桌面端	1440 × 900

2.2 基础绘图工具

矩形工具（Rectangle）：

1. 按R键或点击工具栏矩形图标
2. 在画板上拖拽绘制
3. 按住Shift可绘制正方形
4. 按住Alt从中心向外绘制

椭圆工具（Ellipse）：

1. 按O键或点击工具栏椭圆图标
2. 拖拽绘制椭圆
3. 按住Shift绘制正圆

多边形工具（Polygon）：

1. 在工具栏长按矩形，选择多边形
2. 在属性面板设置边数
3. 可绘制三角形、五边形等

线条工具（Line）：

1. 按L键
2. 拖拽绘制直线
3. 按住Shift绘制45度倍数角度

2.3 钢笔工具详解

钢笔工具（Pen Tool）是矢量设计的核心，能绘制任意形状的路径。

基础操作：

1. 按P键选择钢笔工具
2. 点击画布创建锚点
3. 再次点击创建新锚点
4. 自动连接成路径

绘制曲线：

1. 点击创建锚点后拖拽
2. 拖拽产生控制手柄
3. 手柄方向和长度决定曲线形状
4. 按住Alt可单独调整一侧手柄

编辑路径：

1. 切换到”Move”工具（V）
2. 直接点击路径选中
3. 显示锚点和控制手柄
4. 拖拽锚点调整形状
5. 拖拽控制手柄调整曲线

实用技巧：

• 闭合路径：将鼠标移到起点，出现圆点提示时点击
• 添加锚点：用钢笔工具点击路径任意位置
• 删除锚点：选中锚点后按Delete或Backspace
• 尖角转圆角：选中锚点后在属性面板调整圆角值

三、图层面板与组织

3.1 图层面板基础

认识图层：在Figma中，每个元素都是一个图层。图层面板显示所有图层及其层级关系。

图层面板操作：

• 展开/折叠：点击图层左侧箭头
• 重命名：双击图层名称
• 锁定图层：右键选择”Lock”或点击锁图标
• 隐藏图层：点击眼睛图标切换可见性
• 删除图层：选中后按Delete

图层顺序：

• 上方图层显示在前（z-index更高）
• 拖拽调整图层顺序
• 右键可选择”Bring to Front”、”Send to Back”等快速操作

3.2 编组与框架

创建编组（Group）：

1. 选中多个图层
2. 按Ctrl+G（Windows）或Cmd+G（Mac）
3. 元素编为一组，可整体移动

创建框架（Frame）：

1. 选中元素后按Ctrl+Alt+G
2. 自动创建包含选中元素的框架
3. 框架可设置背景色

编组与框架的区别：

特性	编组（Group）	框架（Frame）
尺寸	自动适应内容	可设置固定尺寸
响应式	否	是
作为页面	否	是
导出	需单独设置	可作为整体导出

3.3 组件与变体

什么是组件：组件是可复用的设计元素。创建一次，可以在多处使用，修改组件会同步更新所有实例。

创建组件：

1. 选中要转为组件的元素
2. 右键选择”Create Component”或按Ctrl+Alt+K
3. 组件会出现在左侧”Assets”面板
4. 图标变为紫色表示是主组件

使用组件：

1. 从Assets面板拖拽到画布
2. 拖入的称为”Instance”（实例）
3. 实例会显示蓝色边框

实例属性：

• 覆盖文本：双击实例可直接修改文本
• 样式覆盖：可修改填充、效果等（某些限制）
• Detach：右键可解除与主组件的关联

组件变体：

1. 选中组件
2. 在属性面板点击”+”添加变体
3. 设置变体属性如”状态”、”大小”
4. 创建多个变体方便切换

四、样式与属性

4.1 填充属性

添加填充：

1. 在右侧属性面板找到”Fill”
2. 点击”+”添加填充层
3. 可添加多个填充层

填充类型：

• 纯色：单色填充
• 渐变：线性渐变、径向渐变
• 图片：使用图片作为填充
• 图案：重复图案填充

渐变填充设置：

1. 选择渐变类型
2. 添加渐变色块
3. 调整色块位置设置颜色过渡
4. 设置角度控制渐变方向

4.2 描边与边框

描边设置：

1. 在属性面板找到”Stroke”
2. 点击”+”添加描边
3. 设置颜色、粗细、样式

描边样式：

• 实线、虚线、点线
• 不同端点样式：直角、圆角、方角
• 不同连接样式：尖角、圆角、斜角

边框效果：

• Inner stroke（内描边）
• Outer stroke（外描边）
• Center stroke（居中描边）

4.3 效果与阴影

可添加的效果：

• 阴影（Shadow）：投影、内阴影
• 模糊（Blur）：高斯模糊、背景模糊
• 叠加效果：图层样式混合

添加阴影：

1. 在属性面板点击”+”添加效果
2. 选择Drop Shadow或Inner Shadow
3. 设置X/Y偏移、模糊、颜色
4. 调整不透明度

实用阴影参数参考：

类型	X	Y	模糊	透明度
小阴影	0	2	4	10-20%
中阴影	0	4	8	15-25%
大阴影	0	8	16	20-30%

4.4 文本属性

添加文本：

1. 按T键选择文本工具
2. 点击画布输入文本
3. 拖拽创建文本框

文本属性设置：

• 字体：选择字体家族
• 字号：字体大小
• 字重：Regular、Medium、Bold等
• 行高：行与行之间的距离
• 字间距：字符之间的距离
• 对齐：左对齐、居中、右对齐

段落属性：

• 段落间距：段与段之间的距离
• 缩进：首行缩进、对齐参考
• 文字方向：横排、竖排

自动调整文本框：

• 设置文本框宽度固定
• 高度自动适应内容
• 或设置固定宽高，内容溢出时处理方式

五、约束与响应式设计

5.1 约束基础

什么是约束：约束定义了元素相对于父容器的位置关系，使布局调整时保持预期效果。

设置约束：

1. 选中元素
2. 在右侧属性面板找到”Constraints”
3. 设置相对边框的位置

约束选项：

• Left：元素左边距固定
• Right：元素右边距固定
• Center：水平居中
• Left & Right：左右边距固定，拉伸元素
• Top/Bottom/Scale：同理，控制垂直方向

5.2 响应式布局实战

按钮响应式：

1. 按钮在不同宽度画板上
2. 文字左右保持边距
3. 按钮宽度随画板拉伸

卡片响应式：

1. 卡片高度固定
2. 内容区域高度自适应
3. 卡片间距保持一致

顶部导航栏：

1. LOGO固定在左边
2. 菜单区域居中或左右分布
3. 用户图标固定在右边

5.3 自动布局

自动布局特点：

• 内容变化时容器自动调整大小
• 可以设置内部元素的间距和对齐
• 支持水平和垂直方向

创建自动布局：

1. 选中图层
2. 按Shift+A或点击”Add auto layout”
3. 设置间距和方向

自动布局属性：

• 方向：水平、垂直
• 间距：元素之间的距离
• 对齐：左对齐、居中、右对齐、上对齐、下对齐
• 填满主轴：是否填满可用空间
• 贴合内容：容器自动适应内容

六、原型制作

6.1 添加交互

进入原型模式：

1. 点击顶部”Prototype”标签
2. 进入原型编辑界面
3. 界面变成蓝色连接线样式

添加交互：

1. 选中要添加交互的元素
2. 点击元素右侧出现的蓝色圆点
3. 拖拽连接到目标画板或元素
4. 设置交互属性

交互触发类型：

• On Click：点击
• On Hover：鼠标悬停
• On Press：按住
• While Pressing：持续按住期间
• On Drag：拖拽
• While Hovering：悬停期间
• While Selected：选中期间

6.2 交互动作

常用交互动作：

• Navigate to：跳转到指定画板
• Back：返回上一画板
• Open URL：打开网页链接
• Swap Component：切换组件变体
• Open Overlay：打开叠加层
• Close Overlay：关闭叠加层

过渡动画：

• Instant：瞬间切换
• Dissolve：淡入淡出
• Smart Animate：智能动画（自动补间）
• Move In/Out：移入移出
• Push：推出效果
• Slide：滑动效果

动画参数：

• Duration：动画时长（毫秒）
• Easing：缓动曲线

6.3 原型演示

预览原型：

1. 点击右上角”Present”按钮
2. 或按Ctrl+Enter进入演示模式
3. 可在模拟器中测试交互

分享原型：

1. 点击右上角”Share”按钮
2. 生成可分享链接
3. 其他人可通过链接查看和测试原型

原型测试工具：

• Figma内置预览
• Figma Mirror（手机预览App）
• 浏览器链接预览

七、设计交付与协作

7.1 设计标注

标注功能：

1. 按住Ctrl+Alt+A打开开发者模式
2. 选中元素显示详细尺寸、间距、颜色
3. 点击属性可复制CSS/ iOS/Android代码

标注查看：

• 点击元素显示属性面板
• 显示相对于其他元素的位置
• 显示间距和尺寸数据

7.2 导出资源

导出方法：

1. 选中要导出的元素或画板
2. 点击右侧属性面板”Export”区域
3. 选择格式和比例

导出格式：

• PNG：位图，适合图标、图片
• JPG：位图，适合照片
• SVG：矢量图，适合图标，可无损缩放
• PDF：矢量或位图，适合打印

导出设置：

• 1x / 2x / 3x：不同分辨率
• Include “Background Color”：是否包含背景
• Optimize：优化文件大小

7.3 团队协作

实时协作：

• 多人同时编辑同一文件
• 每个人用不同颜色光标标识
• 实时看到他人修改

评论功能：

• 选中元素或画布添加评论
• @提及团队成员
• 评论可标记为已解决

版本历史：

• 自动保存历史版本
• 点击File → Show Version History
• 可恢复到任意历史版本

设计系统：

• 创建组件库统一设计规范
• 团队成员共享组件
• 一处修改，全局更新

八、实战案例：设计一个登录页面

8.1 设计分析与规划

页面需求分析：

• 移动端登录页面
• 包含用户名/邮箱输入框
• 密码输入框
• 登录按钮
• 注册链接
• Logo和品牌标识

设计规范：

• 主色调：#4F46E5（品牌蓝）
• 背景色：#F9FAFB（浅灰）
• 文字色：#111827（深灰）
• 圆角：8px
• 间距：16px

8.2 创建画板

1. 按F选择Frame工具
2. 在属性面板选择iPhone 14 Pro尺寸
3. 命名画板为”Login Screen”

8.3 添加元素

添加Logo：

1. 使用椭圆工具绘制圆形
2. 添加品牌首字母或图标
3. 放置在页面顶部居中

添加标题：

1. 使用文本工具输入”欢迎回来”
2. 设置字号28px，字重Bold
3. 放置在Logo下方

添加输入框：

1. 使用矩形工具绘制输入框
2. 设置背景色白色，添加圆角
3. 添加描边，颜色#E5E7EB
4. 添加左侧图标（用户名、密码图标）
5. 添加占位符文本

添加登录按钮：

1. 绘制矩形作为按钮
2. 设置背景色#4F46E5
3. 添加白色文字”登录”
4. 设置圆角和内边距

添加注册链接：

1. 添加文本”还没有账号？”
2. 添加蓝色链接文字”立即注册”
3. 放置在页面底部

8.4 添加原型交互

1. 选中登录按钮
2. 切换到Prototype面板
3. 从按钮拖出连接线
4. 设置跳转到Home Screen
5. 设置过渡动画为Smart Animate

九、快捷键大全

功能	Windows	Mac
选择工具	V	V
画板工具	F	F
矩形工具	R	R
椭圆工具	O	O
钢笔工具	P	P
文本工具	T	T
直线工具	L	L
手形工具	H	H
缩放	Z	Z
编组	Ctrl+G	Cmd+G
取消编组	Ctrl+Shift+G	Cmd+Shift+G
创建组件	Ctrl+Alt+K	Cmd+Alt+K
自动布局	Shift+A	Shift+A
复制	Ctrl+D	Cmd+D
多选	Ctrl+点击	Cmd+点击
全选	Ctrl+A	Cmd+A
撤销	Ctrl+Z	Cmd+Z
重做	Ctrl+Shift+Z	Cmd+Shift+Z
保存	Ctrl+S	Cmd+S
原型演示	Ctrl+Enter	Cmd+Enter

十、学习资源与进阶建议

10.1 官方资源

• Figma官方帮助文档
• Figma YouTube频道的教学视频
• Figma社区的插件和模板

10.2 设计规范学习

• Apple Human Interface Guidelines（iOS设计规范）
• Google Material Design（Material Design规范）
• 各平台设计规范文档

10.3 进阶方向

UI设计进阶：

• 深入学习设计系统
• 掌握动效设计
• 学习用户研究方法

工具进阶：

• 学习Figma插件开发
• 掌握Auto Layout高级用法
• 学习变量（Variables）功能

全链路设计：

• 学习用户调研方法
• 掌握交互设计理论
• 了解开发实现基础知识

总结

Figma是现代UI/UX设计师必备的工具，掌握它能大大提升设计效率。本教程从基础操作、绘图工具、图层管理、样式设置、约束布局、原型制作到团队协作，全面介绍了Figma的核心功能。

核心要点回顾：

• 掌握基础绘图工具和钢笔工具
• 熟练使用组件和变体
• 学会自动布局实现响应式设计
• 掌握原型制作展示交互
• 善用团队协作功能提升效率

下一步建议：

• 多做设计练习
• 学习设计规范和理论
• 参与设计社区交流
• 尝试完整项目设计

设计是一门需要不断学习和实践的技能，持续练习和观察优秀作品，你的Figma技能和设计水平一定会不断提升！

相关教程推荐：

• UI设计基础入门：从零开始学习UI设计实战教程
• PS新手入门指南：零基础学习Photoshop的完整教程

本文更新于2026年4月