Figmaでグラフにアニメーションをつける方法をわかりやすく解説します【棒グラフ編】

はじめに

前回は、Figmaの楕円ツールを活用して円グラフを作る方法を紹介しました。

今回はステップアップとして、作成したグラフにアニメーションをつける方法を解説します。
円グラフにアニメーションをつけるにはやや複雑な手順が必要なので、まずは棒グラフを用いてアニメーションの理解度を高めていきましょう。

スマートアニメートとは

今回はFigmaのプロトタイプ機能にある、Smart Animate(スマートアニメート)でアニメーションを設定していきます。

スマートアニメートとは、フレーム間で同名の要素がある場合、変化前と変化後の要素の差分を埋め合わせてアニメーションをつける機能です。
適用される変更は、以下の5点です。

・拡大縮小
・位置
・不透明度
・回転
・塗り

棒グラフにアニメーションをつける手順

今回の棒グラフで使用する変更は、「拡大縮小」と「塗り」です。

Step1　変化前のグラフを用意

変化前と変化後の棒グラフを用意していきましょう。
まずは長方形ツールを使い、変化前のグラフを作成します。

Step2　変化後のグラフを用意

次に変化後のグラフを作成します。
今回は左揃えにしたいので、長方形の左端の位置を動かさないようにグラフを調整します。
色もあわせて変えておきましょう。
またレイヤーとグループが同名でないとアニメーションをつけることができないので、変化前と名称が同じになるようにします。

Step3　コンポーネントセットを作成

変化前と変化後の要素をコンポーネント化していきます。
両方のグループを選択し、「コンポーネントセットを作成」を選択します。

Step4　インタラクションを追加

プロトタイプ機能に変更し、インタラクションを追加します。
今回設定したものは以下の通りです。理想のアニメーションにあわせて調整してみてください。

トリガー：While hovering(マウスオーバー)
アクション：Change to(次に変更)
アニメーション：Smart Animate(スマートアニメート)

Step5　動作を確認＆完成！

コンポーネントの設定ができたらフレームに配置し、動作を確認してみましょう。
ホバー時にきちんとアニメーションがついているので完成です。

まとめ

いかがでしたか？
アニメーションをつけることで、視覚的な魅力を高めることができますね。

次回は今回の手順を応用して、円グラフのアニメーションも作っていきましょう。お楽しみに！