1.2 你是这样的Figma

Figma是一款在线协作设计软件，本节将对Figma的编辑器、创建团队、新建文件、导入Sketch文件和分享设计文件和原型等内容进行讲解。

1.2.1 编辑器介绍

1．工具栏左侧

Figma工具栏左侧主要包括 菜单 和 一些工具 ，如图1-14和图1-15所示。

（1）菜单

单击左上角的菜单按钮展开菜单，其主要功能如图1-14所示。

Quick actions（快捷操作）： 包括按名称搜索Figma中的文件、编辑、快捷键和查看等内容。

File（文件）： 对文件进行新建、导入、导出等操作。

Edit（编辑）： 进行撤销、复制和粘贴等操作。

View（视图）： 包括设置布局网格和标尺，以及调整缩放比例和在文件中浏览等功能。

Object（对象）： 对选择的对象进行编组、创建组件、旋转和镜像等操作。

Vector（矢量）： 可进行矢量编辑。

Text（文本）： 为选择的文本设置加粗、字号、高度和间距等样式。

Arrange（排序）： 通过对齐和分配来整理所选的多个对象。

Plugins（插件）： 查看、管理和运行安装的插件。

Integrations（集成）： 对链接的应用程序进行查看、管理和使用。

Preferences（偏好设置）： 调整Figma的偏好设置。

Libraries（资源库）： 打开资源库窗口。

（2）操作工具

Move（移动）： 在Figma中选中对象后，可以用移动工具在画布上移动所选对象，快捷键为“V”。

Scale（缩放）： 选择移动工具下方的缩放工具，可以调整所选对象的大小，快捷键为“K”。

（3）画框和切片工具

Framer（画框）： 选择该工具后，可在画布上拖动创建画框，或在屏幕右侧选择默认画框，快捷键为“A”或“F”。

Slice（切片）： 切片工具可导出指定区域中的内容，快捷键为“S”。

（4）形状工具

在Figma中可以使用多种形状工具进行复杂矢量图案的设计，形状工具如下。

Rectangle（矩形）： 快捷键为“R”。

Line（直线）： 快捷键为“L”。

Arrow（箭头）： 快捷键为“Shift+L”。

Ellipse（椭圆）： 快捷键为“O”。

Polygon（多边形） 。

Star（星形） 。

Place Image（放置图片）： 快捷键为“Shift+Cmd（Ctrl）+K”。

（5）钢笔和铅笔工具

Pen（钢笔）： 钢笔工具可以构建矢量路径，快捷键为“P”。

Pencil（铅笔）： 铅笔工具可以将手绘作品添加到设计文件中，快捷键为“Shift+P”。

（6）文本工具

Text Tool（文本工具）： 选择此工具后，单击画布便可输入文本，快捷键为“T”。

（7）手工具

Hand Tool（手工具）： 选择手工具后，在文件中单击任何对象，对象都不会被选中，方便预览设计文件，快捷键为“H”。

（8）评论工具

Add/Show Comments（添加/显示评论）： 选择此工具后，可直接在设计文件上添加留言，且留言只有在选择评论工具后才会显示。

2．工具栏中部

工具栏中部显示的工具会根据选择的对象而变化，图1-16所示为可能出现的所有工具。

（1）Reset Instance（重置组件实例）

当所选对象为调整后的组件实例时，将会看到此工具，单击按钮 可将修改后的组件实例还原为主组件样式。

（2）Edit Object（编辑对象）

当所选对象为矢量图形时，可看到 “Edit Object”（编辑对象） 按钮 。单击 按钮，可进入矢量编辑模式，用户可在矢量路径上添加、删除或调整锚点。

（3）Create Component（创建组件）

单击 按钮可以将所选对象变为组件。组件是可以在整个项目中重复使用的对象，可保证设计的统一性。

（4）Use as Mask（设为蒙版）

该工具用于显示或隐藏所选对象的特定部分。单击 按钮（ 设为蒙版 ）可将所选对象转换为遮罩蒙版。

（5）Crop Image（裁剪图片）

当所选对象为图片时，可看到该工具，单击 按钮（ 裁剪图片 ）即可对图片进行裁剪。

（6）Union Selection（并集所选项）

同时选中两个以上矢量图形后会出现 “Union Selection”（并集所选项） 按钮 ，可对矢量图形进行组合。单击右侧的下拉按钮 可展开下拉菜单，如图1-17所示。

