Figma 入门保姆级教程：从零开始掌握设计神器

1. 引言：Figma 是什么？

Figma 是一款基于浏览器的协作式 UI 设计工具，自推出以来越来越受到 UI 设计师的青睐，很多设计团队也投入了 Figma 的怀抱。

与传统的设计软件不同，Figma 可以直接在浏览器中运行，无需下载安装，大大提高了工作效率。

它不仅拥有类似于 Sketch 的操作和功能，还可以在 Figma 中完成原型设计，无缝衔接从设计到原型演示的切换；更强大的是，它可以与前端工程师协作。

工程师可以在设计图上量取位置、并且可以导出所需任何资源（包括 CSS、iOS、Android 样式）。

不同于 Sketch，Figma 可以多端使用，Windows 电脑也可以用。

Figma 是基于原生 OS 开发的软件，在速度上更是完胜 Sketch，处理大文件时表现更为出色。

Figma 的核心功能聚焦在设计、协作和原型制作上，让设计工作变得更加高效和便捷。

Figma 界面概览图

2. Figma 特点与优势

2.1. Figma 的核心功能

Figma 是一款在线 UI 工具，其核心功能聚焦在设计、协作和原型制作上。

它不仅拥有类似于 Sketch 的操作和功能，还可以在 Figma 中完成原型设计，无缝衔接从设计到原型演示的切换。

Figma 的强大之处在于它允许设计师和工程师在同一平台协作，工程师可以直接在设计图上量取位置，并导出所需资源，包括 CSS、iOS 和 Android 样式。

2.2. 协作与共享功能

Figma 实现了让所有人在一个页面进行设计；由于该软件基于 Web，可实现跨平台开发（Windows/Mac/Linux 等）。

这种协作模式大大提高了团队的工作效率，设计师和开发人员可以实时协作，无需反复切换工具和文件格式。

Figma 多人协作示意图

2.3. 多平台支持

Figma 可以多端使用，Windows 电脑也可以用。

这使得设计师可以在不同设备间无缝切换，无论是在办公室使用 MacBook，还是在家中使用 Windows 电脑，都能继续他们的设计工作。

这种灵活性对于现代设计师来说尤为重要。

2.4. 速度与性能

Figma 是基于原生 OS 开发的软件，在速度上更是完胜 Sketch，处理大文件时表现更为出色。

这对于需要处理复杂设计文件的设计师来说是一个巨大的优势，可以显著提高工作效率。

3. Figma 下载与安装

3.1. 官方下载渠道

个人使用有免费版，最多支持 2 人协作使用。

Figma 的免费版本也支持历史版本恢复，但只能保存最近 30 天的版本。

要下载 Figma，可以在官方网站找到“Downloads”入口。

点击进入后会有三个入口，应该选择第一个“Desktop APP”，然后根据你的电脑系统下载对应的桌面端应用。

Figma 官网 Downloads 入口截图

Figma 桌面端下载选项截图

对于中文用户，可以考虑下载汉化版的 Figma，使操作界面更符合使用习惯。

目前 Figma 官方并没有提供中文版的客户端，但可以通过第三方开发网站获取中文版。

3.2. Figma 汉化版下载

Figma 中文汉化版可以通过以下方式获取：

  • Figma 中文社区提供的汉化版本：

https://www.figma.cool/cn

Figma 中文社区汉化版页面截图

  • Moonvy 提供的 FigmaEX 汉化版：

https://moonvy.com/figmaEX/

Moonvy FigmaEX 汉化版页面截图

FigmaEX 是一个集成来自 Figma.Cool 的汉化版，用户可以在中文与英文界面之间自由切换，非常方便。

3.3. 安装步骤

下载完成后，将 Figma 安装包拖入“应用程序”文件夹或根据提示完成安装。

Figma 安装步骤截图

安装完成后，打开 Figma 应用程序。

如果使用的是汉化版，可能需要设置或激活汉化功能。

