Figma 101｜02 探索 Figma design

Figma 101 是「设计防潮箱」发布的一个带领大家系统性学习 Figma 的教程合集。跟随本教程学习后，所有人也可以轻松上手 Figma 软件，并找到适合自己的设计工作流程。

TL;DR

上一篇文章中，我快速给大家介绍了 Figma 旗下的两款软件 Figma design 和 Figjam。这次给大家详细介绍 Figma design 的用户界面，介绍软件使用过程中部分专有名词，并展示 Figma design 的基础用法。读完本篇文章，你可以对如何使用 Figma design 有初步了解。

I. 什么是 Figma design ？

1.是什么

Figma design 是可以创建、测试、分享设计想法的工具。

它可以用来探索特殊问题&想法，管理设计流程、与团队共创以及快速获得反馈。

Design files 是实时更新的，可多人同时修改。跨设备实时迭代设计稿，无需用户保存下载传递任何文件，更不会出现版本差，方便团队成员信息同步。
所有文件都有自动保存的历史版本。用户可以利用这个功能追踪设计稿历史变化，也可以用历史记录制作新的变体。

2.适合谁

设计师、产品经理、文案、研发、测试等产品设计核心流程的参与者
平面设计师、活动运营、商品企划等互联网+行业相关从业者
个体创作者、自媒体、出海产品独立开发者等所有想利用视觉进行创造和交流的人

II. 界面导览

跟传统的设计软件（比如 Adobe Illustrator）基本一致，Figma design 分为4个分区：「Toolbar 顶部工具栏」、「Left Sidebar 左侧边栏」、「Right Sidebar 右侧边栏」、「Canvas 画板」。

「Toolbar 顶部工具栏」是最常用工具和快捷操作的集合，比如选择工具、形状工具和文字工具
「Left Sidebar 左侧边栏」是页面、图层和资产库的预览区域，比如快速查看某个区块的图层结构
「Right Sidebar 右侧边栏」是设计元素的具体信息，比如颜色、字体、大小、约束关系等
「Canvas 画板」是搭建设计稿的主工作区，用户可以在此探索想法，构成设计

1. Toolbar 顶部工具栏

「Toolbar 顶部工具栏」是用户的常用工具和常用功能合集。它主要分为 4 组：「Tools 工具」、「Actions 动作」、「Collaboration 合作」、「View 视图」

2. Left sidebar 左侧边栏

Figma design 左侧边栏的不同画板：左图为查看 Layers+Pages；右图为查看 Assets

「Left sidebar 左侧边栏」可让用户查看和管理文件里的「Layers 图层」、「Pages 页面」和「Assets 资产」。用户在左侧边栏默认看到文件中的「Layer 图层」，点击「Pages 页面」按钮后分页名次出现在图层画板顶部，点击「Assets 资产」画板后可以查看文件内组件库和全局组件库。

「Layers 图层」是组织和管理设计元素的方式。一个图层包含一个设计元素，比如一个图层放置一个形状，另一个图层放置文字。用户可以独立地编辑每个图层，同时并不影响其他图层上的元素。

可以想象一个汉堡包，它共有8层：一层面包，一层生菜，一层酸黄瓜，一层芝士，一层牛肉，一层番茄片，一层洋葱，再一层面包。用户可以单独编辑每个图层，就像是把牛肉层单独抽出来，用盐和胡椒进行额外调味，然后再放回去。在此过程中，其他的芝士、生菜、番茄等元素不受影响。

「Pages 页面」是组织和展示设计作品的容器。一个设计项目通常由多个设计页面组成。用户可以根据自己的需要设定不同页面放置内容。

可以想象一个麦当劳后厨的餐品架子，有些架子放的是炸薯条，有些架子放的是制作完成的汉堡，有些架子放的是新鲜出锅的炸鸡，有些架子是提前打好的饮料。麦当劳的员工们会把类似的内容归在同一个架子上，让后续查找过程更顺畅。

「Assets 资产」是设计过程中使用的各种资源，例如插画、图标、字体、颜色等。提前收集、整理这些资源，用户就可以在大型设计项目中快速复用。

可以想象在乐高线下店里，每个人都可以使用提前定制好的各种类型零部件（公仔头、装束、饰品、身体），快速设计出专属于自己的人物形象。

3. Right sidebar 右侧边栏

「Right sidebar 右侧边栏」可以让用户获取更多有关设计元素的信息；比如当用户没有选择任何内容时，右侧边栏可以查看整体文件的资源信息（如页面颜色、本地样式等）；或是当用户选中任意图层后，右侧边栏可以查看当前选区的属性和进一步行为（如元素位置、选中颜色等）。