Union Selection（并集所选项）： 将重叠的路径合并成一条。

Subtract Selection（减去顶层所选项）： 从底层减去上方所有重叠项。

Intersect Selection（交集所选项）： 将重叠的路径合并成新的路径。

Exclude Selection（差集所选项）： 将不重叠的部分合并成新的路径。

Flatten Selection（拼合所选项）： 将选择的多个对象合并成一个整体。

3．工具栏右侧

工具栏右侧是 分享 和 视图选项 工具等，如图1-18所示。

（1）用户头像

展示此时访问当前页面的用户头像。

（2）Share（分享）

单击“Share”（分享）按钮可打开分享模式，用于管理设计文件的访问权限。

（3）Present（演示）

单击演示按钮 会在新窗口中打开 原型演示页面 ，用于预览设计文件和进行交互演示。

（4）View Settings（缩放/视图选项）

缩放操作通常使用快捷键来完成，如图1-19所示。

部分选项说明如下。

Pixel Grid（像素网络）： 选择该选项后，放大画面可以看到1px×1px的网格。

Snap to Pixel Grid（对齐到像素网格）： 选择该选项后，可以让对象大小和对象位置值都为整数，建议在进行界面设计时选择该选项；取消选择该选项后，对象的大小和位置值可以出现小数，在编辑矢量对象时建议取消选择该选项。

1.2.2 创建团队

每个Figma团队都是独立的工作区，创建团队后可以邀请他人加入团队，其他人加入后便可访问团队内的所有设计文件。

步骤01 打开Figma主页面。

步骤02 单击页面左下角的“Create New Team”（创建新的团队）按钮，如图1-20所示。

步骤03 在弹出的对话框中输入 团队名称 ，如图1-21所示。

步骤04 如果暂不邀请协作者加入团队，可单击“Skip for now”（暂时跳过）按钮，团队创建成功后可重新邀请协作者加入，如图1-22所示。

步骤05 单击“Choose Star ter”（入门）按钮即可创建免费版团队，如图1-23所示。

团队创建成功后，新建的团队会在页面左侧显示出来，如图1-24所示。

步骤06 单击团队名称，可在页面右侧邀请协作者加入团队，单击顶部的“Settings”（设置）可修改团队的名称、头像，以及删除团队等。

1.2.3 新建项目

项目是在团队下创建的。

步骤01 打开Figma主页面，在左侧选中新创建的团队，然后单击页面右上角的“New project”（新建项目）按钮，如图1-25所示。

步骤02 在弹窗中输入项目名称并单击“Create Project”按钮，如图1-26所示。

新项目将会显示在团队名称下方，如图1-27所示。

1.2.4 新建文件

可以在 “Drafts”（草稿） 或 团队项目 中新建文件，新建文件的数量不受限制。

在项目中创建文件

步骤01 打开Figma主页面，单击项目Learn，然后单击页面右上角的“New File”（新建文件）按钮 ，再选择 “New design file”（新设计文件） ，如图1-28所示。

步骤02 Figma会在当前窗口中新建一个名为 Untitled 的设计文件，单击“Untitled”（无标题）可以对它进行重命名操作，如图1-29所示。

步骤03 虽然在Figma中进行的设计是实时保存的，但是也可以按快捷键 “Cmd+S”（Windows：“Ctrl+S”） 来主动保存，主动保存Figma文件时会有提示，如图1-30所示。

如何从文件页面返回到项目页面？在浏览器中需要在菜单栏中选择“Back to Files”才能返回到该文件所在的项目，在客户端中则只需单击窗口左上角的“Figma”按钮即可，如图1-31所示。

如果要在草稿中创建文件，只需单击 “Drafts”（草稿） 右侧的“New File”（新建文件）按钮 ，或在草稿模块下单击页面右上角的“New File”（新建文件）按钮 。

在草稿中创建的文件会存储在草稿中，在项目中创建的文件会保存在项目中。当然文件是可以跨项目或团队进行移动的，也可以将项目中的文件移动到草稿中。

1.2.5 导入Sketch文件

Sketch设计文件可以直接导入Figma，将Sketch文件导入Figma后，原Sketch文件中的Symbols将会变为Figma中的组件。

步骤01 打开已创建的项目，单击页面右上角的“Impor t”（导入）按钮 ，如图1-32所示。

