Note

本文章只会介绍 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）组成。

图层面板

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

属性面板

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

尝试构建一个 UI

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

画一个文章头图

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

来一点修饰

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

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

再来多一点文章吧

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

给博客来个背景

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

Note

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

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

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

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

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

触发器

动作

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

如果想滚动呢？

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

废话

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