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

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

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

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

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

インタラクティブコンポーネントによって、コンポーネントセット内でバリアント間のプロトタイプインタラクションを作成することができます。インスタンスをデザインに追加すれば、いつでもそのインタラクションがセットアップされてすぐに使えるようになります。これによってプロトタイプを作成する時間を節約し、必要のない、頭を悩ます作業を避けることができます。

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

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

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

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

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

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

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

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

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

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

ネストされているインスタンスで変更アクションを使用して、親コンポーネントのバリアントを変更することができます。下の例では、詳細を表示コンポーネントセットのバリアントが、他のコンテナコンポーネントセットの中にネストされています。変更インタラクションをネストされているインスタンスに配置して、親コンポーネントを折りたたみバリアントから展開バリアントに変更します。

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

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

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

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フォントを使用することをお勧めします。チームがビジネスプランまたはエンタープライズプランを利用していれば、共有フォントとしてアップロードすることで、プロトタイプの閲覧者がカスタムフォントにアクセスできるようになります。