necco Note
田口 冬菜
necco Note
画像がパラパラ変わるGIFアニメーションをFigmaで作る方法
- Web Design
画像が次々にいれ変わるGIFアニメーション。
これまでPhotoshopを使って作成していましたが、デザインをFigmaですることが多いため、「デザインからGIF作成までFigmaで完結できればいいのに」と思ってました。
そこでプラグインを調べてみたところ、GIFアニメーションが作成できるものを発見。しかも使ってみたら直感的に操作でき、大きな劣化もなさそう！🙌
ということで、この記事ではFigmaを使った「画像がパラパラ変わるGIFアニメーションの作り方」をご紹介します。
使用プラグイン「GiffyCanvas」
使用するプラグインは「GiffyCanvas」です。
Figmaのコミュニティからインストール、もしくはデザインファイル内の［リソースツール＞プラグイン］から利用できます。無料です。
FigmaでのGIFアニメーション作成方法
GIFアニメーションの作成方法です。3ステップで素材さえあればすぐにできちゃいます。
- 素材の用意
- 素材をすべて選択しプラグインを起動
- GiffyCanvasでアニメーションの設定
操作手順はこのあと詳しく説明しますが、動画でも見れるようにしました。サクッと確認したい方は参考にしてください。🙏
1. 素材の用意
まずはアニメーションの素材となるデザインを用意します。Figmaでデザインしたものでも、画像でもOKです。最低2つ以上のフレームを用意しましょう。
ここでは動きの順番を把握しやすくするため、すべての素材をよこ一列にならべています。
2. 素材をすべて選択してGiffyCanvasを開く
素材をすべて選択し、［リソース（I）］ツールから［プラグイン］のタブを開きます。
「giffycanvas」を検索し、マウスを重ねると表示される［実行］をクリック。GiffyCanvasの設定画面が表示されます。
3. アニメーションの設定
GiffyCanvasではプレビューを見ながらアニメーションの設定ができます。
速度やループ回数、背景色、サイズの変更、順序の指定なども可能で、設定の変更後に［Apply］ボタンを押すことでプレビューを最新版に更新できます。
今回はすべて同じスピードで画像を切り替えたかったので、右上の［Interval］からまとめて数値を変更。プレビューを見ながら、ちょうどいい速さを探ります。
さらに背景色を透明にする［Transparent Background］にチェックをいれました。
アニメーションの設定はこれで完了です。とてもかんたん！🙌
右下の［Download］ボタンをクリックし、保存先を選びます。書き出し後のファイルの大きさが表示されるのもうれしいポイント。
画像がパラパラかわるGIFアニメーションが完成しました！
おまけ
あまりにもかんたんにGIFアニメーションが作れてしまったので、うれしくなってSlackのカスタム絵文字も作ってみました。（デザイナーのこゆきちゃんがフラフープをしています）
以上、画像がパラパラ変わるGIFアニメーションの作り方でした。かんたんにFigmaでGIFアニメーションが作れるので、よければ試してみてください！🙌
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年1月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に共著『これからはじめるFigma Web・UIデザイン入門』（マイナビ出版、2022）がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。
