FigmaでGIFを作成する！

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay21の記事です！
昨日は「【Unity】Androidでもできるオクルージョン実装ライブラリをまとめてみた！」についての記事でした。

【Unity】Androidでもできるオクルージョン実装ライブラリをまとめてみた！

今日は「FigmaでGIFを作成する！」という記事を書いていこうと思います。

GIFを作成できるプラグインの紹介

Figmaには現在、GIF関連のプラグインが合計で16個あります！
GIFをFigma上で作成から書き出しができる「GiffyCanvas」やアニメーションを作成してmp4やwebmなどで書き出し可能な「Motion」など、作成に特化したものがいくつもあります。
今回はサイトやアプリ制作の際に取り入れたくなる、ちょこっとしたGIFを作成したい時に便利な「GiffyCanvas」をメインにご紹介したいと思います！

実際に作成してみよう！

今回は筆者お気に入りのベーグリーのキャラクター（おいち）にGIFアニメーションをつけて、プロトタイプに組み込んでいきたいと思います。
さっそく作成していきましょう！

1.Frameを用意しよう！

Frameをひとつ用意します。
こちらがGIFの最初のフレームになります。

2.Frameを増やしていき、動きを調整しよう！

先ほど用意したFrameを元にどんどんFrameを増やしていきます！
今回はキャラクターがジャンプしているような動きにしたかったので、Figmaのガイド線を基準にして少しずつ動かしていきました。
この時、プロパティパネルのY軸や回転を少しずつ変更していくイメージでやると目視で調整するより楽にできます！

また、口元もすこし動かして開けている動きにします。
かわいいですね！

調整すること数分、全部で10フレームのアニメーションになりました。
ただ、今のままだと実際にどんな動きになっているのか想像しづらいので、GiffyCanvasを立ち上げて実際のプレビューを見ていきましょう！

3.プレビューを見つつ仕上げをしていこう！

すべてのframeを選択した状態でプラグインを立ち上げましょう。
この時にframeの数字が順番通りに整列されているかチェックです！

プラグインを選択するとこのような画面がでてくるので、左のプレビュー画面を見つつ速度などを調整していきます。
今回はInterval (ms)250にし、背景を透過させたかったので、Transparent Backgroundにチェックを入れました。
また、今回はしていないのですが、Patternで少しレトロチックなエフェクトをかけることもできます。

好みの動きに調整できたら書き出しをしてGIF作成は終了です！
完成がこちら！ジャンプしてますね！

実際にデザインに取り入れたらどう見えるのか、FigmaにGIFを組み込んでプロトタイプでも見てみました！少し動きを入れるだけでも凝った雰囲気のデザインにできるので、Figmaで簡単にGIFがつくれるのは嬉しいです

まとめ

今回は「GiffyCanvas」をメインにご紹介しました！
とても簡単に作成することができるので、「ローディング画面にちょっとしたGIFを取り入れたい！」「スプラッシュスクリーンに簡易的な動きをつけたい！」そんな時におすすめなので是非お試しください。