对于 FigmaEX，通常可以直接在界面右上角切换语言。

FigmaEX 语言切换界面截图

安装完成后，建议注册一个 Figma 账号并登录，以便保存和管理你的设计项目。

Figma 账号注册登录界面截图

4. Figma 界面与工作区介绍

4.1. Figma 界面区域划分

Figma 界面包含了四个主要区域：图层工具、技术菜单、工作区和属性工具区。

这些区域共同构成了 Figma 的工作环境，每个区域都有其特定的功能和操作方式。

Figma 界面四大区域划分图

4.2. 左上角工具栏

点击左上角的 Figma 图标，可以进行一些简单的搜索、快捷工具调用，快速调用指令。

这个区域提供了快速访问各种功能的入口。

Figma 左上角工具栏截图

4.3. 左侧图层面板

左侧的图层面板显示了当前设计文件中的所有图层结构，包括页面、组件和元素。

设计师可以通过这个面板轻松管理复杂的项目结构，展开或折叠不同层次的元素，快速定位到需要编辑的部分。

Figma 左侧图层面板截图

4.4. 中间工作区

中间的工作区是主要的设计区域，也是设计师花费最多时间的地方。

在这个区域内，设计师可以创建、编辑和排列各种设计元素，如形状、文本和图像。

Figma 提供了多种工具和功能，帮助设计师高效地完成设计工作。

Figma 中间工作区截图

4.5. 右侧属性面板

右侧的属性面板显示了选中元素的详细属性，包括位置、大小、颜色、描边、文本样式等。

设计师可以通过这个面板精确调整元素的各种属性，也可以通过拖拽直接修改。

Figma 右侧属性面板截图

4.6. 快速熟悉界面布局

对于首次使用 Figma 的用户，建议安装 Google 浏览器和 Figma 的中文插件，这样可以更方便地使用和理解界面。

如果不知道如何安装，可以参考相关教程。

Figma 的基础界面与常规设计软件没有太多差异，有 Sketch 使用经验的用户几乎可以无缝过渡。

但对于没有设计工具使用经验的新手来说，可能需要一些时间来适应。

建议新手从简单的项目开始，逐步熟悉界面的各个部分和基本操作。

5. Figma 基本操作入门

5.1. 移动和缩放视图

在 Figma 中，移动和缩放视图是基本操作，可以通过以下快捷键实现：

  • 移动工具：V；缩放快捷键：K

分别可以移动、缩放画框。

  • 按住空格键也可以左右移动画框，这对于快速浏览大尺寸设计稿非常有用。

这些操作类似于其他设计工具，但 Figma 的实现更加流畅，尤其是在处理大型设计文件时。

5.2. 创建和编辑画框

画框（Frame）相当于 Sketch 里的 Artboard、PS 里的画布，是设计内容的主要载体。

在 Figma 中，创建和编辑画框是设计师最常用的操作之一。

绘制画框以后，就可以在画框中绘制了；快捷键和 Sketch 一样：绘制矩形：R；直线：L；椭圆：O；等等。

这些基本形状是构建复杂设计的基础。

5.3. 基本图形绘制

Figma 提供了丰富的图形绘制工具，包括：

绘制箭头：Shift+L

绘制圆角矩形：绘制矩形后，直接拖动 4 个圆点，就可以将矩形转换成圆角矩形；按住 Alt 键可以单独控制其中的一个圆角。

绘制圆形：Shift+O。点击拖拽中间的操纵点，可以直接画出环状图等。

这些功能类似于 AI 中的功能，使用起来非常方便。

5.4. 图形内部编辑

双击或 Enter 可以进入图形内部的“点”模式；在点模式下，可以进行更精细的编辑，如删除点、调整曲线等。

但需要注意的是，不要在点模式下进行圆角修改等操作，这样这个图形返回图形模式下就没有圆角属性了，同时开发同事也看不到圆角属性这些了。

