课程总目录(更新中)
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优化加载体验。
静电还建了个Figma学习微信群
有兴趣的小伙伴请加静电老师的微信
然后回复关键字“figma”
我会拉大家进群哈。
联系客服