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

おはよー！

この記事では、Figmaを使ってアニメーションを作成する方法について詳しく説明します。

Figmaのアニメーション機能を活用することで、インタラクティブで視覚的に魅力的なデザインを作成することができます。

1. Figmaの概要

Figmaは、クラウドベースのデザインツールであり、UI/UXデザイナーにとって欠かせないツールとなっています。リアルタイムの共同作業が可能で、複数のデザイナーが同時に同じプロジェクトに取り組むことができます。Figmaの最大の利点の一つは、プロトタイプ作成機能です。プロトタイプを使ってデザインのインタラクティブな要素を視覚化し、実際の使用感を再現することができます。

2. プロトタイピングとアニメーション

Figmaでのアニメーションは主にプロトタイピング機能を通じて実現されます。Figmaのプロトタイピングモードでは、画面遷移やオーバーレイ、アニメーション効果などを設定することができます。以下に、基本的なアニメーションの作成手順を紹介します。

3. アニメーション作成のステップ
4. Smart Animateの活用
5. 高度なアニメーションテクニック
7. まとめ

3. アニメーション作成のステップ

ステップ1: フレームを作成する

まず、アニメーションを適用するフレームを作成します。Figmaでは、アートボードを「フレーム」と呼びます。新しいフレームを作成するには、ツールバーのフレームアイコンをクリックするか、キーボードショートカット「F」を使用します。

ステップ2: デザイン要素を追加する

フレーム内にデザイン要素を追加します。これには、テキスト、シェイプ、画像などが含まれます。これらの要素は、アニメーションの対象となります。

ステップ3: フレームを複製する

次に、アニメーションの開始と終了を定義するために、元のフレームを複製します。複製したフレームでは、アニメーションの終了状態を設定します。例えば、ボタンの色が変わるアニメーションを作成する場合、複製したフレームでボタンの色を変更します。

ステップ4: プロトタイプモードに切り替える

ツールバーの右上にある「Prototype」タブをクリックして、プロトタイプモードに切り替えます。ここで、フレーム間の遷移を設定します。

ステップ5: フレーム間の遷移を設定する

遷移を設定するには、元のフレームの要素をクリックし、青いプロトタイプハンドルをドラッグして、複製したフレームに接続します。接続すると、右側のプロパティパネルに遷移設定が表示されます。

ステップ6: 遷移のアニメーションを設定する

プロパティパネルでは、遷移の種類を設定できます。「On Click」や「On Drag」などのトリガーを選択し、「Navigate To」で遷移先のフレームを指定します。また、「Animation」セクションで、アニメーションの種類（「Instant」、「Dissolve」、「Smart Animate」など）を選択します。特に「Smart Animate」を選ぶと、Figmaが自動的にアニメーションの間の中間フレームを計算し、スムーズなトランジションを作成してくれます。

4. Smart Animateの活用

「Smart Animate」はFigmaのアニメーション機能です。要素の位置、サイズ、色、不透明度などの変化をスムーズにアニメーション化します。例えば、ボタンがフェードインするアニメーションを作成する場合、初期フレームでボタンの不透明度を0%に設定し、次のフレームで不透明度を100%に設定します。Smart Animateを使用すると、Figmaはこの変化を自動的にアニメーション化します。

Smart Animateの具体例

ボタンの色変更: 初期フレームでボタンの色を青に設定し、次のフレームで赤に設定すると、ボタンが青から赤に変わるアニメーションが作成されます。
オブジェクトの移動: 初期フレームでオブジェクトを左側に配置し、次のフレームで右側に配置すると、オブジェクトが左から右にスライドするアニメーションが作成されます。
サイズ変更: 初期フレームでオブジェクトのサイズを小さく設定し、次のフレームで大きく設定すると、オブジェクトが拡大するアニメーションが作成されます。

参考記事：フレーム間のスマートアニメートレイヤー
https://help.figma.com/hc/ja/articles/360039818874-%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E9%96%93%E3%81%AE%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%83%88%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC

5. 高度なアニメーションテクニック

オーバーレイアニメーション

オーバーレイアニメーションを使用すると、特定のフレーム上に別のフレームを重ねることができます。これにより、モーダルウィンドウやドロップダウンメニューなどのインタラクションをシミュレートできます。オーバーレイを設定するには、遷移の設定で「Open overlay」を選択し、表示位置や閉じる方法を設定します。

ドラッグアニメーション

ドラッグアニメーションは、ユーザーが要素をドラッグしたときに発生するアニメーションを設定できます。これにより、スワイプ可能なギャラリーやスライダーを作成することができます。ドラッグアニメーションを設定するには、トリガーとして「On Drag」を選択し、遷移先のフレームを指定します。

6. アニメーションのプレビューと共有

作成したアニメーションをプレビューするには、ツールバーの右上にある「Present」ボタンをクリックします。これにより、実際のデバイス上での動作をシミュレートできます。また、プロトタイプリンクを生成して、チームメンバーやクライアントと共有することもできます。

7. まとめ

Figmaを使用することで、簡単にアニメーションを作成し、プロトタイプをインタラクティブにすることができます。基本的な遷移設定から高度なアニメーションテクニックまで、幅広い機能を活用することで、デザインの魅力を最大限に引き出すことができます。Figmaのプロトタイピング機能を使いこなして、より直感的で魅力的なデザインを作成してみましょう。