01 - Figma概述 | Figma设计课程

欢迎来到Figma设计课程的第一课！Figma是当今最流行的界面设计工具，它基于浏览器运行，支持实时协作，拥有强大的组件系统和原型功能。本课将带你全面了解Figma的界面布局、核心工具栏、图层面板和画布操作，为后续深入学习打下坚实基础。

📌 本课要点

Figma的核心优势与产品定位
界面六大区域详解：工具栏、图层面板、属性面板、画布、资源面板、组件面板
工具栏每个工具的用途与快捷键
图层面板操作：选择、锁定、可见性、重命名
画布导航：缩放、平移、框选、聚焦
从零创建你的第一个Figma文件

一、为什么选择Figma

在众多设计工具中，Figma为什么能成为行业首选？理解它的核心优势，能帮助你更好地利用这个工具。

🌟 Figma的核心优势

浏览器原生——无需安装，任何平台直接使用，Windows、macOS、Linux、Chromebook全部支持
实时协作——多人同时编辑同一文件，看到对方光标实时移动，像Google Docs一样自然
组件系统——强大的组件+变体+属性体系，构建可复用的设计系统
设计到代码——Dev Mode让开发者直接获取代码片段，减少沟通成本
插件生态——数千款社区插件，从图标生成到无障碍检查，扩展能力无限
免费起步——个人免费版支持3个文件，足够学习和小型项目使用

🔄 Figma vs 其他工具

特性	Figma	Sketch	Adobe XD
平台	全平台浏览器	仅macOS	Win/Mac
实时协作	✅ 原生支持	需第三方	有限支持
组件变体	✅ 强大	基础	基础
离线工作	有限支持	✅ 完全	✅ 完全
插件数量	数千+	数百	较少
价格	免费起步	$99/年	$9.99/月

💡 提示：Figma也有桌面应用（Figma Desktop App），它本质上是浏览器窗口的封装，但提供了更好的系统级功能：字体本地安装支持、文件拖拽导入、系统通知等。推荐下载桌面应用以获得最佳体验。

二、Figma界面布局详解

Figma的界面分为六个主要区域。理解每个区域的功能，是高效使用Figma的前提。

1. 顶部工具栏（Toolbar）

工具栏位于界面最顶部，包含设计所需的核心工具。从左到右依次是：

🛠 工具栏完整解析

工具	快捷键	功能说明	使用频率
移动工具	V	选择和移动元素，最常用的工具	⭐⭐⭐⭐⭐
画框工具	F	创建Frame（画板），设计的基础容器	⭐⭐⭐⭐⭐
矩形工具	R	绘制矩形和圆角矩形	⭐⭐⭐⭐
椭圆工具	O	绘制圆形和椭圆	⭐⭐⭐⭐
线条工具	L	绘制直线	⭐⭐⭐
钢笔工具	P	绘制自由路径和贝塞尔曲线	⭐⭐⭐
文字工具	T	添加文字，点击创建或拖拽创建文本框	⭐⭐⭐⭐⭐
手型工具	H 或空格+拖拽	平移画布	⭐⭐⭐⭐
评论工具	C	在画布上添加评论标记	⭐⭐⭐
缩放工具	Z	缩放画布视图	⭐⭐

切换工具的高效方式：不要每次都点击工具栏图标。记住常用快捷键：V选择、F画框、R矩形、T文字。使用时按快捷键即可切换，松开后自动回到选择工具——这是"弹簧快捷键"机制。按住空格临时切换到手型工具平移画布，松开回到当前工具。

工具的隐藏选项：长按工具图标可以看到子选项。例如长按矩形工具，可以选择圆角矩形、三角形、星形、多边形等。长按钢笔工具可以选择铅笔工具（自由绘制）。

2. 左侧图层面板（Layers Panel）

图层面板显示当前页面中所有元素的层级结构。Figma的图层结构与PS不同——每个对象默认就是一个图层，不需要手动创建图层。

📂 图层面板核心功能

