图形工具解析-静电的Figma完全学习日记-Day.03

2019-12-19 19:09:28 浏览数 (1)

静电说:啊,Figma的文章已经连载到Day03了,我会坚持给大家分享。不过在这期间很多的人还是不能接受这种方式的,甚至在留言的时候言辞很激烈。还有人问我,设计的核心是软件吗?我的回答:不是。但我得找个好用不卡的工具作图啊亲亲。新事物的发展总不是一帆风顺的,大家的接受程度也是随着趋势在往前发展的。谁也不能预测它的命运,在这里只分享给需要的朋友就好。

另外,如果你已经打算学习Figma,请刨除成见,用开放的心态面对各种不适应和Figma中的问题。这也是我们在面对新事物的时候需要保持的一个良好心态。否则,你脑中固有的“旧势力”会打败你想学习的心。

上次的学习,我们搞定了Figma中的Frame,见识了灵活的,万物皆可Frame的Figma模式。这节课咱们来继续Figma的工具学习-图形工具。

课程总目录(更新中)

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

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

.......(连载中)

Day.03-学习目录

03-1.图形工具及属性调整

03-2.图片置入工具

03-3.钢笔工具(路径编辑工具)

03-4.静电的Q&A时间

03-1.图形工具一览

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

在Fgima的下拉工具栏中,我们可以找到图形工具的身影。图形工具分为:矩形,线条,箭头,圆形,多边形,星型,以及图片置入。

对于这些基础图形而言,相信大家绘制出来都不成问题,不按Shift可以绘制不规则的形状,按住Shift则绘制规则的正方形,正圆等等。建议大家记一下这些图形的英文名称,就可以很容易的记住快捷键啦。

接下来我们来看看每种图形的属性检查器都有哪些内容。其实对于每种图形来说,属性检查器的内容大同小异。

01位置-图形坐标,宽高,旋转角度,以及圆角。需要注意一点,点击下图按钮,可以分别设定每一个角的圆角数值,这样很方便有木有?

02位置-图层叠加选项,几乎所有的图形处理工具都有,咱们就不过多的叙述了,另外,在图层叠加选项中,可以调整图层透明度。

03位置-填充选项,与Sketch一样,我们可以对一个图层赋予多种填充,并赋予透明度等。只需点击Fill旁边的加号即可添加填充。

04位置-描边选项,同样可以添加多个描边。请注意描边选项中的三种描边位置,分别是内描边,居中描边与外描边。需要注意的是,当你选择outside或者center描边,那么这个图形的实际尺寸比属性检查器中的要大哦,毕竟描边也要算上的。

05位置-效果选项中分别为Inner Shadow,Drop Shadow,Layer Blur和Background Blur

它们的效果分别如下图所示,基本与Sketch一致。请注意,背景模糊必须保证图层填充颜色为半透明才可以。

另外,我非常喜欢Figma的这个小功能,看图吧,调节圆角非常方便。圆角也可以分别控制。

03-2.图片置入工具

这个功能很简单,Figma可以置入现在主流的图片格式。下图就是静电为大家测试好的兼容图片格式列表哦。其中AI,PSD,EPS,TIF,PDF可以通过复制黏贴的方式导入,直接通过图片置入工具是无法导入的哦。至于Sketch,这可是Figma的强项,通过导入到Figma选项导入即可。

最让人感到意外的是(其实也不意外),Figma居然支持Gif动画图片导入,所以导入后,制作出的原型图就很有意思了,加个小loading动画,好玩的交互动画,都可以通过gif来搞定,想想都小激动呢!请注意,gif动画可以通过置入工具来置入,不要直接复制粘贴,否则是不会动的哦。

下图是导入gif预览后的样子。

03-3.钢笔(路径编辑工具)

基础图形绘制完成后,我们就要对图形进行更细节的编辑处理,因为基础图形并不能满足我们日常工作的需求。与Sketch一样,钢笔工具这个时候就可以派上用场了。双击一个矢量图形,就可以进入路径编辑模式,我们可以编辑其中的节点。

当然,我们如果需要创建一个自定义图形,也可以直接使用钢笔工具进行绘制。

Figma的钢笔使用工具与其它绘图工具大同小异,我们只需要点击,然后拖动,然后调整贝塞尔曲线,即可完成一条曲线的创建。

这里需要重点关注的是节点的调整选项。我们知道,在Sketch中,一共有四种节点曲线调整模式,而在Figma中,它被简化为3种,选中某个节点,我们就可以在右侧属性检查器看到“No Mirror”,“Mirror Angle(角度镜像)”和“Mirror Angle and Length”(角度和长度完全对称)的选项。

No Mirror

可以随意调整角度及贝塞尔曲线的角度。

Mirror Angle

角度对称,也就是贝塞尔曲线的所有节点都在一条线上,但是距离中心点的距离可以不对称。

Mirror Angle and Length

角度对称,贝塞尔曲线的所有节点也在一条直线上,距离中心点的长度也保持两端一样。

Bend Tool

钢笔编辑模式下的Bend tool工具是比箭头工具更灵活的路径调整工具。

在Bend tool模式下,鼠标操作出现了一个类似于路径提示的图标,有弯曲状态,直线状态等不同状态,随着鼠标在不同位置而发生变化。操作示意如图:

Paint Bucket(油漆桶工具)

Figma的交互设计比较有趣的一点,就是特定的工具,只有在激活的时候才会出现,非激活状态,或者不可用状态是完全隐藏的。这点静电我非常喜欢。油漆桶工具可以填充或者去除图形中的颜色。看演示:

下次课程,咱们一起来学习,布尔运算工具。

03-4.静电的Q&A时间

Q:Figma可以插入视频文件吗?如MP4?

A:不能

Q:没有什么抛弃了不抛弃的,成年人的世界做选择还是非黑即白的么?在合适的场景里用合适的软件,就可以了,新东西新工具要学么?要!老东西老工具要抛弃么?看情况而定。做决定别太决断,都是成年人,该长大了

A:????(黑人问号)...你说的很对我无力反驳。

Q:设计的核心是软件吗?

A:不是。但我知道我得找个好用不卡的软件,这是设计软件的核心。

Q:按A也可以创建Frame

A:学到了,谢谢!

Q:Figma打开文件时进度条加载不快

A:是的,第一是网速原因,第二,这个需要Figma优化加载体验。

0 人点赞