「スマートアニメート（Smart Animate）」を活用すると、簡単にプロトタイプ内で滑らかなアニメーションを作成できます。本記事ではFigmaでアニメーションを作る方法を詳しく解説し、初心者でも理解しやすいように具体的な手順を紹介します。
Figmaのアニメーション機能とは？
Figmaのアニメーションは主にプロトタイピング機能を通じて実現されます。特に以下のようなアニメーションを作成できます。
- ページ遷移アニメーション
- 画面Aから画面Bへのスムーズな遷移
- コンポーネントのアニメーション
- ボタンのホバーエフェクトやモーダルの出現
- スマートアニメート
- 要素の移動やサイズ変更を自然に補完
このような機能を活用することでより直感的なデザインを実現できます。
基本的なアニメーションの作り方
アートボードを作成する
Figmaを開く
新しいフレームを作成（Fキーを押してアートボードを作成）
2つの異なる状態を作る（例：1つ目のフレームではボタンが小さく、2つ目のフレームでは大きくする等）
キャプチャは上から「デフォルト→ホバー→クリック」で配置しています。
プロトタイピングモードに切り替える
右上の「プロトタイプ」タブをクリック
オブジェクトを選択し、リンクを作成
1つ目のフレームから2つ目のフレームへ矢印を引く
アニメーションの種類を設定
Smart Animate を選択
Ease In & Out や Linear などのイージングを設定
アニメーションをプレビューする
画面右上の 再生ボタン をクリック
作成したアニメーションを確認
これで基本的なアニメーションが作成できました。
スマートアニメートを活用した高度なアニメーション
オブジェクトの移動アニメーション
同じオブジェクトを2つのフレームで配置
位置やサイズを変更
Smart Animateを適用
スムーズな変化を実現
例えば、スライドメニューやモーダルウィンドウの表示などに活用できます。
フェードイン・フェードアウトの実装
1つ目のフレームでは透明度を0%に
2つ目のフレームでは透明度を100%に
Smart Animateで補完
この方法で要素が自然にフェードイン・フェードアウトするエフェクトを作れます。
インタラクティブなアニメーションの作成
ホバーアニメーションの作り方
ボタンを作成
通常時とホバー時の2つのコンポーネントを作成
「Variant（バリアント）」を使用
「Prototype」タブでホバー時の動作を設定
ホバー時に変化するアニメーションをプレビュー
クリックアニメーションの作り方
ボタンを作成し、通常時とクリック時のバリアントを用意
クリック時にSmart Animateを適用
「On Click」トリガーを設定
ボタンをクリックしたときにアニメーションを実行
これにより、ボタンのエフェクトや動的なUIを実装できます。
よりスムーズなアニメーションを作るためのポイント
適切なイージングを設定する
Ease In & Out を使用すると自然な動きになる
Linear は一定速度で変化
Ease Out は最初が速く、最後が遅くなる
アニメーションの速度を調整する
速すぎると不自然に感じる
300ms～500msが適度
余白やレイヤー構造を整える
移動アニメーションでは初期位置と終点位置を統一
フェードインでは透明度の変更だけでなく、わずかにサイズを変えるとリアルに
Figmaアニメーションの応用例
ローディングアニメーション
円形のオブジェクトを回転させる
Loop を適用し無限ループ
スクロールアニメーション
Scroll To トリガーを設定
スクロール時に特定の要素がアニメーション
モバイルアプリのUIアニメーション
スワイプジェスチャーに合わせて画面遷移
Drag トリガーを活用
まとめ
Figmaのアニメーション機能を活用すると、デザインの質を向上させより直感的なUIを作成できます。
基本的な遷移から高度なインタラクティブアニメーションまで幅広い表現が可能です。
Figmaのアニメーション作成のポイント
- 基本的なプロトタイプの作成方法を理解する
- スマートアニメートを活用してスムーズな遷移を実現
- ホバーやクリックアニメーションを導入
- 最適なイージングと速度設定を行う
- 応用例を試し、実践的なスキルを身につける
これらを意識して、Figmaを使ったアニメーション制作に挑戦してみましょう！
他にもクリエイターの収入アップ方法も紹介しているので、自分の給与に違和感がある方は覗いていってみてください。