层级树：Frame → Group → 元素的嵌套结构，点击三角形展开/折叠
可见性切换：点击👁图标隐藏/显示元素，不删除元素本身
锁定状态：点击🔒图标锁定元素，防止误操作修改。锁定后选择时会显示斜线框
重命名：双击图层名快速重命名。良好的命名习惯是团队协作的基础
缩略图预览：每个图层前有缩略图，帮助快速识别内容
多选：⇧+点击连续选择，⌘/Ctrl+点击不连续选择

💡 命名最佳实践：使用清晰的命名规则，如 btn-primary-hover、card-article、icon-search。避免"Rectangle 127"这类默认名——一个月后你不会记得它是什么。选中图层按⌘+R（Mac）或Ctrl+R（Win）快速重命名。

3. 右侧属性面板（Properties Panel）

属性面板是你最频繁交互的区域。选中任何元素后，这里显示其所有可编辑属性。

设计属性（Design Tab）

对齐与分布：6个对齐按钮 + 3个分布按钮
位置与尺寸：X、Y坐标，W宽度，H高度，R旋转角度
自动布局：方向、间距、内边距
填充：颜色、渐变、图片填充
描边：颜色、宽度、对齐方式
效果：阴影、模糊、背景模糊
导出：格式、倍率、切片设置

原型属性（Prototype Tab）

交互触发：点击、悬停、拖拽、按键
目标画板：交互跳转的目标
动画类型：即时、溶解、滑入、智能动画
缓动函数：线性、 ease-in、ease-out等
持续时间：动画时长（毫秒）
条件逻辑：基于变量的条件分支

4. 画布（Canvas）

画布是你创作的无限空间。Figma的画布没有固定边界，你可以自由放置Frame和元素。

🖱 画布导航操作

操作	Mac快捷键	Windows快捷键	说明
平移画布	空格+拖拽 / 双指滑动	空格+拖拽 / 中键拖拽	最常用的导航操作
缩放	⌘+滚轮 / 双指缩放	Ctrl+滚轮	上下滚动调整缩放级别
放大	⌘++	Ctrl++	按级别放大
缩小	⌘+-	Ctrl+-	按级别缩小
适配全部	⇧+1	⇧+1	缩放至所有内容可见
适配选中	⇧+2	⇧+2	缩放至选中元素填满视图
100%缩放	⇧+0	⇧+0	重置为实际像素大小
框选缩放	Z+拖拽	Z+拖拽	框选区域放大

⚠️ 常见误区：很多初学者会把Frame（画框）和画布混淆。画布是无限的工作空间，Frame是画布上的矩形容器——就像画布上的画框。一个Figma文件可以有无数个Frame，每个Frame代表一个页面或组件。

5. 资源面板与组件面板

📚 资源面板（Assets）

资源面板显示当前文件和已启用团队库中的所有组件、样式和变量。

Local components——当前文件中的组件
Team library——从团队库引入的组件
搜索过滤——快速找到需要的组件
拖拽使用——直接从面板拖到画布
查看实例——右键组件→"Go to main component"跳转到主组件

🧩 组件面板（Components）

创建组件后，它们会自动出现在组件面板中。

发布到库——组件可以发布为团队共享库
变体管理——同一组件的不同状态和样式
属性定义——为组件定义可修改的属性
组件文档——添加使用说明和规范

三、从零开始：创建你的第一个Figma文件

理论学完了，让我们动手操作。以下是创建第一个Figma项目的完整步骤。

登录Figma：打开 figma.com，使用Google邮箱或GitHub账号登录。如果你还没账号，30秒即可注册。登录后进入Figma的文件管理界面——这里显示你的所有项目和最近编辑的文件。

新建文件：点击左上角 "New design file" 按钮，或使用快捷键 ⌘+N。一个空白的设计文件就创建好了，你会看到空白的画布和默认的工具栏。

创建第一个Frame：按 F 激活画框工具，然后在右侧属性面板中选择一个预设尺寸。选择 Phone → iPhone 14/15 Pro（393×852），在画布上点击即可创建。也可以直接在画布上拖拽绘制自定义尺寸的Frame。