步骤02 选择一个本地的 Sketch 文件并导入。导入成功后，文件将会显示在项目中，如图1-33所示。

步骤03 也可单击页面左上角的菜单按钮，选择 “File” ＞ “New from SketchFile” 来实现Sketch文件的导入，如图1-34所示。

1.2.6 将文件导入Figma

.fig文件的导入方法和Sketch文件的导入方法一样，可参考1.2.5小节中的导入步骤。

1.2.7 添加/显示评论

步骤01 单击工具栏中的“Add/Show Comments”（添加/显示评论）按钮 进入评论模式，快捷键为“C”。

步骤02 单击要添加评论的位置（在该模式下鼠标指针会变成类似“定位”形状的图标）。

步骤03 将评论内容添加到留言弹窗中，也可添加表情符号或使用“@协作者”功能。

步骤04 单击“Post”（发布）按钮，可将评论发布出去，如图1-35所示。

拥有文件的 “can view”（可查看） 权限后即可对文件进行评论。

如果你打开的是别人发给你的链接，在评论模式中也可以使用 “@协作者” 功能。

评论模式下不可以修改设计文件，选择其他工具可退出评论模式。

我们可以给Figma中的任何对象添加评论，Figma将会把我们的评论内容保存在设计文件中。

1.2.8 分享设计文件和原型

设计文件和原型制作完成后，可将它们分享给同事（产品经理、运营同事、前/后端工程师）。

每个设计文件和原型都拥有唯一的链接，而且链接后缀是一样的，如图1-36所示。

1．分享设计文件

步骤01 单击设计文件右上角的“Share”（分享）按钮可打开分享设置，如图1-37所示。

步骤02 单击图1-37所示的❸处的下拉按钮 ，可以对分享的链接进行权限设置：

Anyone with the link指知道链接的任何人（常用）；

Only people invited to this file指只有被邀请的人。

步骤03 单击页面中的蓝色“Copy link”（复制链接）可得到设计文件的链接。

步骤04 如需邀请协作者，可以将协作者的邮件地址或Figma账户名称输入图1-37所示的❷处的文本框中进行邀请（通过该方法邀请协作者后，协作者需在通知中心同意后才能看到设计文件）。

步骤05 对于已经邀请的协作者，可在图1-37所示的❹处设置其文件权限，可改为“owner”（所有者）、“can edit”（可编辑）、“can view”（可查看）或“Remove”（移除）。

步骤06 也可以通过内嵌网页的方式，将设计文件内嵌到支持的网站里，单击页面中的“Get embed code”（获取嵌入代码）即可获取相关代码。

2．分享原型

单击工具栏右侧的 按钮打开原型页面，分享原型与分享设计文件的方法相同。

1.2.9 合作设计

在邀请并给予协作者当前设计文件的编辑权限后，当你们同时访问该设计文件时，协作者的头像会出现在页面右侧，单击其头像将跳转到所选协作者查看的内容，如图1-38所示。

你们可以一起对设计文件进行修改，当协作者退出设计文件时，他的头像也会消失。

1.2.10 团队资源库

我们设计的样式和组件保存在第一次创建它们的文件中，如果要在团队项目中使用和该文件一样的样式和组件，就需要把它发布到团队资源库中，这样协作者就可以使用该组件库。

要将Figma升级到教育版或专业版才可以使用团队资源库。当然，如果没有升级也不会影响Figma组件的学习和使用。

样式和组件的创建将会在本书的3.1节和3.2节中进行详细说明。

团队资源库的开启方法

步骤01 在设计文件页面左侧的 “Assets”（资源） 面板中单击“Team Library”（团队资源库）按钮 ，如图1-39所示。

步骤02 在弹出的窗口中开启团队资源库，如图1-40所示。

在团队资源库设置页中可以开启、关闭和更新其中的文件。

通过前面的学习，相信大家对Figma的架构有了初步的了解。可以这样比喻：Figma就如同一个大学，团队是“学院”，项目是“班级”，设计文件就如同班级中的“老师或学生”，“老师”就是团队资源库，里面的“学生”可以从“老师”那里获得样式和组件。

团队创建成功后，通常会创建一个名为 “Design System” 的项目，里面包含了常用的 “UI Kit”设计套件 和从 “Community”（社区） 复制的优秀设计系统。