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”（社区）复制的优秀设计系统。