logo
Figmotion
Figma 动效义肢

Figmotion - Figma 动效义肢

在过去,制作动效原型的工作流需要两个及以上的的工具协作:绘制原型,导入 Principle / Flinto / AE 中制作动效,最后编写动效设计说明或是使用 bodymovin 交付。 在 Figma 平台里,Figmotion 插件可以完成一站式的动效设计,输出格式包括:Figma 内部预览、渲染为 gif/mp4/webM 格式、导出 CSS/JSON 代码格式。目前开发版本为0.1.14,不支持编组。


调用插件

通过菜单栏调用插件或右键直接调用Figmotion 插件。

设置关键帧

插件的工作范围基于框架(Frame,类似于 Sketch 的画板),因此第一步需要选择一个 Frame 作为工作区。

Figmotion 的整体工作逻辑类似 Aftereffects,即在时间序列中插入关键帧,并定义速度曲线,形成动态效果。每个图层都有一系列属性可以调整,如位置、尺寸、角度、透明度等。

设置缓动曲线

在 Figmotion 中支持4种预设和自定义曲线,分别为 加速曲线 easeIn、减速曲线 easeOut、标准曲线 easeInOut、线性 linear 。在自定义曲线中,X轴为时间,Y轴为效果进度。

标准缓动曲线

减速缓出曲线

加速缓进曲线

预览与导出

设置完成后,可以点击播放按钮在 Figma 内预览。点击 Render 渲染按钮,渲染完成后通过 view last render 在浏览器中查看并下载到本地。你也可以使用 Export 直接导出 CSS 和 JSON 文件。