Sketch颠覆者！静电的Figma完全学习日记-Day.02

静电说：在发表Sketch颠覆者！静电的Figma完全学习日记-Day.01后，我收到了不少小伙伴的留言。其中有一些表达了质疑的声音，大概是这样的：

“现在大互联网公司的设计师默认的UI设计工具就是Sketch了，他们会不会转到Figma来是一个问题，而且目前他们内部推出的一些组件也是基于Sketch的。我估计Figma还是少数人用，不可能是颠覆者。”

其实把上面留言中的Sketch换成Photoshop也同样生效。在15年的时候，也就是Sketch马上，即将要开始火的时候，很多人在我发的Sketch教程下也表达了这种担忧。说实话，这种担忧一点都没错。当时我说：“Sketch是PS强有力的挑战者”，现在四五年过去了，Sketch火了一段后开始越来越难用，Photoshop依然是Photoshop，谁也没死。但是为啥我现在不太喜欢用Sketch了呢？最根本原因就是：它越来越难用了。

如果Sketch开发团队能不那么傲娇，固执，把软件的核心部分做好，至少保证流畅，操作不卡顿。我相信我还是会一如既往的支持它的，可是它现在真的很不给力。

Figma现在也有很多的问题，比如是基于纯线上的，网络不太好会加载比较慢。功能没有Sketch多。我想这些问题会随着后续的优化去调整改进。软件行业的竞争真的也很激烈，如果Sketch在那么多设计师给你足够的机会的时候，你依然做成这样，我想一定会有新的工具逐步去撼动你的地位。可能不是现在，但是可能也不会太遥远。

吐槽不多说了，今天是Figma学习日记的Day02。一起学起来吧！

课程总目录（更新中）

Sketch颠覆者！静电的Figma完全学习日记-Day.01

.......

Day.02-学习目录

02-1.移动工具与缩放工具

02-2.画板（Frame）与切片工具

02-3.静电的Q&A时间

02-1.移动工具与缩放工具

点击Figma页面新建文件后，我们就会看到一个默认的新建文档如下图所示。在右侧的属性检查器的“Design”Tab中，我们可以修改工作区的颜色及颜色透明度，根据自己的喜好即可。第二个Tab是“Prototype”，也就是原型设计功能，由于我们现在啥内容都没有，所以这个功能随后再讲。

在Figma中，移动是有专门的快捷键和工具的，它就是左上角工具栏的默认箭头，快捷键是V。这应该是我们用到的最多的工具了，大家有必要记一下它的快捷键，毕竟我们需要随时从其它选项中切换到选择箭头。

下一个工具则是Scale工具，也就是大家常说的缩放啦。很多设计师喜欢直接拖动图层选择框进行缩放，这个是最简单粗暴的，但是这个工具为啥会存在呢？举例说明。

下图是一个绘制好的圆形，描边为26px。分别使用直接拖动缩放和Scale工具缩放到100直径，看到它们的区别了吗？

也就是说，Scale是严格的等比例缩放，而直接拖动缩放则是保持描边数值不变来缩放。因此，如果有描边的情况下，建议大家尽量用Scale缩放。否则会引起不必要的麻烦。（这个技巧和Sketch是一样的）

02-2.Frame与切片工具

Figma同样是对于UI设计很友好的应用，新建文件不是想PS一样，一个默认尺寸的画布，只能在画布上工作。而是默认展示一个工作区，在这个工作区上我们可以随意绘画。但是如果你要设计UI或者其它页面，在工作区上放个画板是个很好的选择，Frame就是Figma中的画板（Artboard）。快捷键也由之前Sketch的A改为F，（emmmm，我的快捷键已经记不住了，混乱了）

按快捷键F，在右侧属性检查器即可选择Figma预置尺寸的画板（Frame），种类还算齐全，主流设备都能找到，同样道理，手机端同样是一倍图尺寸哦。有人问，现在能自定义常用画板尺寸吗？Sorry，现在好像不可以。期待更新。

如果你想快速创建一个画板，F后直接拖动或者双击工作区空白处就可以了。请注意，创建的画板可以调整背景色，甚至可以设置为透明，如下图，右侧的Frame被我设置为透明了。

接下来是切片工具，英文名是Slice，所以快捷键是S，这个诀窍要记住，很多快捷键都可以这么方便记住英文搞定。

切片工具可以将你选定区域的所有内容导出。意思就是，你的虚线区域内的所有内容都会被导出。包含工作区域的背景色，比如下图，默认是灰色的背景依然会被导出。（这点和Sketch不一样，Sketch在工作区非画板导出的话，是透明的。）

如果你需要导出透明的切片区域，可以这么做：把工作区域的背景色调成透明即可。

其实按照Figma的逻辑，Frame已经可以包含slice的功能了，所以这两个icon我可以放在Frame里，并把Frame颜色调整为透明，这样就可以一键导出。看到这里，我觉得Slice的作用好像弱了不少。啊~万物基于Frame？

我们甚至还可以把普通的图层通过菜单直接转为Frame，比如，我可以把下图的区域通过执行右键菜单“Frame Selection”转化为独立的画板，这个时候问题就解决了，这个透明frame直接导出的图就是透明的。

阿弥陀佛，万物皆可Frame~记住了吗？

我们甚至还可以把Frame进行描边处理，甚至加各种效果，从这个意义上来说，Frame已经不仅仅是Artboard了。太可怕了。

今天咱们的分享就到这里，记住了吗？万物皆可Frame，不要把Frame单单理解为画板哦，#神奇的符号#。

02-3.静电的Q&A时间

Q：这种在线工具，没网了咋办，不干活啦？

A：emmm，第一个问题就直击要害，暴击10000点。怎么说呢，也许这种工具是稍微超前一点的，咱们目前的使用习惯还没法太去接受它。如果你理解为，所有内容都是基于Web或者基于Internet的，是不是就好理解了。也许未来某一天真的是这样，没有网络，我们无法存活。

想象一下，你能接受没有电的生活吗？给Figma一些时间看看？

另外，Figma为了给你一些安全感，默认可以直接将设计稿存为fig扩展名的文件，保存到本地，也许有一天你预想的情况发生了，Figma是不是会为你提供一个打开编辑和预览的本地化工具呢？一切皆有可能。

Q：Sketch万岁！大家都用的Sketch！

A：嗯，四五年前，所有人都在说，用Photoshop最高！世界变化太快，我不理解。螃蟹谁吃？你吃不吃？不吃我吃先。

Q：Frame好像特别的灵活呢？

A：是滴，记住！万物皆可Frame。不要把它单独理解为画板。

Q：老师我现在设计做的还不好，有必要学Figma吗？

A：我的建议，你先找个你最拿手的工具，把你的设计视觉做好再说。咱们不是工具论。Figma可以在你刚才所要提高的技能完成后再学。