6. Figma 组件功能详解

6.1. 组件的概念与优势

组件是 Figma 中最强大的功能之一，也是它区别于其他设计工具的关键特性。

很多初入设计行业的设计师在看到老前辈唰唰唰几分钟之内搭建好一套 UI 界面时都惊为天人，原因就是他们不清楚组件这个功能的重要性，也不明白它到底该怎么用。

在实际工作中，有很多重复性或者是相似性的元素，如按钮、图标、卡片等。

使用组件功能，可以将这些重复性元素创建为可复用的组件，大大提高了设计效率。

6.2. 创建和使用组件

在 Figma 中，创建组件非常简单：

  1. 选择需要作为组件的元素

  2. 右键选择“Create Component”或使用快捷键 Ctrl+K（Windows）/Command+K（Mac）

Figma 创建组件右键菜单截图

  1. 给组件命名并设置参数

创建组件后，可以在设计中多次使用，当需要修改时，只需要修改组件本身，所有使用该组件的地方都会自动更新。

6.3. 组件的高级用法

Figma 的组件功能比其他设计工具更加灵活和自由。

例如，可以创建带有变量的组件，这些变量可以控制组件的大小、颜色、文本内容等属性。

这样，即使在不同的上下文中使用同一个组件，也可以根据需要进行调整，而不需要创建多个独立的元素。

7. Figma 快捷键大全

7.1. 必备快捷键

Figma 的快捷键分为几个主要类别，包括必要快捷键与键位知识、基础快捷键、操作区快捷键（视图、文字、选项、图层、组件）以及特殊技巧。

由于 Mac 与 Win 略有差异，用户需要自行调整。

7.2. 视图操作快捷键

  • 移动工具：V
  • 缩放快捷键：K
  • 按住空格键可以左右移动画框
  • 创建自适应布局：Shift+A
  • 布局的显示和隐藏：Control+G

这些快捷键可以帮助你快速调整视图和布局，提高工作效率。

7.3. 文本和属性快捷键

  • 交互设计：H / Cmd + Option + H
  • 添加交互：右侧属性面板中设置
  • 运行原型预览：Ctrl + Alt + P

这些快捷键可以帮助你快速设置文本属性和交互功能，特别是在创建可交互原型时非常有用。

7.4. 图层操作快捷键

  • 整理图层：使用相应的快捷键可以快速管理复杂的图层结构
  • 创建自适应布局：Shift+A
  • 布局的显示和隐藏：Control+G

这些快捷键可以帮助你更高效地管理设计元素和布局。

7.5. 特殊技巧

Figma 的快捷操作不仅仅是快捷键，还包括一些界面交互的技巧。

例如，Figma 的“快速帮助”功能可以在你使用快捷键时显示相关提示，帮助你记忆和使用这些快捷键。

8. Figma 自动布局功能详解

8.1. 自动布局快捷键

自动布局是 Figma 中最强大的功能之一，可以帮助设计师快速创建响应式布局。

越熟悉自动布局的快捷方式，它们就越快成为第二天性。

创建自适应布局的快捷键是 Shift+A。

使用这个快捷键，可以快速将选中的元素转换为自适应布局，大大提高设计效率。

8.2. 自动布局参数设置

自动布局会影响布局方向和分布方式的生效范围，支持统一设置内边距或分别设置独立距离：

统一设置内边距：输入一个数字（两侧内边距相同）或两个数字（英文逗号分开，两侧内边距不同）

独立距离：单独设置容器的固定内边距

这些设置可以帮助你创建精确且灵活的布局，满足各种设计需求。

8.3. 调整顺序和对齐

在自动布局中，可以通过快捷键快速调整元素的顺序：

Mac OS 系统

  • 往左调整：Command + [
  • 往右调整：Command + ]

Windows 系统

  • 往左调整：Ctrl + [
  • 往右调整：Ctrl + ]

