この機能を使用できるユーザー

すべてのチームまたはプランでサポートされます。

編集可のアクセス権を持つユーザーであれば誰でも、インタラクティブコンポーネントを作成できます。

ファイルへの編集可アクセス権を持つユーザーであれば誰でも、コンポーネントをライブラリに公開できます。

初めてプロトタイプを作成する場合は、Figmaのプロトタイピングのガイド→を確認してください

インタラクティブコンポーネントを使用して、コンポーネントセット内でバリアント間のプロトタイプインタラクションを作成することができます。デザインにインスタンスを追加すると、これらのインタラクションが自動的に設定され、すぐに使用可能になるため、プロトタイプ作成時の時間を節約し、頭を悩ます不要な作業をなくすことができます。

• ホバーの状態から押下済みの状態へと変化するボタンなど、バリアント間で自動的に切り替わるインタラクティブエレメントを作成します。
• コンポーネントレベルでデフォルトのインタラクションを設定し、プロトタイプを構築する際に当て推量で作業が行われないようにします。
• チェックボックスやトグルのセットのような、入力フィールドのプロトタイプに必要なフレームやコネクションの量を減らします。

バリアントインタラクションの作成を始める前に

以下の例では、5つのチェックボックスを含むフレームのプロトタイプを作成するために、すべての可能なコネクションを追加しています。インタラクティブコンポーネントがなければ、すべての可能な組み合わせのプロトタイプを作成するために同じフレームを32回複製し、そのフレーム間に160のコネクションを作成しなければなりません。

バリアントインタラクションの使用

インタラクティブコンポーネントを使用すると、チェックボックスのインスタンスをデザインに追加するだけで、バリアントインタラクションがすぐに使えるようになります。プロトタイプを表示すると、Figmaはチェックされたバリアントとチェックされていないバリアントを自動的に切り替えます。

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

インタラクティブコンポーネントは、同じコンポーネントセット内のバリアントのみを使用して作成できます。作業するコンポーネントセットがない場合は、まずそれを作成する必要があります。バリアントの作成方法はこちら→

バリアントインタラクションの作成

インタラクティブコンポーネントは、新しいプロトタイプアクション: [次に変更]を導入しました。

1. 右サイドバーの[プロトタイプ]タブに移動します。
2. フレームのバウンディングボックスでをクリックし、目的のバリアントまでドラッグします。プロトタイプパネルのインタラクションセクションでをクリックし、アクションを[次に変更]に設定にして、ドロップダウンメニューから目的のバリアントを選択することもできます。
3. コネクションが作成されたら、[インタラクション] パネルを使用してトリガーとアクションを調整します。

また、ネストされたインスタンスで[次に変更]アクションを使用すると、親コンポーネントのバリアントを変更できます。以下の例では、コンポーネントセットのバリアントが別の[展開可能]コンポーネントセット内にネストされています。ネストされたインスタンスに[次に変更]インタラクションが配置されて、親コンポーネントが[折りたたみ済み]バリアントから[展開済み]バリアントに変更されます。

インタラクティブコンポーネントの使用

他のコンポーネントと同様に、インタラクティブコンポーネントのインスタンスをデザインに追加します。唯一異なる点は、インスタンスにはすでにプロトタイプを作成するためのインタラクションが適用されていることです。

インタラクティブコンポーネントを使用するには、次の手順に従います。

1. デザイン内のフレームにインタラクティブコンポーネントのインスタンスを追加します。
2. デザインのプロトタイプを作成する準備ができたら、右サイドバーの[プロトタイプ]タブに移動します。
3. プロトタイプを構築します。
4. プレゼンテーションビューでデザインとインタラクションをプレビューします。

インタラクションをさらに追加

インタラクティブコンポーネントでプロトタイプを構築する際は、バリアントインタラクションの上に通常のインタラクションを追加できます。

以下の例では、クリックでトリガーされるバリアントインタラクションの上に、ホバートリガーのインタラクションを追加しています。

インタラクションの順序は、使用するトリガーがバリアントインタラクションと同じトリガーであるかどうかによって異なります。プロトタイプのトリガーについての詳細はこちら→

同じトリガー

両方のインタラクションで同じトリガーを使用する場合、Figmaはプロトタイプインタラクションを使用し、バリアントインタラクションは無視します。

例:

1. 切り替えスイッチには、そのコンポーネントセット内のオンとオフの間に[クリック時]→[次に変更]バリアントインタラクションがあります。
2. 切り替えスイッチから別のフレームにクリック時→次に移動インタラクションを追加します。

Figmaは、ユーザーが[切り替えスイッチ]をクリックすると、次のフレームに移動します。

さまざまなトリガー

