- Mizushima
- 2024.05.09
はじめに
前回は、Figmaの楕円ツールを活用して円グラフを作る方法を紹介しました。
今回はステップアップとして、作成したグラフにアニメーションをつける方法を解説します。
円グラフにアニメーションをつけるにはやや複雑な手順が必要なので、まずは棒グラフを用いてアニメーションの理解度を高めていきましょう。
スマートアニメートとは
今回はFigmaのプロトタイプ機能にある、Smart Animate(スマートアニメート)でアニメーションを設定していきます。
スマートアニメートとは、フレーム間で同名の要素がある場合、変化前と変化後の要素の差分を埋め合わせてアニメーションをつける機能です。
適用される変更は、以下の5点です。
・拡大縮小
・位置
・不透明度
・回転
・塗り
棒グラフにアニメーションをつける手順
今回の棒グラフで使用する変更は、「拡大縮小」と「塗り」です。
Step1 変化前のグラフを用意
変化前と変化後の棒グラフを用意していきましょう。
まずは長方形ツールを使い、変化前のグラフを作成します。
Step2 変化後のグラフを用意
次に変化後のグラフを作成します。
今回は左揃えにしたいので、長方形の左端の位置を動かさないようにグラフを調整します。
色もあわせて変えておきましょう。
またレイヤーとグループが同名でないとアニメーションをつけることができないので、変化前と名称が同じになるようにします。
Step3 コンポーネントセットを作成
変化前と変化後の要素をコンポーネント化していきます。
両方のグループを選択し、「コンポーネントセットを作成」を選択します。
Step4 インタラクションを追加
プロトタイプ機能に変更し、インタラクションを追加します。
今回設定したものは以下の通りです。理想のアニメーションにあわせて調整してみてください。
トリガー:While hovering(マウスオーバー)
アクション:Change to(次に変更)
アニメーション:Smart Animate(スマートアニメート)
Step5 動作を確認&完成!
コンポーネントの設定ができたらフレームに配置し、動作を確認してみましょう。
ホバー時にきちんとアニメーションがついているので完成です。
まとめ
いかがでしたか?
アニメーションをつけることで、視覚的な魅力を高めることができますね。
次回は今回の手順を応用して、円グラフのアニメーションも作っていきましょう。お楽しみに!