这些快捷键可以快速调整元素的顺序，而不需要通过鼠标拖拽。

虽然这些快捷键非常方便，但如果你不习惯使用快捷键，也可以通过鼠标调准顺序。

只需要找到元素左侧的小圆圈，拖拽它到新的位置即可。

9. 使用 Figma 设计登录页

9.1. 创建登录页的基本框架

使用 Figma 设计登录页时，首先需要创建一个合适的画框（Frame），作为登录页的容器。

画框的大小可以根据目标设备来设置，例如手机屏幕（375x812px）或平板电脑（834x1194px）。

Figma 创建画框截图

创建好画框后，可以开始添加登录页的基本元素，包括：

  1. 标题：放置在页面的顶部或居中位置，明确表明这是一个登录页面

Figma 登录页标题元素示例

  1. 用户名/邮箱输入框：通常位于标题下方

Figma 登录页输入框元素示例

  1. 密码输入框：位于用户名输入框下方

  2. 登录按钮：通常位于密码输入框下方

Figma 登录页按钮元素示例

  1. 忘记密码链接：通常位于登录按钮旁边或下方

  2. 注册/创建新账号链接：通常位于页面底部

这些基本元素构成了一个标准的登录页面框架，可以根据具体需求进行调整和美化。

Figma 登录页完整框架示例

9.2. 设计可交互的登录按钮

在 Figma 中，设计一个可交互的登录按钮需要以下几个步骤：

  1. 创建按钮：使用矩形工具（R）绘制一个矩形，并添加适当的文本（如“登录”）

  2. 绑定为帧：将按钮绑定为帧（Frame），这可以理解为包含原型（动画）功能的组

  3. 绑定为组件：将帧绑定为组件（Component），这样可以更容易地管理交互和状态

  4. 设置交互：在右侧属性面板中设置按钮的交互效果，如悬停、点击等状态

  5. 添加动画：如果需要，可以为按钮添加简单的动画效果，增强用户体验

这些步骤可以帮助你创建一个功能完善且视觉吸引人的登录按钮。

9.3. 使用自动布局优化页面

在设计登录页时，自动布局功能可以大大简化页面的排版工作。

通过使用 Shift+A 快捷键创建自适应布局，可以快速将各个元素组织成一个响应式的布局。

在设置自动布局时，可以调整以下参数：

  • 布局方向：垂直或水平
  • 分布方式：均匀分布或固定间距
  • 内边距：设置容器的内边距，控制元素之间的空间
  • 对齐方式：设置元素的水平和垂直对齐方式

这些设置可以帮助你创建一个美观且功能强大的登录页面，适应不同设备和屏幕尺寸。

9.4. 添加动画和交互效果

为了提升用户体验，可以在登录页中添加一些简单的动画和交互效果：

  • 悬停效果：当鼠标悬停在按钮上时，可以改变按钮的背景颜色、文字颜色或添加阴影
  • 点击效果：当点击按钮时，可以添加缩放或淡出效果，提供即时的反馈
  • 输入动画：当用户点击输入框时，可以添加轻微的动画效果，如边框颜色变化
  • 验证反馈：当用户输入错误的凭证时，可以显示错误信息，并添加适当的动画效果

这些动画和交互效果可以使登录页更加生动和吸引人，同时提供更好的用户体验。

10. Figma 插件与扩展

10.1. Figma 插件推荐

Figma 拥有丰富的插件生态系统，可以扩展其功能，提高工作效率。

以下是一些常用的 Figma 插件：

  • Moonvy：一个设计管理与协作工具，可以在浏览器中完成设计资源的“管理”与“交付”，并与团队保持同步。使用 Moonvy Figma 插件可以上传你的 Figma 设计图，方便团队成员访问和协作。
  • Skale：一个缩放插件，提供比 Figma 内置缩放功能更精细的控制
  • CSS 导出：可以将设计稿导出为 CSS 代码，方便前端开发人员使用
  • 图标生成器：可以快速创建和管理图标
  • 动效编辑器：可以创建和编辑复杂的动画效果

