Figmaでアニメーションを作成する方法

本記事では、Figmaでアニメーションを作成する方法について解説します。

Figmaのアニメーション機能に関する基礎知識

Figmaでアニメーションを作成する方法を説明する前に、Figmaのアニメーション機能に関する基礎知識を確認しておきましょう。

Figmaでアニメーションを作成する方法

Figmaでアニメーションを作成するには以下のような方法があります。

1.ディソルブを使う

Figmaに搭載されているレイヤーの透明度を変化させてアニメーションを作成する機能です。

2.移動アニメーションを使う

Figmaに搭載されているレイヤーの位置やサイズなどの属性を変化させてアニメーションを作成する機能です。

3. スマートアニメートを使う

Figmaに標準搭載されるようになった要素の差分を自動で埋め合わせることでアニメーションが作成できます。

4. プラグインを使う

スマートアニメート機能が搭載される前は、Figmaでアニメーションを作成する場合、アニメーション作成用のプラグインがよく用いられていました。使い勝手のよいものも多いので、現在もプラグインを用いるWeb作関連職の方もいます。

画面上部にあるツールバーにあるリソースのアイコンをクリックしプラグインから 「animation」と検索(もしくはFigma Community animation」と検索することで、アニメーション作成関連のプラグインを探すことができます。代表的なプラグインには「Motion」や「Try it out」などがあります。

5.外部ツールで作成したアニメーションを読み込む

Figmaでは外部ツールで作成したアニメーションの読み込みができます。GIFアニメーションなどを素材として読み込めばより簡単にアニメーションによる表現が可能になります。

最近は、Airbnb社が開発したベクター画像のアニメーションを作成できる 「Lottie」 というファイルフォーマットを使って、軽量なアニメーションデータを使う手法などが注目されています。

 

Figmaで作成したアニメーションを実装する方法

Figma作成したアニメーションを実際のWebサイトやアプリに実装するには、コードによって実装する方法とライブラリやブラグインによる実装する方法があります。

 

Webデザイナーの中にもアニメーションを実装するスキルを持った方はいますが、全に実装作業は。プログラマー・エンジニアの領域になります。

 

インタラクションの基本知識

Webデザインでアニメーションを導入する場合、UI/UXデザインの基礎知識も必要になります。特に重要なのが「インタラクション」というデザインコンセプトです。

 

インタラクションとは

ユーザーがWebサイトやアプリに対して行ったアクション (クリックやマウスオーバーなどの操作など)に対し、システムがそれに応じたリアクション (ページの遷移やアニメーション動作など) を返すことをインタラクションと呼びます。

マイクロインタラクションとは

インタラクションの中でも、個別のユーザーに焦点を当てたアクションのやり取りを「マイクロインタラクション」と呼びます。

アニメーションを作成する上で用いられる用語には、このマイクロインタラクションの構造が基になっているものがあります。マイクロインタラクションの構造は、以下の表で説明されている4つの要素で成り立っていますので、覚えておきましょう。

 

Figmaのインタラクション設定方法

Figmaでアニメーションを作成する上で重要なのが、インタラクション設定方法です。

アニメーションを動作させるためには、ユーザーのアクション (行動)がトリガー(動作が起こるきっかけ)になります。このトリガーの設定方法は、各アニメーション機能で共通の方法で選択します。

以下にその手順を紹介します。

 

1. 「インタラクション」の+マークをクリック

アニメーションの要素となるオブジェクトを作成しオブジェクトやオブジェクトが配置されているフレームを選択した状態で、右サイドバーの「プロトタイプ」タブを選択したときに表示される「インタラクション」という項目にある+マークをクリックします。

 

2.インタラクションのトリガーを選択

+マークをクリックすると上の画像のようなインタラクションの詳細設定を行うパネルが表示されますので、右上にあるメニュー (デフォルトでは「クリック時」) をクリックします。

 

メニューをクリックするとインタラクションのトリガーを選択できます。トリガーの種類を以下の表で説明します。

 

3.インタラクションのリザルトを選択

トリガーの を選択したら、その下にインタラクションのリザルト (Webサイトやアプリといったシステム側の反応)を選択するメニューが表示されます。表示されたメニューの中から任意のリザルトを選択します。

リザルトの種類を以下の表にまとめます。

 

インタラクションを設定することで、アニメーション動作を動かす前提を作成できます。

インタラクションについてはプロトタイプを解説した以下の記事でも詳しく解説していますので、参照してみてください。

 

ディソルブの使い方

以下に、アニメーションを作成する機能の一つであるディソルブの使い方を説明します。

1.インタラクションのトリガーとリザルトを選択

アニメーションの要素となるオブジェクトを作成し選択した状態で、右サイドバーのプロトタイプタブで表示される「インタラクション」にある+マークをクリックします。パネルが表示されるのでインタラクションのトリガーとリザルトを設定します。

 

2.移動先を設定

ここでは、インタラクションのリザルトを設定の中から「次へ移動」を選択してみます。「次へ移動」を選択すると、その下に移動先を選択するメニューが表示されるので、任意の移動先を設定します。

 

3.ディソルブを選択

移動先の種類を選択すると、インタラクションのアニメーション機能を選択できるメニューが表示されるので、これをクリックし「ディソルブ」を選択します。

 

4.イーズニングや速度を設定

「ディソルプ」を選択したら、イーズニング(後述のスマートアニメートで詳しく解説)や動作の速度を設定します。

 

5.プレビューのアイコンをクリック

各項目の設定が完了したら、画面右上にあるプレビューのアイコンをクリックします。

 

上の動画が、ディソルブを使ったアニメーションになります。レイヤーの透明度が変化してアニメーションが作成されているのがわかると思います。

移動アニメーションの使い方

次に、アニメーションを作成する機能の一つである移動アニメーションの使い方を説明します。

1.インタラクション ・リザルト

アニメーションの要素となるオブジェクトを作成し選択した状態で、右サイドバーのプロトタイプタプで表示される「インタラクション」にある+マークをクリックします。パネルが表示されるのでインタラクションのトリガーとリザルトを設定します。

 

ここでは、インタラクションのリザルトを設定の中から「次へ移動」を選択してみます。「次へ移動」を選択すると、その下に移動先を選択するメニューが表示されるので、任意の移動先を設定します。

 

2.移動アニメーションの種類を選択

移動先の種類を選択すると、インタラクションのアニメーション機能を選択できるメニューが表示されるので、これをクリックし表示されるメニューの中から移動アニメーションに関する項目を選択します。

移動アニメーションの種類を以下の表にまとめましたので確認してください。

 

3.移動の方向やイーズニング・速度を設定してプレビュー

移動アニメーションの種類を選択したら、移動の方向やイーズニング(後述のスマートアニメートで詳しく解説)・動作の速度を設定します。

 

上の動画は、移動アニメーションの移動の方向を選択している様子です。移動アニメーションの種類が表示される欄の右隣に矢印がありますので、これをクリックして移動の方向を設定します。

各項目の設定が完了したら、画面右上にあるプレビューのアイコンをクリックします。

以下が各移動アニメーションのプレビューです。

 

① ムーブイン (Move in)

上の動画がムーブインのプレビューです。オブジェクトが画面内から外側に向かって移動しているのがわかると思います。

 

② ムーブアウト (Move out)

上の動画がムーブアウトのプレビューです。オブジェクトが画面外から内側に向かって移動しているのがわかると思います。

 

③ ブッシュ (Push)

上の動画がブッシュのプレビューです。オブジェクトが画面の外側から押し出されるように移動しているのがわかると思います。

 

④ スライドイン (Slide in)

上の動画がスライドインのプレビューです。オブジェクトが画面の端から内側に向かってスライドしているのがわかると思います。

 

⑤ スライドアウト (Slide out)

上の動画がスライドアウトのプレビューです。オブジェクトが画面の味から外側に向かってスライドしているのがわかると思います。

 

スマートアニメートの使い方(入門編): 基本的な操作

細かな設定方法は後ほど解説しますので、まずはスマートアニメートの基本知識とスマートアニメートを設定する基本的な手順を覚えてしまいましょう。

スマートアニメートとは

スマートアニメート (Smart Animate）とは、Figmaのプロトタイプに搭載されたアニメーションを作成する新機能です。この機能は、変化前と変化後の要素の差分を自動で埋め合わせることでアニメーションを作成できる機能です。

本記事では、このスマートアニメートを使ったアニメーション作成方法を詳しく解説します。

 

スマートアニメートの特徴

アニメーションを制作する場合、通常パラパラ漫画のように一つ一つコマを作成する必要があります。しかし、スマートアニメートは動きの開始の部分と、終了の部分を作成するだけで。アートポード の差分を自動的にアニメーションでつないでくれる機能なので、より簡単にアニメーションを制作できるのです。

 

1.同じサイズのフレームにアニメーションにしたいシェイプを作成

同じサイズのフレームを作成し、動かしたいシェイプを作成します。ここでは、正方形が上下に移動するアニメーションを作成してみます。

変化前と変化後の状態だけを作成するだけでアニメーションになるので、フレームの上に配置された正方形と、フレームの下に配置された正方形を作成しておきます。

 

2.インタラクションの詳細設定で「スマートアニメート」を選択

これまで説明した設定方法と同様に、インタラクションのトリガー・リザルト・移動先などインタラクションの詳細設定のステップまでめます。

 

移動先の欄の下に、インタラクションのアニメーション機能を選択する が表示されますので、この中にある「スマートアニメート」という項目を選択します。

 

3.プレビューする

ここでは上から下へ動くアニメーションだけでなく、下から上へ動くアニメーションも作成したいと思うので、最初に作成したのとは逆の展開になるように下に配置した正方形にもインタラクションを設定しておきましょう。

 

上の動画は、スマートアニメートで作成したアニメーションを再生している様子です。このように、2つの要素を作成するだけで簡単にアニメーションが作成できます。

ここまでが、スマートアニメートを設定する最もシンプルな手順です。

 

スマートアニメートの使い方 (基礎編)：品質を高める方法

次のステップとして、スマートアニメートの設定方法をより詳細に学んでいくことで、アニメーションの品質を高める方法を覚えていきましょう。

イージングの設定

イージングとは、アニメーションの速度に緩急の効果を付与することです。スマートアニメート機能では、イージングの種類を選択することで、さまざまな印象を与えるアニメーションを作成できます。

Figmaのスマートアニメートで設定できるイージングを、以下の表にまとめました。

 

実際の動作を確認してみましょう。

 

① リニア (Linear)

開始から終了まで一定 of 速度(等速)で変化するイーズニングです。最もシンプルな動作で、動きに急激な変化がないので、自然な動きを表現する、直線的に変化する印象を与えるといったことに適しています。

 

② イーズイン (Ease in)

動きの避初はゆっくりと、最後は速く変化するイーズニングです。変化率が徐々に大きくなっていく(加速)ので、動きにスピード感を与え、物体の重みを表現したり、安定感を与えるのに適しています。また、動きが始まる瞬間に注意を置く効果があります。

 

③イーズアウト (Ease out)

動きの最初は速く、最後はゆっくりと変化するイーズニングです。変化 が徐々に大きくなっていく(減速)ので、動きにゆっくりとしたイメージを与え、動きに軽やかさや優さを与えるのに適しています。また、動きが終わる瞬間に余齢を残す効果があります。

 

④ イーズイン/イーズアウト (Ease in and out)

動きの最初と最後でイーズインとイーズアウトを組み合わせたイーズニングです。動きに起伏を与え、動きに変化やリズムを与える効果があります。

 

⑤ イーズインバック (Ease in back)

動きの最初で進行方向とは逆にバックする動きが入る動作です。動きに勢いや躍動感を与え、動きが始まる 開に注意を悪く効果があります。

 

⑥ イーズアウトバック (Ease out back)

動きの最後で進行方向の終止点を一度越して反動で戻るような動作です。動きにブレーキ感を与え、動きが終わる間に注意を惹く効果があります。

 

⑦ イーズインバック/イーズアウトバック (Ease in and out back)

動きの最初と後でイーズインバックとイーズアウトバックを組み合わせたイーズニングです。動きにゴムやバネのような動作感を与え、動きに変化やリズムを与える効果があります。

 

⑧ カスタムベジェ (Custom-Bézier)

上の画像のようにカスタムペジエを選択すると、ベジェ曲線を使用してアニメーションの動き方を指定できます。

上の動画が、カスタムペジエでカスタマイズしたアニメーション動作です。

 

スマートアニメートの速度設定

スマートアニメートの動作の速度は、イージングやスプリングのプリセットを設定する の にある数値の入力欄で設定できます。

さ単位はms (millisecond: ミリセカンド)です。速い速度と遅い速度の動作の違いを比較してみましょう。

 

1.速さ200msの場合

上の動画は、速さ200msに設定したイーズイン/イースアウトの動作です。

 

2.速さ2000msの場合

上の動画は、速さ2000ms 設定したイーズイン/イースアウトの動作です。

 

スプリング動作のプリセットによるスマートアニメートの設定

スマートアニメートでは、イーズニングの他に、スプリング動作のプリセットメニューが搭載されています。

スプリング動作のプリセットの種類は以下の表を確認してください。

 

実際の動作を確認してみましょう。

 

① なめらか (Gentle)

なめらかなスプリング動作のプリセットです。なめらかに弾む動作しているのがわかると思います。

 

② 違い (Quick)

速いスプリング動作のプリセットです。素早く弾む動作しているのがわかると思います。

 

③ バウンス (Bouncy)

パウンス(跳ねる)するスプリング動作のプリセットです。戻る時に跳ねる動作しているのがわかると思います。

 

④ 遅い (Slow)

遅いスプリング動作のプリセットです。ゆっくりと弾む動作しているのがわかると思います。

 

⑤ カスタムスプリング (Custom)

上の画像のようにカスタムスプリングを選択すると、カープ曲線の動きやスプリングの弾性係数を表す値である「性」、アニメーションの減率を表す値である「減 」、スプリングの質量を表す値である「質」といったを設定することで、スプリング動作を好きなようにカスタマイズできます。

カープ曲線でアニメーションの動き方を指定できます。たとえば波線にすると動きが急激に変化します。

性の値を大きくすると、スプリングは元の状態に戻ろうとする力が強くなり、動きがより弾むようになります。

減衰の を大きくすると、アニメーションの終盤で動きが遅くなり、動きがより滑らかになります。

の値を大きくすると、スプリングは元の状態に戻ろうとする力が弱くなり、動きがより緩やかになります。

 

上の動画が、カスタムスプリングでカスタマイズしたアニメーション動作です。

まとめ

今回はFigmaでアニメーションを作成する方法の基本を紹介しましたが、ここで紹介した内容はほんの一部です。しかし、基礎の部分をしっかりと理解し使いこなせるようになると、より複雑なアニメーションも作成できるようになってきます。

アニメーションを使ったデザインは「ユーザーの操作を促す」「コンテンツの魅力を高める」「ブランドイメージを表現する」といったことに役立ちます。

また、アニメーションを作成する知識やスキルが身につくと、Web制作・アプリ制作におけるUI/UXデザインの表現に が広がり、デザイナーとして大きくステップアップできますので、本記事を参考にしっかりマスターしておきましょう！