添加基础元素：在Frame内添加元素试试。按 R 画一个矩形，按 T 输入文字"Hello Figma"。注意：在Frame内创建的元素会成为Frame的子元素，在图层面板中可以看到层级关系。

调整属性：选中矩形，在右侧属性面板中修改填充颜色（比如改为紫色 #8b5cf6）、圆角（改为12px）。选中文字，修改字体大小为24px、字体粗细为Bold。通过这些操作熟悉右侧属性面板的布局。

保存与命名：Figma自动保存，你不需要手动保存！但需要给文件起个有意义的名字——点击顶部文件名区域，改为"01-My First Design"。好的文件命名让你在众多项目中快速找到目标。

四、高效工作流：必知操作技巧

选择技巧

🎯 精确选择元素

操作	快捷键	说明
选择子元素	⌘+点击	穿透Group直接选中内部元素
深层选择	⌘+⌘+点击	穿过多层嵌套选中深层元素
选择同层级所有元素	⌘+A	选中当前Frame/Group下所有元素
框选	从空白处拖拽	框选范围内的元素被选中
完全框选	⌘+拖拽框选	只有完全在框内的元素才被选中
全选	⌘+A	选中画布上所有元素
取消选择	Esc	取消当前选择

复制与移动

📋 复制移动技巧

操作	快捷键	说明
复制	⌘+D	原地复制并向右下偏移
拖拽复制	⌥+拖拽	拖拽时复制一份
约束方向移动	⇧+拖拽	限制水平/垂直/45度移动
微调位置	方向键	每次移动1px
大步微调	⇧+方向键	每次移动10px
剪切/粘贴	⌘+X / ⌘+V	剪切并粘贴到新位置
原位粘贴	⌘+⇧+V	粘贴到原始坐标位置

对齐与分布

📏 对齐操作

选中2个以上元素时，右侧属性面板出现对齐按钮：

左对齐 / 水平居中 / 右对齐——横向排列的三个按钮
顶对齐 / 垂直居中 / 底对齐——纵向排列的三个按钮
水平分布 / 垂直分布——等间距分布选中元素
关键对象对齐：选中多个元素时，最后选中的元素（粗边框）作为对齐参考。按住⌥点击可以改变关键对象

快捷键：⌃+⌥+H 水平居中对齐，⌃+⌥+V 垂直居中对齐

五、Figma文件组织结构

一个Figma文件有三级组织结构，理解它们有助于管理大型项目。

🗂 文件组织层级

📁 Project（项目）
  └── 📄 File（文件）
        ├── 📑 Page 1（页面）—— 如"Design"
        │     ├── Frame: 首页
        │     ├── Frame: 个人中心
        │     └── Frame: 设置页面
        ├── 📑 Page 2（页面）—— 如"Components"
        │     ├── Component: 按钮
        │     └── Component: 卡片
        └── 📑 Page 3（页面）—— 如"Prototype"

Page是文件内的分页，按 ⌘+⇧+P 快速添加新页面。建议将不同类型的内容放在不同Page中：设计稿、组件库、原型、废弃方案等。

💡 高效建议：在Page名称前加数字前缀可以控制排序，如"1-Design"、"2-Components"、"3-Prototype"。Page名称支持emoji，用📱标记移动端、💻标记桌面端，一目了然。

六、Figma核心概念速查

Frame vs Group

Frame：有自己尺寸的容器，子元素受约束规则控制。相当于HTML的div。是Figma设计的核心容器。
Group：只是把元素打包在一起，没有独立尺寸。选中组内元素可以单独移动。相当于临时文件夹。
优先使用Frame：Frame支持自动布局、约束、裁剪，Group只支持基本分组。

Component vs Instance

Component（主组件）：定义组件的原始设计，修改它所有实例同步更新。
Instance（实例）：主组件的副本，可以修改部分属性（文字、颜色等），但核心结构跟随主组件。
detach instance：脱离主组件，变成普通元素。不可逆操作！

