田口 冬菜
田口 冬菜

necco note

画像がパラパラ変わるGIFアニメーションをFigmaで作る方法

  • Web Design

画像が次々にいれ変わるGIFアニメーション。

これまでPhotoshopを使って作成していましたが、デザインをFigmaですることが多いため、「デザインからGIF作成までFigmaで完結できればいいのに」と思ってました。

そこでプラグインを調べてみたところ、GIFアニメーションが作成できるものを発見。しかも使ってみたら直感的に操作でき、大きな劣化もなさそう!🙌

ということで、この記事ではFigmaを使った「画像がパラパラ変わるGIFアニメーションの作り方」をご紹介します。

フィトくんの豆知識サムネイルのGIFアニメーション

使用プラグイン「GiffyCanvas」

使用するプラグインは「GiffyCanvas」です。

Figmaのコミュニティからインストール、もしくはデザインファイル内の[リソースツール>プラグイン]から利用できます。無料です。

GiffyCanvas

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

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

GIFアニメーションの作成方法です。3ステップで素材さえあればすぐにできちゃいます。

  1. 素材の用意
  2. 素材をすべて選択しプラグインを起動
  3. GiffyCanvasでアニメーションの設定

操作手順はこのあと詳しく説明しますが、動画でも見れるようにしました。サクッと確認したい方は参考にしてください。🙏

1. 素材の用意

まずはアニメーションの素材となるデザインを用意します。Figmaでデザインしたものでも、画像でもOKです。最低2つ以上のフレームを用意しましょう。

ここでは動きの順番を把握しやすくするため、すべての素材をよこ一列にならべています。

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

素材をすべて選択し、[リソース(I)]ツールから[プラグイン]のタブを開きます。

「giffycanvas」を検索し、マウスを重ねると表示される[実行]をクリック。GiffyCanvasの設定画面が表示されます。

3. アニメーションの設定

GiffyCanvasではプレビューを見ながらアニメーションの設定ができます。

速度やループ回数、背景色、サイズの変更、順序の指定なども可能で、設定の変更後に[Apply]ボタンを押すことでプレビューを最新版に更新できます。

今回はすべて同じスピードで画像を切り替えたかったので、右上の[Interval]からまとめて数値を変更。プレビューを見ながら、ちょうどいい速さを探ります。

さらに背景色を透明にする[Transparent Background]にチェックをいれました。

アニメーションの設定はこれで完了です。とてもかんたん!🙌

右下の[Download]ボタンをクリックし、保存先を選びます。書き出し後のファイルの大きさが表示されるのもうれしいポイント。

フィトくんの豆知識サムネイルのGIFアニメーション

画像がパラパラかわるGIFアニメーションが完成しました!

おまけ

あまりにもかんたんにGIFアニメーションが作れてしまったので、うれしくなってSlackのカスタム絵文字も作ってみました。(デザイナーのこゆきちゃんがフラフープをしています)

以上、画像がパラパラ変わるGIFアニメーションの作り方でした。かんたんにFigmaでGIFアニメーションが作れるので、よければ試してみてください!🙌

田口 冬菜

田口 冬菜

Fuyuna Taguchi

三重県伊勢市生まれ。理学療法士として三重県の二次救急病院でリハビリの仕事をしていたところ、趣味ではじめたデザインにハマりデザイナーへ転職。せっかく転職するならと勢いで上京、都内のデザイン会社へ就職。neccoには2020年6月から参画。好きなものはデザイン、本、カヌレ、ウイスキーコーヒー、お出かけ、インテリア、犬。じっとしていること、繰り返し作業が苦手。いまが一番たのしいを更新しつづけている。

SHARE

TwitterFacebook

Other Posts

necco note
実績 ACES 制作メンバーの写真

ACESのウェブサイトができるまで|情報設計・デザイン・モーション制作編