こんにちは。御園です。
今回は勉強中のfigmaを使用して簡単なGIFアニメーションを作成したいと思います。
Figmaとは、ブラウザ上で簡単にデザインができるツールです。
フリープランがあり、無料で利用できるので、手軽に導入することが可能です。
また、URLを伝えるだけでデザインを他の人に共有・共同編集ができるのでとても便利です。
プラグインも沢山あり、最近では「STUDIO」と連携し、FigmaからコピペでWebサイトを完成させることも可能になりました。
日々進化に感動しますね。。
Figmaには現在、GIF関連のプラグインが16個ほどあるそうです。
本当に沢山ありますよね。
今回は、HPやブログ、SNSの更新にちょっと動きのある画像がほしい時に便利な簡単にGIFアニメーションが作成できるツール「GiffyCanvas」をご紹介したいと思います。
画像は、GiffyCanvasコミュニティページより引用
Figmaのコミュニティからインストール、もしくはデザインファイル内の［リソースツール＞プラグイン］から利用することができます。
今回はブログのアイキャッチを作成しました。
GiffyCanvasではプレビューを見ながらアニメーションの設定をすることができます。
速度、ループ回数、背景色、サイズなどを設定することが可能です。
設定後に［Apply］ボタンを押すと、プレビューを最新版に更新します。
後は、右下の［Download］ボタンをクリックし、保存。以上です。
一瞬でできてしまいますね。。
figmaでは、便利なプラグインが沢山あります。
今回の作成にあたり「GiffyCanvas」の他に以下のプラグインを使用しました。
・blush
素材をダウンロードできるプラグイン
・Blobs
くにゃっとしたシェイプが作成できるプラグイン
・Better Font Picker
英語フォントプレビューしてくれるプラグイン
figmaはブラウザ上で様々なことができるとてもおすすめなデザインツールです。
これからも便利なツールはどんどん出てくるかと思いますが、私も常にアンテナを張って進化を楽しみつつ勉強し続けたいと思います。
