本文章只会介绍 Figma 的一些皮毛，想要更深入了解 Figma 可以去这里看看中文文档。

何为 Figma ？

『 Figma 这是世界上第一个可以协作的设计工具，你可以在 Figma 中设计并且制作原型，更快地将想法转化为产品』。因为不久之前需要做一个 UI 动画分享给朋友，当时第一时间想到的是 AE 跟 Blender ，但是 AE 又不太会用，用 Blender 做了一个下午之后觉得太麻烦了而且想要一点互动性就找到了 Figma。从零开始到做完动画只用了两三个小时，帮我省下了一大把时间去打游戏。下面会用一点点文字加上动图来带你做一个简单的 UI 交互动画。

开始

首先在这里注册一个账号，然后在这里下载适合自己系统的客户端，最后登陆一下第一步就完成了

界面

Figma 的界面跟大部分设计工具差不多，由工具栏、图层面板、画布、属性面板组成。

工具栏

工具栏由菜单（Main menu），移动工具与缩放工具（Move 与 Scale），区域工具（Region tools），形状工具（Shape Tools），绘图工具（Drawing Tools），文字工具（Text），移动工具（Hand Tool），添加/显示评论（Add/Show Comments），创建组件（Create Component），图像掩膜（Use as Mask），布朗运算（Boolean Groups），分享（Share），展示（Present），视图（Zoom/View Options）组成。

工具名	用途
移动工具与缩放工具	顾名思义就是用来移动（Move）和缩放（Scale）元素的
区域工具	可以创建一个类似画板的东西
形状工具	用来创建基本的元件：矩形（Rectangles），线条（Line），箭头（Arrow），椭圆（Ellipse），多边形（Polygon），星形（Star），用图片填充（Place image）
绘图工具	创建折线跟平滑曲线的钢笔（Pen）和手描的铅笔（Pencil）
文字工具	写字的
移动工具	移动画布
添加/显示评论	就是添加和显示评论
创建组件	把元素转换为可复用的元素
图像掩膜	可以看到元素的骨架，相当于透视
布朗运算	用来布朗运算
分享	分享给别人
展示	查看最终的效果
视图	调整视图

图层面板

工具栏由图层面板（Layers Panel），资源面板（Assets Panel），页面列表（Pages List）组成。这里仅用到图层面板。

属性面板

工具栏由设计（Design），原型（Prototype），监测（Inspect）组成。

属性面板	用途
设计 - 效果	由内阴影（Inner shadow），阴影（Drop shadow），模糊（Layer blur）,背景模糊（Background blur）组成。其中的背景模糊用到了 CSS 的 backdrop-filter ，可以用来实现毛玻璃效果
原型	这里主要是用来首先 UI 交互和动画，稍后会详细介绍
监测	这里有元素的详细数据，也有元素在 CSS，ios，Android 下的实现方式

尝试构建一个 UI

在 Figma 里，构建 UI 非常简单，甚至不需要用到编程的知识，有手就行。下面以我博客 UI 为参考来尝试构建一个简单的 UI。

画一个文章头图

利用区域工具（Region tools）下的框架（Frame）创建一个框架，这里以我熟悉的 iPhone 8 Plus 来演示。然后在形状工具（Shape Tools）下用矩形（Rectangles）来创建一个元素并且改变他的颜色大小等参数。

来一点修饰

再次利用矩形（Rectangles）来给刚刚创建的文章头图添加上文章发表时间，文章字数等修饰。

请忽略 GIF 压缩后的色彩丢失

再来多一点文章吧

全选刚才创建的元素，用 Ctrl + G 把他们合并成一个组（Group），在左边的图层面板里重命名为『文章框架』，这样就可以整体进行操作了。再复制一个文章框架并且放到合适的地方。

给博客来个背景

在形状工具（Shape Tools）下选择用图片填充（Place image），选好图片后点击想要添加背景的元素，这里就是点击框架的空白处，再调整一下图片的样子。因为当前图片位于框架的最顶层所以把其他元素都覆盖了，只需要在左边图层面板把图片移到框架最底层即可。

注意

调整图层面板这里不要把图片移到框架外面去了

很简单对吧？现在我们来给 UI 增加一点互动性吧

我们现在有一个抽屉菜单栏，想要当按下左上角菜单图标的时候 从左到右 弹出并且 背景变暗 ，这时候就需要用到属性面板的原型（Prototype）。

首先在左边的图层面选择要添加互动的菜单图标，可以看到在右边属性面板的原型选项卡内有个交互（Interactions）的功能，点击交互功能右边的加号即可为元素添加交互动画。

这里简单介绍一下 Figma 的触发器与动作：

触发器

触发器	作用
On tap	单击事件，相当于 `HTML` 的 `onclick` 事件。单击一下即可触发互动
On drag	拖动事件，相当于 `HTML` 的 `ondrag` 事件。拖动元素即可触发互动
While hovering	悬浮事件，相当于 `CSS` 的 `:hover` 选择器。鼠标移动到元素上方即可触发互动，当鼠标移出元素时取消触发
While pressing	按压事件，相当于 `HTML` 的 `onmousedown` 选择器。鼠标按下即可触发互动，当鼠标抬起时取消触发
Key/gamepad	键盘输入事件，相当于 `HTML` 的 `onkeydown` 选择器。按下键盘上相应的按键即可触发互动
Mouse enter	鼠标移入事件，相当于 `HTML` 的 `onmouseover` 选择器。鼠标移动到元素上方即可触发互动，当鼠标移出元素时不会取消触发
Mouse leave	鼠标移出事件，相当于 `HTML` 的 `onmouseout` 选择器。鼠标移出元素即可触发互动
Touch down	鼠标按下或者手指触摸元素触发互动
Touch up	放开鼠标或者手指不触摸元素触发互动

动作

动作	作用
None	触发后没有动作
Navigate to	触发后从一个框架切换到另一个框架
Open overlay	触发后从一个框架上叠加另外一个框架
Scroll to	触发后从滚动到框架的指定位置
Swap overlay	触发后从另一个框架会替换这个框架
Back	触发后回到进入当前框架之前的框架
Close overlay	触发后关闭叠加层
Open link	触发后打开链接

了解了上面的这些就可以很容易得到用 On tap 触发器触发 Open overlay 动作的效果就是我们想要的。在下面叠加层（Overlay）里勾选点击其他地方关闭（Close when clicking outside）和添加背景覆盖（Add background behide overlay），最后在动画（Animation）里选择移入（Move in）动画，方向是从左到右，过渡效果选择 Ease in and out 就可以得到我们想要的互动了。

如果想滚动呢？

博客叠加层包含很多信息导致里面的内容都溢出框架了，那么可不可以给叠加层一个垂直的滚动互动来展示更多信息呢？很简单，只要在图层面板选定框架，然后在属性面板的原型里面把溢出行为（Overflow behavior）设置成垂直滚动（Vertical scrolling）就好了。

废话

至此，一个简单的交互动画就完成了，再用上面的方法添加一点新的互动，优化一下效果就可以得到好看的效果了，下面是最终的演示还有相关资源：

分享卡片加载中

用 Figma 创建一个简单的交互动画