···

    プロトタイプでバリアブルを使用する

    はじめに

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

    すべての有料プランで利用できます。

    ファイルに対する編集可アクセス権があれば、だれでもプロトタイプを作成できます。

    ファイルに対する閲覧のみまたはプロトタイプの閲覧のみのアクセス権があれば、だれでもプロトタイプを表示できます。

    Figmaのバリアブルには、デザイン属性または保存されている状態を表す値が格納されます。バリアブルのタイプには、文字列値、数値、色値、ブール値があります。

    バリアブルの値は、プロトタイプ作成アクションを使用して設定および変更できます。いくつかのシンプルなフレームとインタラクションのみを使用して、ユーザーの選択内容に基づいて動的に変化する没入型のプロトタイプを作成できます。これは、プロトタイプアクションを使用して次の操作を実行できることを意味します。

    • 文字列バリアブルを使用して、テキストコンテンツを更新する
    • 数値バリアブルを使用して、オブジェクトの寸法、角の丸み、またはオートレイアウトプロパティを変更する
    • ブーリアンバリアブルを使用して、レイヤーの表示を切り替える

    プロトタイプでバリアブルの使用を開始するには、バリアブルをセットアップし、バリアブル設定アクションを使用して、バリアブル値を変更します。

    バリアブルとプロトタイプを一緒に使用する方法を理解したら、そのパワーをさらに活用できるいくつかのより高度な機能を試してみましょう。

    • 式: 基本的な演算を使用してバリアブルを操作します。これにより、柔軟な値を使用して、より高度なプロトタイプを作成できます
    • 複数のアクションと条件: アクションを実行する前にif/elseステートメントを使用して条件が満たされているかどうかをチェックし、単一のトリガーでアクションを無制限にスタックします

    バリアブルは初めてですか? Figmaでのバリアブルの詳細はこちら →

    試してみよう

    実際の操作については、各セクションの「試してみよう」チュートリアルをご確認ください。これらのシンプルな例を使用して、この機能のしくみについての理解を深めてください。

    もっと多くの練習が必要ですか?高度なプロトタイプ作成のプレイグラウンドファイルを確認→

    プロトタイプでバリアブルを使用する方法の例をさらに探していますか? より高度なプロトタイプの例を確認してください →

    バリアブルをセットアップする

    バリアブルを使用したプロトタイプを作成する前に、次の操作を行う必要があります。

    1. 自分のバリアブルを作成: バリアブルコレクションの作成および整理方法はこちら →
    2. バリアブルを適用: バリアブルをテキストコンテンツ、オブジェクトの寸法、レイヤー表示などに適用する方法はこちら →

    バリアブル値を設定する

    バリアブルを作成し、デザイン内で適用したら、プロトタイプでバリアブルの使用できるようになります。

    それぞれのプロトタイプインタラクションには、トリガー(プロトタイプの処理を進行するきっかけとなるもの)と1つまたは複数のアクション(トリガーの結果として起こるもの)があります。

    [バリアブルを設定]アクションを使用すると、プロトタイプトリガーの結果としてバリアブルの値を設定または変更できます。

    [バリアブルを設定]アクションをプロトタイプインタラクションで使用するには:

    1. プロトタイプインタラクションを作成します。
    2. [インタラクション詳細]パネルに移動し、ドロップダウンメニューからトリガーを選択します。
    3. [アクション]ドロップダウンメニューから、[バリアブルを設定]を選択します。
    4. [ターゲットバリアブルを選択]ドロップダウンメニューから、新しい値を設定するバリアブルを選択します。
    5. [式を記入]フィールドにバリアブルの新しい値を入力します。新しい値のタイプは、変更するバリアブルのタイプと一致する必要があります。たとえば、数値バリアブルを選択した場合、新しい値は数値である必要があります。
      • 文字列値: テキスト文字列リテラルを(引用符で囲んで)入力するか、選択パネルから任意の文字列バリアブルを選択します
      • 数値: 任意の数値を入力するか、選択パネルから任意の数値バリアブルを選択します
      • ブール値: trueまたはfalseを入力するか、選択パネルから任意のブーリアンバリアブルを選択します
      • 色値: 任意のHexコードを入力するか、カラーピッカーからHexコードを選択します
    6. プロトタイプを再生してインタラクションをテストします。

    Four examples of interactions. 1: A cake design, with a Set Variable action setting a boolean sprinkleVisibility variable to true. 2. A background color setting setting, with a Set Variable action setting a color variable bgColor to a new hex code. 3. A design of a square with a Round Corners button beaneath it, with a Set Variable action setting a number variable borderRadius to 20. A select profile design with two avatars, with a Set Variable action setting a string variable, sampleString, to Ernie.

    注:

    バリアブルで複数のモードを使用していますか?バリアブル値を特定のモード値に設定する方法→

    ヒント:

    式を使用すると、演算を使用してバリアブルを操作できます。たとえば、数値バリアブルに対して基本的な演算を実行したり、複数の文字列バリアブルを1つに結合したり、ブール式を使用したりできます。

    試してみよう

    「シェイプ」というタイトルのバリアブルのコレクションを作成しましょう。このコレクションには、シェイプの名前を表す1つの文字列バリアブルを含めます。

    1. キャンバス上のすべてのアイテムを選択解除し、右サイドバーの[ローカルバリアブル]セクションの[バリアブルを開く]をクリックします。
    2. [バリアブルを作成]をクリックし、[文字列]を選択します。
    3. [名前]列に「shapeName」と入力します。
    4. [値]列に「circle」と入力します。The variables authoring panel, with a string variable named shapeName and a value of Circle.

    この段階でバリアブルshapeNameをデザインに適用できます。この例のために、2つのシェイプ(円と正方形)と2つのテキストレイヤーが配置されたフレームを含むシンプルなデザインが用意されています。ここで、バリアブルshapeNameを下のテキストレイヤーにバインドして、選択されたシェイプに基づいて値が変化するようにします。

    1. 以下に示すように、デザインを作成し直します。楕円オブジェクト、長方形オブジェクト、および2つのテキストレイヤーをフレームに追加します。最初のテキストレイヤーのコンテンツとして、「You picked:」と入力します。
    2. フレーム上の下のテキストレイヤーをクリックして選択します。
    3. 右サイドバーの[デザイン]タブで、[テキスト]セクションの[バリアブルを適用]をクリックします。
    4. バリアブル選択パネルからバリアブルshapeNameを選択し、テキストコンテンツに適用します。

    A frame with an ellipse object, a square object, a text layer that says YOU PICKED and a selected text layer that says CIRCLE. With the second text layer selected, the mouse is hovering over the Apply variable icon from the Text section of the right sidebar.

    次に、[バリアブルを設定]アクションを使用してインタラクションを追加しましょう。

    1. 楕円オブジェクトを選択します。
    2. 右サイドバーで、[プロトタイプ]タブに切り替えます。新しいインタラクションを追加するために、[インタラクション]セクションのプラス記号をクリックします。
    3. [インタラクション詳細]パネルで、[タップ]/[クリック]トリガーと[バリアブルを設定]アクションを含むインタラクションを作成します。
    4. ドロップダウンメニューからバリアブルshapeNameを選択します。[バリアブルを設定]フィールドで、新しい値を「circle」に設定します。
    5. 長方形オブジェクトについて手順1～4を繰り返します。今回は、バリアブルshapeNameを「square」に設定します。

    try

    これで、プロトタイプを再生してテストする準備が整いました。各シェイプオブジェクトをクリックすると、テキストレイヤーが新しいバリアブル値に基づいて自動的に更新されます。

    The ellipse object is selected. From the Prototype tab, and interaction has been created, with an On Tap trigger and a Set Variable action. The shapeName variable is being set to Circle.

    バリアブルを使用したプロトタイプの作成の実際

    基本がわかったら、プロトタイプとバリアブルをさまざまな方法で使用できます。

    バリアブルをコンポーネントバリアントとともに使用する

    バリアブルをコンポーネントバリアントに適用できます。これにより、[バリアブルを設定]アクションを使用して自動的にコンポーネントを更新できます。

    1. 2つ以上のバリアントを含むコンポーネントセットを作成します(たとえば、「circle」と「square」の値を持つバリアントプロパティ「shape」を含むコンポーネントセットを作成します)。
    2. バリアントのインスタンスをフレームに配置します。
    3. バリアブルをインスタンスに割り当てます。バリアブルの値はバリアントプロパティの値と一致する必要があります(たとえば、デフォルトの値「circle」を持つバリアブルshapeTypeをインスタンスに割り当てます)。
      1. インスタンスをクリックして選択します。
      2. 右サイドバーで、バリアントプロパティの右側にマウスカーソルを合わせ、[バリアブルの割り当て]をクリックします。
      3. プロパティにバインドするバリアブルを選択します。
    4. フレーム内の任意のオブジェクトに対し、[バリアブルを設定]アクションを使用するインタラクションを作成します。バリアブルの値を、未使用のバリアントプロパティの値と一致するように変更します(たとえば、バリアブルshapeTypeの値を「square」に設定します)。
    5. プロトタイプを再生してインタラクションをテストします。インタラクションがトリガーされ、バリアブルが変更されると、バリアントも更新されます。

    注: 結び付けられたバリアブルの値の変更によってバリアントが変更された場合、ネストしたインスタンスはオーバーライドを転送しません。

    Screenshot 1: The variable authoring panel, with a string variable ShapeType created, with a default value of Circle. Screenshot 2: A component set, with a Shape property with two values: square, circle. Screenshot 3: An instance of the circle variant on a frame, with the ShapeType variable applied to the component property. Screenshot 4: A button beneath the instance on the frame, with an interaction: Set variable ShapeType to Square.

    試してみよう

    1. colorNameという名前の新しいローカル文字列バリアブルを作成し、デフォルト値を「青」に設定します。
    2. 青い正方形1つと黄色の正方形1つの2つのバリアントを含むコンポーネントセットを作成します。バリアントプロパティの名前を「color」に設定し、値の名前をそれぞれ「blue」と「yellow」に設定します。A component set with two variants, a blue square and a yellow square. From the Properties section of the right sidebar, the variant property is named Color, and has two values: blue and yellow
    3. バリアントblueのインスタンスをフレームに配置します。
    4. バリアントプロパティ「color」の横の[バリアブルの割り当て]をクリックして、バリアブルcolorNameをインスタンスに適用します。An istance of the blue variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    5. 2つのテキストレイヤーをフレームに追加し、正方形の下に配置します。一方のテキストレイヤーは「blue」、もう一方は「yellow」を示すはずです。
    6. 「blue」というテキストレイヤーを選択し、[クリック]/[タップ]トリガーと[バリアブルを設定]アクションを含むプロトタイプインタラクションを追加します。バリアブルcolorNameの値を「blue」に設定します。try
    7. 「yellow」というテキストレイヤーを選択し、[クリック]/[タップ]トリガーと[バリアブルを設定]アクションを含むプロトタイプインタラクションを追加します。バリアブルcolorNameの値を「yellow」に設定します。
    8. プロトタイプを再生してインタラクションをテストします。テキスト「yellow」をクリックすると、コンポーネントが黄色の正方形のバリアントに更新されます。テキスト「blue」をクリックすると、コンポーネントが青い正方形のバリアントに更新されます。The prototype is being played. When the blue text layer is clicked, the square changes to the blue variant. When the Yellow text layer is clicked, the square changes to the yellow variant.

    バリアブルをインタラクティブコンポーネントとともに使用する

    バリアブルは、コンポーネントバリアントとともに使用する場合と同様に、インタラクティブコンポーネントに適用できます。

    インタラクティブコンポーネントをクリックすると、次の結果になります。

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

    バリアブルをインタラクティブコンポーネントとともに使用するには:

    1. インタラクティブコンポーネントセットを作成します(たとえば、「true」と「false」の値を持つバリアントプロパティ「クリック」を使用するボタンインタラクティブコンポーネントを作成します)。
    2. インタラクティブコンポーネントセットのバリアントのインスタンスをフレームに配置します。
    3. バリアブルをインタラクティブコンポーネントインスタンスに割り当てます。バリアブルの値はバリアントプロパティの値と一致する必要があります(たとえば、デフォルト値が「false」のブーリアンバリアブルcircleVisibilityをインスタンスに割り当てます)。
      1. インスタンスを選択します。
      2. 右サイドバーで、いずれかのバリアントプロパティのドロップダウンメニューを選択します。
      3. [バリアブルの割り当て]を選択します。
      4. プロパティにバインドするバリアブルをクリックして選択します。
    4. プロトタイプを再生してインタラクションをテストします。インタラクションがトリガーされ、コンポーネントが変更されると、バリアブルの値も変更されます。これは、他の値にバインドされた同じバリアブルがある場合はそれらも更新されることを意味します。

    注: 結び付けられたバリアブルの値の変更によってバリアントが変更された場合、ネストしたインスタンスはオーバーライドを転送しません。

    Screenshot 1: An interactive component of a button, with a Clicked variant property with true and false values. Screenshot 2: A circle placed on a frame, with the layer visibility bound to a circleVisibility boolean variable. Screenshot 3: An instance of the button on the same frame, with the circleVisibility boolean variable bound to the variant property. Screenshot 4: A GIF of the prototype in action. When the button is clicked, the circle's visibility toggles on and off.

    試してみよう

    1. ローカルブーリアンバリアブルを作成します。バリアブルに「selected」という名前を付け、開始値を「false」に設定します。
    2. 選択済み状態と未選択状態の2つのバリアントを含むコンポーネントセットを作成します。バリアントプロパティの名前を「selected」に設定し、値の名前をそれぞれ「true」と「false」に設定します。A component set with two variants of a button. The variant property is named SELECTED, and has true and false values.
    3. コンポーネントセット内のバリアントの間にプロトタイプインタラクションを追加します。タップ時、バリアントfalseをバリアントtrueに変更します。タップ時、バリアントtrueをバリアントfalseに変更します。
    4. バリアントfalseのインスタンスをフレームに配置します。
    5. バリアントプロパティ「selected」の横の[バリアブルを割り当て]をクリックして、バリアブルselectedをインスタンスに適用します。An instance of the false variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    6. 星オブジェクトをフレームに追加します。
    7. バリアブル「selected」を星オブジェクトの表示/非表示に適用します。
      1. 星を選択します。
      2. 右サイドバーの[レイヤー]セクションに移動し、表示/非表示アイコンを右クリックします。
      3. バリアブル選択パネルのバリアブルselectedをクリックします。バリアブルselectedの値がtrueの場合にのみ星が表示されるようになります。A star object is placed on the frame. With the star selected, the mouse is hovering over the visibility icon from the Layer section of the right sidebar.
    8. プロトタイプを再生します。ボタンをクリックすると、星オブジェクトの表示/非表示が切り替わります。The prototype is being played. When the button is clicked, it switches to the true variant, and the star becomes visible.
    この記事は役に立ちましたか？

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Thank you for helping us improve Figma’s Help Center!

    ページの先頭へ戻る