下载掌阅APP，畅读海量书库
立即打开
Figma的界面设计简洁明了，工具栏和基础操作都非常直观，用户即使没有使用过类似的设计软件，也能快速上手。Figma工作界面的设计充分考虑了用户体验和协作效率，提供了强大的设计工具和高效的工作流程，使得设计师可以更加专注于设计工作本身，提高工作效率。
双击Figma程序图标，即可启动Figma软件。启动Figma软件后，首先进入的是Figma的项目管理界面，如图1-20所示。
主页：Figma项目管理主界面，是进入Figma的默认界面，在该界面中可以对Figma项目文件进行删除、分享等管理操作。
图1-20 Figma项目管理界面
用户名称：单击侧边栏顶部的用户名称，在打开的下拉菜单中可以对Figma软件的主题和账号进行设置，如图1-21所示。
“通知”图标
：单击侧边栏顶部右侧的“通知”图标，可以在打开的选项卡中查看最新的通知信息。
最近：选择侧边栏中的“最近”选项，可以在Figma项目管理界面中显示最近编辑的项目文件，选择相应的项目文件，可以快速进入项目文件的编辑状态。
你的团队：该功能只有付费版可用，选择侧边栏中的“你的团队”选项，显示付费团队中的项目文件，免费版Figma不可用。
草稿：选择侧边栏中的“草稿”选项，可以进入Figma草稿文件管理界面，如图1-22所示。草稿可以理解为个人文件管理中心。
图1-21 主题和账号设置选项
图1-22 草稿文件管理界面
收藏的文件：在侧边栏中展开“收藏的文件”选项，可以在该选项下方显示用户收藏的项目文件名称，单击项目文件名称，可以快速进入该项目的编辑状态。
团队：在“团队”选项区中可以对免费的团队项目进行管理，也可以创建多个免费团队。
探索社区：选择侧边栏底部的“探索社区”选项，可以打开Figma社区页面，在Figma社区中为用户提供了众多不同类型的Figma资源，如图1-23所示。在社区页面中浏览并找到需要的资源，如图1-24所示。
图1-23 打开Figma社区页面
图1-24 浏览Figma社区中的资源
单击相应的资源缩览图，可以进入该资源的详情介绍页面中，如图1-25所示。如果需要使用该资源，可以单击该资源详情页面中的“在Figma中打开”按钮，即可在Figma中打开该资源，即可对该资源进行编辑，如图1-26所示。
图1-25 进入资源详情介绍
图1-26 在Figma中打开资源文件
新建文件：单击Figma项目管理主界面左上角的“新建文件”图标
，显示“新建文件”界面，在该界面中用户可以新建设计文件和FigJam文件，如图1-27所示。选择“新建设计文件”选项，即可新建一个空白的Figma项目设计文件，并进入该文件的编辑工作界面，如图1-28所示。
图1-27 “新建文件”界面
图1-28 新建空白的Figma设计文件
FigJam文件是Figma中一种特殊类型的文件，可以用于在线白板协作。FigJam文件可以用于头脑风暴、组织想法、创建图表和思维导图、进行设计评审、收集反馈，以及进行线上会议等活动。任何人都可以参与FigJam文件，进行协作和讨论，使得团队协作更加高效和便捷。
设计文件：单击Figma项目管理主界面右上角的“设计文件”按钮，在打开的下拉菜单中可以选择创建一个团队项目文件，或者创建一个草稿文件，如图1-29所示，选择相应的命令，可以创建相应的设计文档并进入文档的编辑状态。
FigJam画板：单击Figma项目管理主界面右上角的“FigJam画板”按钮，在打开的下拉菜单中可以选择创建一个团队项目画板，或者创建一个草稿画板，如图1-30所示，选择相应的命令，可以创建相应的空白画板并进入画板的编辑状态。
图1-29 “设计文件”下拉菜单
图1-30 “FigJam画板”下拉菜单
导入：单击项目管理主界面右上角的“导入”按钮，弹出“导入”对话框，提供了两种导入方式，一种是导入本地计算机中的文件，另一种是导入Jamboard文件，如图1-31所示。
Figma支持导入的文件类型非常多，如Adobe XD文件、Sketch文件等。Jamboard是谷歌推出的专门面向企业会议、团队协作的智能白板产品。
帮助和资源：单击Figma项目管理主界面右下角的“帮助和资源”图标，在打开的下拉菜单中为用户提供了相关的帮助选项，如图1-32所示。
图1-31 “导入”对话框
图1-32 “帮助和资源”下拉菜单
在Figma项目管理主界面中单击右上角的“设计文件”按钮，在打开的下拉菜单中选择“草稿”命令，创建空白的项目文件，即可进入Figma项目编辑工作界面。除此之外，也可以在Figma项目管理主界面中的“草稿”选项中选择任意一个项目文件，同样可以进入Figma项目编辑工作界面，如图1-33所示。
图1-33 Figma项目编辑工作界面
工具栏：工作界面的顶部为Figma的工具栏，为用户提供了UI设计制作的相关工具，与Sketch的工具非常相似，从左至右分别为移动、画框、矩形、钢笔、文本、资源、抓手工具和添加评论，如图1-34所示。在工具栏的右侧为用户提供了项目文件导出协作相关的工具，包括观看我演示、分享、开发模式、演示和缩放比例，如图1-35所示。
图1-34 工具栏左侧相关工具
图1-35 工具栏右侧相关工具
主菜单：单击“主菜单”图标
，可以打开Figma的主菜单，如图1-36所示，执行主菜单中相应的命令，可以实现相应的操作功能。
“图层”面板：在工作界面的左侧为“图层”面板，在该面板中包含了当前设计文档中的所有页面、图层、文字和组件等资源，如图1-37所示，可以对当前设计文档中的资源进行管理。在顶部单击“资源”文字，切换到“资源”面板中，可以对当前设计文档中的组件资源进行管理，如图1-38所示。
设计区域：Figma工作区域的中间部分为作品设计区域，所有效果图的设计制作都是在该区域中完成的。
如果需要移动设计区域中的画布，可以单击工具栏中的“抓手工具”
，在画布上单击并拖动鼠标。也可以在使用任意工具时，按住键盘上的空格键，光标将变为抓手工具图标，在画布上单击并拖动鼠标，即可移动画布，如图1-39所示。
如果需要放大或缩小设计画布，可以按住【Ctrl】键不放，滚动鼠标滚轮，即可对设计画布进行放大或缩小操作。还可以通过快捷键对设计画布进行放大或缩小操作，按【Ctrl++】组合键，可以放大画布，按【Ctrl+-】组合键，可以缩小画布，如图1-40所示。
图1-36 Figma主菜单
图1-37 “图层”面板
图1-38 “资源”面板
图1-39 移动画布
图1-40 缩小画布
按【Shift+0】组合键，可以将画布快速切换到100%显示；按【Shift+1】组合键，可以显示画布中所有的设计画板。
“设计”面板：在Figma工作区的右侧为“设计”面板，在该面板中可以显示当前设计文档中所选中的元素的相关设置选项，选择不同的设计元素，其可设置的选项也不同，如图1-41所示。在顶部单击“原型”文字，切换到“原型”面板中，可以对当前设计文档进行原型设计，如图1-42所示。
插件工具栏：Figma的插件工具栏是一个用于管理和调用插件的面板。将光标移至插件工具栏图标上方时，可以展开该插件工具栏，如图1-43所示，它提供了快速访问和调用Figma中安装的插件的便捷方式。
“帮助和资源”图标：单击Figma工作界面右下角的“帮助和资源”图标，可以打开相应的菜单，为用户提供了官方的帮助和资源选项，如图1-44所示。选择“键盘快捷键”命令，在Figma工作界面的底部会显示出Figma软件中常用的快捷键，如图1-45所示，方便用户进行学习和记忆。
图1-41 “设计”面板中的属性设置选项
图1-42 “原型”面板
图1-43 展开插件工具栏
图1-44 “帮助和资源”菜单
图1-45 显示Figma软件常用的快捷键
按【Ctrl+\】组合键，可以将Figma工作界面中的工具栏和左右两侧的“图层”面板及“设计”面板隐藏，从而使Figma的工作区域更大，便于用户进行操作和观察。再次按【Ctrl+\】组合键，可以再次显示出Figma工作界面中的工具栏和左右两侧的面板。