SALUDOBlog

Figmaでテキストをアニメーションする方法を解説|ディレイアニメーション

Figmaでテキストをアニメーションする方法

テキストアニメーションは、テキストをアニメーション化して特定の動きパターンや特定のエリアでの表示を作成することを指します。アニメーションされたテキストは、視聴者の注意を引きつけ、保持するために使用されます。

これはマーケティングの取り組みを楽しく魅力的にする方法であり、ほとんどのデザインプロジェクトで利用できます。重要な情報を強調する、異なるトピック間を移行するなど、製品やサービスを効果的に伝えるための多くの方法があり、ビデオのイントロやアウトロにも最適です。

ディレイのアニメーション

Figmaでのディレイのアニメーションプロトタイピングは、デザイン内の異なるトランジション間に遅延を追加する技術で、より複雑で魅力的なアニメーションを作成し、静的なデザインよりも説得力と華やかさを演出してくれます。

このチュートリアルでは、Figmaでアニメーションをプロトタイプ化する方法と、「ディレイ」トリガーを使用してプロトタイプをインタラクティブにする方法を学びます。

インタラクティブコンポーネント制作

コンポネートをあらかじめ制作しておくことで使用頻度の高いアイテムであればすぐに使い回すことが可能なのでコンポネーと制作は癖づけるようにしましょう。

デザインの制作

デザインができたので、今度はテキストアニメーションを作成するためにどのフォントを使用するかを決定します。私はAppleのSF Pro Roundedを使用します。

太字、サイズ60、テキストを整列させ、幅は自動で設定する形で「デザイン」を書いてください。テキストを複製し、コードに変更します。

フレームは形状、テキスト、画像などのデザイン要素のコンテナです。フレームを使用してデザイン要素を整理し、異なるサイズのレイアウトを作成できます。また、フレームを使用して要素を組み合わせ、複数の要素に同時にスタイルを適用することもできます。

各テキストを選択し、右クリックして「フレームの選択」をクリックしてください。

コンテンツのクリップ

クリップコンテンツは、フレームの可視領域をその境界に制限する機能です。つまり、フレームの端を超えるコンテンツは非表示または「クリップ」されます。これは、特定のレイアウトや効果をフレーム内でマスクする際に役立ちます。

2つのフレームを選択し、右クリックして「フレームの選択」をクリックします。フレームを調整して境界を減少させます。新しいフレームレイヤーに「デザイン」という名前を付けます。

フレームを複製し、「Code」と名前を付け、Codeフレーム内の2つのフレームを選択し、テキストを上に移動させて、2番目のテキストがCodeフレーム内に収まるようにします。

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

そのバリアント間でアニメーションできるようにしましょう。

2つのフレームを選択し、トップツールバーで「Create component set」をクリックします。

インタラクションの詳細は、対話的なプロトタイプを作成するための個々の要素です。これらはプロトタイプの構築要素であり、ユーザーがボタンをクリックしたり、画面間をスワイプしたりすることを可能にします。

最初のフレームを選択し、プロトタイプタブに移動し、接続ノードを2番目のフレームにドラッグします。 遅延後のインタラクション: 800 ms。 アニメーション: スマートアニメート。 トランジション: 800 msのイーズインとアウト。

プロトタイプをプレビューするには、右上隅のプレゼントアイコンをクリックし、アニメーションをプレビューできます!

まとめ

これで完了です!Interactive Component機能とAfter Delayトリガーを使用して、Figmaでテキストアニメーションを作成しました。この方法を使用して、画像や形など、Figmaの他の要素をアニメートすることができます。さらに、異なるトリガーやアクションを試して、より複雑なアニメーションを作成することもできます。