SALUDOBlog

Figmaアニメーションボタンの制作方法を解説|プロトタイピング

Figmaアニメーションボタンの制作方法

アニメーションボタンは、ユーザーの注意を引き、より魅力的なユーザー エクスペリエンスを作成し、アクションをより明確に伝えるための優れた方法です。

このチュートリアルでは、Figmaを使用して、インタラクティブなボタンアニメーションプロトタイプを作成する方法を説明します、フレーム、トランジション、トリガーを組み合わせて使用​​して、動的でインタラクティブなボタンアニメーションプロトタイプを作成します。

アニメーションボタンのプロトタイプ画像 1

Figmaボタンアニメーション|アイデア

ボタンをデザインする前に、ボタンがどのようにアニメーション化されるのかを理解しておく必要があります。これは、ボタンの意図された機能と動作を最もよく伝える適切なデザイン要素とアニメーションを選択するのに役立ちます。

たとえば、ボタンが重要なアクションや機能を強調表示することを目的としている場合は、ユーザーの注意を引く大胆な色と動的なアニメーションを使用するとよいでしょう。ボタンの意図されたアニメーションを理解すると、全体的なユーザー エクスペリエンスをサポートするデザイン上の決定を下すのに役立ちます。

アニメーションボタンのプロトタイプ画像 2

支払いボタンをデザインする

  • 228×56 の長方形を作成しました
  • 左上隅の半径は 15、他の隅は 40
  • 選択したテキストスタイルでPayを書きます
  • 角の半径が 40 の 44×44 のフレームをアイコンに追加します。左から 4 つの間隔があり、水平方向の中央に揃えられる必要があります。不透明度40%の白で枠を塗りつぶします。
  • 中央に不透明度 80% の白い円を追加します (これは一種の進行状況バーとして機能します)。 アニメーションボタンのプロトタイプ画像 3

設計プロセス

  • アイコン枠の右側を右から4つ離れた左側にドラッグし、アイコン枠の左側を左にドラッグしてアイコンを非表示にします
  • 中央の円を長方形の形を満たすまで増やします
  • アイコンを✔️アイコンに変更します
  • 「ありがとう」のラベルを変更します。
アニメーションボタンのプロトタイプ画像 4

コンポーネントの作成

インタラクティブコンポーネントを使用すると、コンポーネントセット内のバリアント間でインタラクションのプロトタイプを作成でき、インスタンスを追加すればいつでも使用できるようになります。複数のインスタンスを作成し、設計内でさまざまな動作を試してください。

コンポーネントの作成

  • ボタンを選択し、上部のひし形のアイコンを選択して、[複数のコンポーネントの作成]を選択します。
アニメーションボタンのプロトタイプ画像 5

バリアントの追加

バリアントを使用すると、設計アイデアを簡単に作成、テスト、反復できます。色と間隔のさまざまな組み合わせを試すために、チームにリンクを送り返したりする必要はもうありません。設計内の任意のコンポーネントにバリアントを追加し、名前を付けて、プロジェクトに最適なものを選択できます。

  • プラスアイコンをクリックして新しいバリアントを追加します
  • 設計プロセスに従い、順番に設計を変更します。 アニメーションボタンのプロトタイプ画像 6

プロパティと値を追加する

バリアントのプロパティとその値を使用して、バリアントの属性を定義できます。バリアント プロパティは、バリアントおよびコンポーネント セットに固有のコンポーネント プロパティのタイプです。バリアント プロパティを使用すると、 SizeState、 Colorなどのバリアントの属性を定義できます。

  • 最初のボタンを選択し、プロパティ パネルでプロパティにStateという名前を付けます。
  • 最初のバリアント値に「デフォルト」という名前を付けます
  • 残りのボタンについても繰り返し、2番目のボタンには「Hover」 、 3番目のボタンには「Pressed」という名前を付けます。
アニメーションボタンのプロトタイプ画像 7

コンポーネントをテストする

すべてのコンポーネントを適切に設定したら、プロジェクトでテストできます。アセットに移動してローカル コンポーネントを選択し、コンポーネントをドロップ アンド ドラッグします。インスペクターからバリアントの値を変更できる場合は、すべてが正常に機能していることを意味します。

アニメーションボタンのプロトタイプ画像 8

アニメーションプロトタイプ

これで、コンポーネントをアニメーションパーツに変換する準備が整いました。この例では、ホバー時とクリック時という 2 つのインタラクションを作成します。ユーザーがボタンの上にマウスを置くと、ボタンの色が変わります。クリックすると、ボタンのデザインが変わります。

  • 最初のボタンを選択し、「プロトタイプ」パネルに移動し、接続ノードを 2 番目のボタンにドラッグしてプロトタイプをアクティブにします。
  • ボタン 1 からボタン 2 へのインタラクション: ホバリング中、アニメーション: スマート アニメート、持続時間 300 ミリ秒
  • ボタン 2 からボタン 3 へのインタラクション: クリック時、アニメーション: スマートアニメーション、持続時間 300 ミリ秒
アニメーションボタンのプロトタイプ画像 9

DEMO

ボタン-20テスト-206

まとめ

アニメーション化されたボタンは、インターフェイスをよりインタラクティブで魅力的なものにする優れた方法です。このチュートリアルで概説されている手順に従うことで、アニメーション化されたボタンのプロトタイプをすばやく作成できます。環境をセットアップしてボタンを設計したら、アニメーションを作成して実際のプロジェクト環境でテストできます。少し練習すれば、アニメーション化されたボタンはすぐにプロトタイピングのレパートリーに欠かせないツールになることができます。