【Figma】入门第一篇 页面和功能简介 初学者必看

大家好，欢迎来到IT知识分享网。

        本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手，也欢迎大神来多多指教。文章目前介绍的是各工具栏的顶层菜单，后续会跟随作者学习进程和新版本不定期更新，欢迎收藏点赞或关注。

  00 工作台页面概况

新建一个页面后的上如上图界面：

• 左侧主要显示页面结构，其中包括我们页面中的各个元素的层级和项目中创建的组件
• 右侧可以理解为参数区，可以对操作元素的属性，进行调整和设定，以及一些效果的实现
• 中间底下还有一小条，可以理解为绘制工具，主要用于切换要画的元素类型

下面我们分区介绍。

  01 左侧栏

  ① 主菜单 Main menu

        相当于我们用的 office 软件的开始菜单，里面有文件、编辑等基本操作。但其实比较少用到，因为有很多操作在别的地方有更方便的方法完成，比如 arrange 在右边的参数操作区有直接可以点击的按钮，不必进来翻找。

  ② 文件操作

        对文件的操作，双击这个 Untitled 可以直接改文件名，剩下的操作是：

   ③ 折叠左侧栏

        没啥多说的，就只左侧栏收起来，按快捷键 ctrl + \  可以把两边都收掉。

   ④ 文件结构

        ④ 和 ⑤ 是并列的，其实 ④ file又中包含了 ⑥页面pages 和 ⑦图层layers

  ⑤ 组件库

        这里有我们自己在项目中创建的本地组件，也有一些当下热门的组件库推荐。

  ⑥ ⑦ 页面和图层

        页面通过pages 右边的加号可以新建，双击页面名称可以快捷重命名。

        图层下可以展开和收起，看到 frame 的层次和 group 的层次结构。

  02 右侧栏

  02.1 右侧栏 Design 标签

        非选中状态下，右侧栏调整的是工作台的背景填充色

         在有元素被选中的状态下，功能会丰富得多，比如我门选一个方形，就会有很多

  02.2 右侧栏 Prototype 标签

        Prototype 非状态下调整的是原型机 选机型和背景，选运行预览时的横屏竖屏等

  03 底部绘制工具栏

        在这里选择不同的绘制工具，基本上都有对应的单按键快捷键，倒数第二个是是一个工具箱，可以查找各种实用的插件和组件。具体可以看我更新的另一篇figma基础快捷键和基本功能的文章。