別のトリガーでインタラクションを追加すると、Figmaはインタラクションとバリアントインタラクションの両方を再生します。

例:

1. ボタンには、デフォルトとホバーバリアントの間に[ホバー時]→[次に変更]バリアントインタラクションがあります。
2. プロトタイプを構築するときに、クリック時→次に移動インタラクションを追加します。

Figmaは、ホバーでホバーバリアントに変更して、クリック時に次のフレームに移動します。

インタラクションの表示

インタラクティブコンポーネントを使用する際、右サイドバーの[プロトタイプ]タブに[インタラクション]と[バリアントインタラクション]の個別のセクションが表示されます。

• [インタラクション]セクションを使用してプロトタイプインタラクションとアニメーションを作成
• [バリアントインタラクション]セクションを使用して、バリアントインタラクションの詳細を表示

バリアントインタラクションの編集

プロトタイプでは、インスタンスのバリアントインタラクションをオーバーライドできます。メインコンポーネントのバリアントインタラクションを編集する場合は、ソースファイルから編集する必要があります。

インスタンスからコンポーネントセットにアクセスして編集するには、次の手順に従います。

1. デザインモードでインスタンスを選択します。
2. 右サイドバーの一番上で、をクリックします。
3. [メインコンポーネントに移動]を選択します。
4. 右サイドバーの[プロトタイプ]タブに移動します。
5. バリアントインタラクションを編集します。

フレーム全体の状態管理

プロトタイプは、複数のフレームにまたがるインタラクションが発生する可能性があります。デフォルトでは、Figmaは状態管理コントロールを使用してインタラクティブコンポーネントがフレーム全体でどのように動作するかを決定します。

• 状態記憶: Figmaはインタラクティブコンポーネントの最後に設定されたバリアントを記憶します。

  たとえば、チェックボックス用のインタラクティブコンポーネントがあるとします。このインタラクティブコンポーネントをチェック済みのバリアントに設定すれば、Figmaはそのバリアントの状態を記憶します。つまり、そのフレームからいったん離れて後で戻ってきても、インタラクティブコンポーネントはチェック済みの状態で保持されます。

• 状態の共有: Figmaは一致するインタラクティブコンポーネント間で状態を共有します。状態が共有されるのは、コンポーネントが最初に操作された後のみです。

  たとえば、チェックボックス用のインタラクティブコンポーネントがあり、2つのフレームのそれぞれにコンポーネントのインスタンスがあるとします。最初のフレームでインタラクティブコンポーネントをチェック済みのバリアントに設定し、2番目のフレームに移動すると、2番目のフレームにある一致するコンポーネントもチェック済みのバリアントに設定されます。

フレームをまたいで状態を維持しない場合は、プロトタイプインタラクションの[インタラクションの詳細]パネルで[コンポーネントの状態をリセット]のチェックをオフにします。

プロトタイプの状態管理についての詳細はこちら→

バリアブルを適用して使用

インタラクティブコンポーネントにバリアブルを適用して、機能をさらに拡張します。

バリアブルが適用されたインタラクティブコンポーネントをクリックすると、以下が行われます。

• バリアントが更新される
• バリアントが更新され、この同じバリアブルにバインドされている他のすべての要素も更新される

詳細情報: バリアブルをインタラクティブコンポーネントとともに使用→

カスタムフォントを使用したインタラクティブコンポーネント

インタラクティブコンポーネント内のテキストにカスタムフォントを使用する場合は、プロトタイプを閲覧するユーザーがデバイスにそれらのカスタムフォントをインストールしていない可能性があることに留意してください。このような場合、Figmaはプロトタイプを提示する際にカスタムフォントを正しく表示するため、インタラクティブコンポーネントのバリアントに関するキャッシュ情報を活用します。ただし、テキストのオーバーライドを維持できず、かつインタラクションのフォント設定も変更できない場合は、フォントをInterに置き換えることがあります。

たとえば、プロトタイプを表示しているユーザーのデバイスに使用されているカスタムフォントがインストールされていないとします。インタラクティブコンポーネントのインスタンスにテキストのオーバーライドがある場合、使用されるフォントは以下のようになります。

• Figmaでは、バリアントでの変更にフォントの太さやアンダーラインのようなフォント設定の変更が含まれる場合、カスタムフォントをInterに置き換えることがあります。
• Figmaでは、ボタンの背景色のようにフォント設定には関連のないバリアントでの変更であれば、正しいフォントを表示します。

カスタムフォントにアクセスできる状態にない閲覧者とプロトタイプを共有する際は、Google Fontsを使用することをお勧めします。チームが組織やエンタープライズプランを利用している場合、プロトタイプビューアがカスタムフォントにアクセスできるようにするには、共有フォントとしてアップロードすることができます。