这些插件可以帮助设计师完成各种任务，从设计管理到代码生成，大大提高了工作效率。

10.2. 插件安装与使用

在 Figma 中安装插件非常简单：

  1. 打开 Figma 应用程序

  2. 点击右上角的“Plugins”菜单

Figma Plugins 菜单截图

  1. 选择“Browse Plugins”，进入插件市场

  2. 搜索需要的插件，点击“Install”安装

  3. 安装完成后，可以在“Plugins”菜单中找到并使用该插件

10.3. 快捷键提示功能

Figma 提供了一个快捷键提示功能，可以帮助用户快速熟悉和使用各种快捷键。

这个功能可以在你使用快捷键时显示相关提示，帮助你记忆和使用这些快捷键。

你可以在查看快捷键时继续工作，或使用右侧的“X”关闭快捷键提示。

提示会根据用户使用的系统（macOS 或 Windows）显示相应的快捷键。

11. Figma 常见问题解答

11.1. Figma 的 BUG 与限制

尽管 Figma 功能强大，但也有一些已知的 BUG 和限制：

  1. 有些功能需要联网：Figma 是一款基于云端的设计工具，有些功能需要网络连接才能使用。

  2. 存储限制：免费版本最多保存 30 天的历史版本，对于需要长期保存设计稿的用户可能不够。

  3. 某些复杂功能的限制：免费版本可能无法使用某些高级功能，如团队协作、更大文件的处理等。

了解这些 BUG 和限制，可以帮助你更好地规划和使用 Figma，避免在重要项目中遇到意外问题。

11.2. 兼容性问题

Figma 是一款基于云端的设计工具，理论上可以在任何支持现代浏览器的设备上使用。

然而，由于不同浏览器和操作系统的差异，可能会出现一些兼容性问题。

如果遇到兼容性问题，可以尝试以下解决方法：

  • 更新浏览器：确保使用的是最新版本的 Google Chrome、Safari 或其他支持的浏览器
  • 清除浏览器缓存：有时浏览器缓存会导致显示问题
  • 尝试不同的浏览器：如果在 Chrome 中遇到问题，可以尝试使用 Safari 或其他浏览器
  • 检查网络连接：确保有稳定的网络连接

如果问题仍然存在，可以查看 Figma 的官方支持页面或社区论坛，看看是否有其他用户遇到类似问题以及他们的解决方案。

11.3. 与其他设计工具的转换

对于已经使用其他设计工具（如 Sketch、Adobe XD）的用户，转换到 Figma 可能需要一些时间来适应。

以下是一些转换技巧：

  1. Figma 界面与 Sketch 相似，有经验的用户可以快速上手

  2. Figma 的组件功能比 Sketch 更强大和灵活，建议花时间学习

  3. Figma 的自动布局功能是其特色，可以简化设计流程

  4. 如果遇到不熟悉的功能，可以参考 Figma 的官方文档或社区教程

通过这些技巧，可以帮助你更快地适应 Figma，提高工作效率。

12. 总结与展望

12.1. Figma 的优势与局限

Figma 作为一款在线 UI 设计工具，具有许多优势，同时也有一些局限：

优势

  • 基于浏览器的协作式设计，允许多人实时协作
  • 跨平台支持，可以在不同设备间无缝切换
  • 丰富的功能和插件生态系统，满足各种设计需求
  • 与开发团队的紧密集成，方便设计稿的导出和实现

局限

  • 有些功能需要联网，对于网络环境不佳的用户可能不便
  • 免费版本有功能和存储限制，高级功能需要付费
  • 对于习惯传统桌面应用的用户，可能需要一些时间适应

了解这些优势和局限，可以帮助用户更好地规划和使用 Figma，发挥其最大价值。