🔑 关键术语表

术语	英文名	简述
画框	Frame	设计的基础容器，类似画板
组件	Component	可复用的设计元素模板
实例	Instance	组件的使用副本
变体	Variant	同一组件的不同状态/样式
自动布局	Auto Layout	类似CSS Flexbox的自动排列
约束	Constraints	控制元素在容器变化时的行为
样式	Style	可复用的颜色/字体/效果定义
变量	Variable	设计令牌，支持主题切换
画板	Canvas	无限大的工作空间
页面	Page	文件内的分页标签

七、设置你的Figma环境

在开始正式设计之前，花5分钟优化你的Figma设置，会让后续工作更顺畅。

安装Figma桌面应用：从 figma.com/downloads 下载。桌面版支持本地字体渲染、更好的性能和系统级集成。虽然浏览器版功能相同，但桌面版体验更流畅。

安装Figma Font Helper：如果你想在Figma中使用本地安装的字体，需要安装Font Helper。在Figma设置 → Fonts → 点击"Install Font Helper"下载安装。这样你就能在Figma中使用系统上安装的所有字体。

配置偏好设置：打开 Preferences（⌘+,），检查以下设置：

Snap to pixel grid：开启，确保元素对齐像素网格
Layout grid：默认开启8px网格
Color space：选择sRGB（Web标准）或Display P3（更广色域）

安装必备插件：按 ⌘+/ 搜索"Plugins"→ Browse，推荐安装：

Iconify——海量图标库，直接搜索使用
Unsplash——免费高质量图片
Content Reel——填充真实文本和头像数据
Autoflow——快速绘制流程线

八、总结与练习

✅ 本课知识检查

Figma的六大界面区域分别是什么？各自的核心功能？
Frame和Group的区别是什么？为什么优先使用Frame？
如何在画布上快速导航？至少说出3种缩放方式。
弹簧快捷键是什么意思？举两个例子。
图层面板中，如何快速选中嵌套在Group深处的元素？

🎯 练习：创建个人名片设计

运用本课所学知识，完成以下练习：

创建文件：新建Figma文件，命名为"01-Name Card"
创建Frame：使用画框工具创建一个 350×200 的Frame
添加矩形：绘制一个覆盖Frame顶部的矩形，填充你喜欢的颜色，圆角设为0
添加文字：使用文字工具输入你的名字（20px Bold）和职位描述（12px Regular）
添加圆形头像：绘制一个40×40的椭圆，填充灰色作为头像占位
对齐元素：使用对齐工具让所有元素整齐排列
添加效果：给Frame添加一个Drop Shadow（x:0, y:2, blur:8, spread:0, opacity:15%）

完成标志：一张看起来干净整洁的个人名片，元素对齐、间距合理。

🎓

第一课完成！

你已经掌握了Figma的界面布局和基本操作。下一课我们将学习形状与矢量绘制——这是UI设计的基础功。

🎨 01 - Figma概述

📌 本课要点

一、为什么选择Figma

🌟 Figma的核心优势

🔄 Figma vs 其他工具

二、Figma界面布局详解

1. 顶部工具栏（Toolbar）

🛠 工具栏完整解析

2. 左侧图层面板（Layers Panel）

📂 图层面板核心功能

3. 右侧属性面板（Properties Panel）

设计属性（Design Tab）

原型属性（Prototype Tab）

4. 画布（Canvas）

🖱 画布导航操作

5. 资源面板与组件面板

📚 资源面板（Assets）

🧩 组件面板（Components）

三、从零开始：创建你的第一个Figma文件

四、高效工作流：必知操作技巧

选择技巧

🎯 精确选择元素

复制与移动

📋 复制移动技巧

对齐与分布

📏 对齐操作

五、Figma文件组织结构

🗂 文件组织层级

六、Figma核心概念速查

Frame vs Group

Component vs Instance

🔑 关键术语表

七、设置你的Figma环境

八、总结与练习

✅ 本课知识检查

🎯 练习：创建个人名片设计