拥有不同权限的用户可查看的右侧边栏是不一样的。「Viewer 预览者」仅可以查看「View only access 仅预览状态」，如上图左侧，用户可以评论、查看属性和导出画板中的元素。「Editor 协作者」和「Owner 原作者」可以查看「Edit access 可编辑状态」，如上图右侧，用户可以编辑画板中的所有元素，同时给它们制作动画。

4. Canvas 画板

「Canvas 画板」是用户排列组合「Layers 图层」，并且调整「Right sidebar 右侧边栏」中的具体参数，陈列展现一系列设计的工作区域。这是一块完全空白的白板，用户可以随意创作、测试和迭代想法。

除了上述内容，在画板区域用户还可以快速进行下方两种操作：「拖拽移动」和「放大缩小」，快速查看过往的设计稿。

「拖拽移动」，即在设计文件里四处移动，查看画板中的内容

鼠标操作：Space + 鼠标左键，点击拖拽画面
触控板操作：两指往同一方向滑动，Figma 视图会跟着指头方向移动

「放大缩小」，即放大视图查看具体细节，或者缩小视图查看全局通览。

界面快速按钮：顶部工具栏最右侧，视图百分比框，可快速调节视图大小
鼠标操作：[Mac] Cmd + 鼠标滚轮；[Windows] Ctrl + 鼠标滚轮
触控板操作：两指向反方向滑动为放大，两指相向滑动为缩小（同手机/pad缩放手势）

III. 开始使用 Figma

1. 网页版本与桌面版 App 版本

Figma 是一款基于网页浏览器开发的设计软件，它同时提供网页版本和桌面 App的版本。两个版本给予用户同样的功能和特性。

如果是 macOS 用户，Figma 桌面版 App 需要 macOS 11 及以上的系统

如果是 Windows 用户，Figma 桌面版 App 需要 Windows 10 及以上的系统以及 64-bit 环境。

如果是 Figma 软件的高频使用者，或者是 mac 用户，强烈建议下载桌面版 App 使用（macOS 系统的桌面版 App 为不同处理器做了配置优化）。

本教程以展示桌面版 App 操作为主，如果需要下载桌面版 App，点击 macOS 下载链接或 Windows 下载链接获取。

2. 认识「Page 页面」

如上文所说，「Page 页面」是组织和展示设计作品的容器。一个设计项目通常由多个页面组成。用户可以根据自己的需要设定不同页面放置内容：

可以按照项目进行状态进行分页
可以把需管理的组件单独分页
可以把初稿、想法单独分页
可以把旧版已迭代设计存档单独分页
可以把交付设计 Review 的内容单独分页
可以把交付开发的内容单独分页

当一个 Figma 文件拥有多个页面后，如果想要浏览不同页面，点击「Left sidebar 左侧边栏」中页面名称即可跳转。

如果想要新建页面开始，点击「Left sidebar 左侧边栏」右上角 + 按钮

如果想要分享页面，右键点击页面名称，“Copy link to page”复制链接

3.认识「Layers 图层」

如上文所说，「Layer 图层」是组织和管理设计元素的方式。Figma 中一个单一图层有且仅有一个设计元素（比如一个形状、一段文字），用户组合多个图层进行设计。

一个社交媒体卡片的设计稿，包含一个头像图层、一个名称图层、一个照片图层和一个文案图层

上图案例中，Profile picture 是一个图层，Profile name 是一个图层，Post image 是一个图层，Caption 是一个图层。用户可以独立地编辑每个图层的属性，并不影响其他图层上的元素。而 4 样元素组合而成的 Social media post 则是一个复合图层。

3-1. 查看图层内容

如果想要查看具体图层对应元素内容，点击页面「Left sidebar 左侧边栏」中图层名称，「Canvas 画板」中会在对应元素外侧出现蓝色线框。

3-2. 图层类型

目前 Figma 中总共有 10 种图层类型，一个设计稿通常由多种类型的图层混合组成。

在上面简单介绍的10种图层中，有3种是专门作为容器存在的父级图层：「Group 组」、「Frame 框」和「Section 分区」。

3-3. 图层的层级和顺序

如同上面的社交媒体卡片图层案例，图层是拥有层级关系的。单一图层作为子级，可以放置在父级复合图层内部的。简单的复合图层也可以放到复杂的复合图层内部的。

如上图案例，“Mobile menu”这个父级图层内有十几个不同类型的子集图层：有「Instance 组件实例」的“Icon / Back”“Icon / Home”...，有「Text 文字」的“Back”“Yuna Lu”...，有「Shape 形状」“Background”。

在一个父级图层内，子级图层的排列顺序是有意义。一般来说，图层的 Z 轴顺序和物理顺序是一致的。上方图层可能会遮住下方图层的内容展示。上图案例中 “Background” 图层位于整个父级图层中最底部的位置，所以其他图层元素都可以正常展示。如果“Background”图层位于最上层，则会遮住其他元素。