こんにちは。御園です。
今回は勉強中のfigmaを使用して簡単なGIFアニメーションを作成したいと思います。

figmaとは

Figmaとは、ブラウザ上で簡単にデザインができるツールです。
フリープランがあり、無料で利用できるので、手軽に導入することが可能です。
また、URLを伝えるだけでデザインを他の人に共有・共同編集ができるのでとても便利です。
プラグインも沢山あり、最近では「STUDIO」と連携し、FigmaからコピペでWebサイトを完成させることも可能になりました。
日々進化に感動しますね。。

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

Figmaには現在、GIF関連のプラグインが16個ほどあるそうです。
本当に沢山ありますよね。

今回は、HPやブログ、SNSの更新にちょっと動きのある画像がほしい時に便利な簡単にGIFアニメーションが作成できるツール「GiffyCanvas」をご紹介したいと思います。

GiffyCanvas

画像は、GiffyCanvasコミュニティページより引用

GIFアニメーション作成方法

1.「GiffyCanvas」をインストール

Figmaのコミュニティからインストール、もしくはデザインファイル内の［リソースツール＞プラグイン］から利用することができます。

2.素材を作成

今回はブログのアイキャッチを作成しました。

3. 素材をすべて選択してGiffyCanvasを開く

GiffyCanvasではプレビューを見ながらアニメーションの設定をすることができます。
速度、ループ回数、背景色、サイズなどを設定することが可能です。
設定後に［Apply］ボタンを押すと、プレビューを最新版に更新します。

後は、右下の［Download］ボタンをクリックし、保存。以上です。
一瞬でできてしまいますね。。

まとめ

figmaでは、便利なプラグインが沢山あります。
今回の作成にあたり「GiffyCanvas」の他に以下のプラグインを使用しました。

・blush
素材をダウンロードできるプラグイン
・Blobs
くにゃっとしたシェイプが作成できるプラグイン
・Better Font Picker
英語フォントプレビューしてくれるプラグイン

figmaはブラウザ上で様々なことができるとてもおすすめなデザインツールです。
これからも便利なツールはどんどん出てくるかと思いますが、私も常にアンテナを張って進化を楽しみつつ勉強し続けたいと思います。