source
cover

熟悉 Figma 的设计工作台

接上一篇创建了第一个 Figma 设计稿,正式画稿之前我们需要熟悉一下 Figma 的设计工作台。万幸的是,以 Sketch 为代表的新 UI 设计工具,工作台的布局都差不多。我们以总分的形式拆解 Figma 的设计工作台。先来一张动图遍历一下工作台的大多数功能。

教程相关

  • Figma 地址:www.figma.com

  • 阅读时长:5分钟

  • 操作时长:12分钟


布局总览

整个 Figma 设计工作台可以划分为四个主要区域:

  1. 工具栏:这里集合了大部分 Figma 的功能,包含 Figma 菜单;

  2. 图层栏:这里放置了设计稿中所有的图层;

  3. 检视窗:这里可以看到不同图层的具体属性;

  4. 设计区:这里呈现正在处理的设计稿,主要设计工作在这完成,很好理解,本篇不做解读。

工具栏

  1. 菜单:这里集合了 Figma 中所有的功能,可以使用搜索功能定位自己需要的功能,前提是你的看得懂😂;

  2. 鼠标:这里可以选择「Move」或「Scale」,其中 Move 就是普通鼠标,Scale 是放大镜,但是我们可以用浏览器自带的放大缩小快捷键,所以 Scale 可能并不常用;

  3. 图层插入:这里集合了 Figma 中可以插入的各类图层,包括画布、图形、线、文字和评论,鼠标 hover 时会显示丰富的插入选项;

  4. 标题:这里可以对整个设计稿进行管理,里面有个「Show Version History」很有可能是版本管理,等我后续研究研究。另外,选中图层时,这里会替换成图层相关操作,比如蒙版、编辑、网格;

  5. 分享:在这里可以分享你的设计稿给别人,比如我的设计稿地址是戳这里 ,点击链接进来的小伙伴头像会依次排列在此区;

  6. 演示:制作好原型后用该功能进行演示;

  7. 尺寸:工作台参数设定,可以对一些设计区的参考线进行管理。

图层栏

  1. 设计资产:封装好的组件,以及加载的设计资产库都会在此呈现,方便设计师对已生产和团队资源充分利用。具体设计组件的创建管理、库的创建管理会配上实例,呈现在单独的教程;

  2. 图层管理;设计稿中的所有页面和图层会呈现在图层管理中,设计师在这里管理具体的设计图层。

检视窗

  1. 设计:这里可以对图层的参数进行设置和管理;

  2. 原型:在这里设置原型的相关参数,比如原型的触发、跳转目标、转场方式;

  3. 代码:这里可以读取图层的样式代码,支持 iOS、CSS、Android。