静电说:在发表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可以在你刚才所要提高的技能完成后再学。