第三章着重介绍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优化加载体验。
Powered by Froala Editor
微信公号: jingdesign91,欢迎关注.
44
作品
6763
粉丝
13
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册