学习 Figma 需要先了解它的主要界面和结构，我们可以简单分为三个部分：

• 资源管理
• 官方社区
• 操作页面

资源管理

资源管理的主页是登录账户后展示的默认页面，主要用于连接 Figma 的不同功能、页面，以及管理团队和项目资源。

客户端中顶部是页面标签栏（浏览器版没有），第一个选项即资源管理页面，后面每打开一个文件就会创建一个独立标签，逻辑和浏览器相同。

左侧栏中第一个模块是账户模块，包含账户设置、消息、搜索、最近打开 Recents 和社区入口 Community。

第二个模块则是团队管理模块，理解它就需要先理解 Figma 对文件的保存和管理是围绕 “团队Team”展开的。一个账号可以创建多个团队（即使团队只有你自己），而文件是保存到“团队中”而不是“账号内”，所以切换不同团队保存的设计文件互不相通。

而下方选项中包含五个选项，我们来简单对它们做个说明：

• 文件列表 Drafts：文件创建后默认保存的位置
• 项目列表 All projects：创建项目文件夹用于文件分类
• 项目资源 Resources：除了 FigmaDesign 外的其它文件类型，如 Buzz、Sites 等
• 回收站 Trash：删除后的文件回收站
• 团队设置 Admin：用于管理团队的文件

最下方的模块 Starred 可以理解成快速入口，需要我们在团队中给文件或项目点亮 “收藏图标” 后它们就会展示到这个列表内，帮助我们快速打开近期正在设计的项目或文件。

界面右侧包含顶栏和文件列表。顶栏中可以选择创建相应的 Figma 文件类型，而不同页面位置和账号权限可创建得文件类型会有一定的差异，不是完全一致的。

官方社区

官方社区从资源管理页面中的左侧 Community 选项中进入，社区内和设计相关的资源包括设计素材和插件。在社区首页可以通过搜索栏搜索你想要的资源。也可以通过顶部的导航栏选项来进入指定的分类列表。

Figma 已经多次更新社区的入口，如果你的界面和图例不同，可以自己找下资源管理页面中的 “可疑选项” 肯定能找到它。

操作页面

操作页面就是创建文件后进入的 “设计模式”，Figma 的不同工具有不同的操作页面样式，在这里我们主要介绍 FigmaDesign 的操作页面。

Design 文件的操作界面可以分为四个模块：

• 左侧的资源栏：用于查找和管理文件内的元素和图层等资源
• 中间的绘图区域：进行图形绘制和编辑，并查看效果的区域
• 右侧的属性栏：管理选中对象的相关属性参数的面板
• 底部的工具栏：设计过程中会使用到的常用操作工具

Design 的四个基本模块很好理解，但要注意的是它可以切换到不同模式，不同模式下的面板样式会发生一定的变更。

首先是交互模式和演示模式，交互模式 Prototype 是为设计稿添加交互连线和动效的编辑模式，演示模式则是用于预览制作好的交互效果的模式，它们都要通过属性栏右上方进入。

而在工具栏右侧，也有个模式切换开关，默认模式下选中的是当前的 Design 模式，但是可以点击切换成 Draw 绘图模式和 DevMode 开发模式。Draw 模式主要用于数位板手绘的模式，DevMode 则是用于设计开发和编程的辅助模式。

如果“不小心”切换到别的模式，就检查属性和工栏内的选项否处于 Design 模式下即可。