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

用户头像
北京/UI设计师/6年前/1634浏览
Sketch颠覆者!静电的Figma完全学习日记-Day.02
用户头像
静design

本节讲解移动缩放工具与Frame工具,以及答疑。

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



3
阅读原文
|
举报
|
3
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
平面男孩喝咖啡插画设计
倒计时,海报,平面
平面设计 吊牌设计
课程海报,平面素材
玄关入门地毯印花图案红地毯
平面花卉图案扁平简约无缝拼接插画
金色颗粒质地的平面
平面书法字手写
城阙凡花
平面风格黄绿色系花朵装饰
水蜜桃和李子的平面水果图案
海底世界插画
空的平台平面和自然景观
金色颗粒质地的平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
古风平面仕女与瓷器
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
牛奶乳液层次平面平铺平面
金色颗粒质地的平面
学习,优惠券,平面,海报
平面插画设计女孩喝咖啡
中国传统纹样创新图案设计
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
金色颗粒质地的平面
城市园林平面布局航拍
你可能喜欢
相关收藏夹
大家都在看
登录注册