Figmaで使えるアニメーション透過GIFをつくる

FigmaでUIをつくる時に、アニメーションGIFをけっこう使います。
Smart Animation だけでは表現できない細かなインタラクションをモック上で再現するのにかなり重宝するのですが、透過のアニメーションGIFを作成するのがけっこう手間だったのでメモ。

ちなみに、Figmotion というすごい便利なプラグインがあるのですが、透過GIFで書き出すと、すべてのフレームをレンダリングしてしまうので、連続写真のようなアニメーションになってしまう。
透過したGIFを素直に繋げるとそうなるのですが、フレームは重ねたくない、というケースに遭遇しました。

Affter Effect があれば即解決なんですが、Adobe製品の契約をやめてしまったので、手元にあるツールで何とかしようという試み。

ScreenFlow

とりあえず、単色背景のアニメーションを作る。
これは何でも良いけども、普段から使っている ScreenFlow を使って簡単なアニメーションを作った。

残念ながら、ScreenFlow から直接透過GIFを書き出すことはできないが、普通のGIFの書き出しには対応している。
背景を抜きやすい色に設定しておいて、ひとまずファイルに書き出す。

そして OIE というサイトを使った。
https://www.online-image-editor.com/

https://ezgif.com/ など、他のサイトもあるんだけども、OIE は Fuzz Factor というオプションがあって、Figmaで使うアニメーションを書き出すには最適だった。

これで透過アニメーションが書き出せたので、あとは Figma の Fill に設定するだけ。
便利。