はじめに

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

すべてのプランのユーザー

Figma Designファイルへの編集アクセス権限を持つすべてのユーザーが、コンポーネントのプロパティを作成、管理、使用できます

この記事では、コンポーネントプロパティを作成および設定する方法について説明します。コンポーネントプロパティを使用してインスタンスを編集する方法についてはこちらを参照してください。

コンポーネントプロパティは、コンポーネントの変更可能な部分であり、以下のように、コンポーネントのどの部分を変更できるかを伝えることができます。

• コンポーネント内のどのレイヤーに非表示または表示のオプションを与えるか
• インスタンスを入れ替えることができるかどうか、また入れ替え先の優先インスタンスを設定するかどうか
• 変更できるテキスト文字列

コンポーネントプロパティを作成し、メインコンポーネントやコンポーネントセットに適用することで、デザインシステムの各部分を定義でき、デザインシステムが使いやすくなります。

コンポーネントプロパティを持つコンポーネントを使用するユーザー全員を対象として、右パネルに一元化されたコントロールセットが表示されます。これにより、何が変更可能かが一目でわかり、1か所で編集を行うことができます。

これにより、ドキュメントを参照する時間が短縮され、コンポーネントやデザインシステムの正確な使用が促進され、個々のレイヤーを選択してオーバーライドする必要が減少します。

コンポーネントプロパティの種類

コンポーネントプロパティはさまざまなデザインプロパティに関連付けられています。コンポーネントプロパティを任意のメインコンポーネントまたはコンポーネントセットのバリアントに作成し、コンポーネントやバリアントのネストされたレイヤーに適用できます。

コンポーネントのプロパティは次のさまざまなタイプで提供されます。

コンポーネントプロパティタイプ	これを使用して...
ブーリアン型プロパティ	表示のオン/オフができるレイヤーを示します。例として、ボタン上のアイコンなどがあります。
インスタンススワップ型プロパティ	交換可能なインスタンスを示し、交換先の推奨インスタンスを設定します。
テキスト型プロパティ	変更可能なテキストコンテンツを示します。
バリアント型プロパティ	コンポーネントの異なるバリエーション（異なる状態、サイズ、色など）を定義します。

コンポーネントプロパティの作成と管理

ブーリアン型プロパティ

ブール型プロパティを使用してtrue/falseの値を設定します。これにより、属性のオンとオフを切り替えることができます。たとえば、デザインシステムにアイコン付きのボタンとアイコンのないボタンが含まれている場合、状態ごとにバリアントを作成するのではなく、ブール型プロパティをアイコンのレイヤー表示に適用します。

現在、ブール型プロパティはレイヤーの表示/非表示のみをサポートしています。

ブール型プロパティを作成する

レイヤーの表示に対してブール型プロパティが作成され、値がfalseに設定されている場合、そのレイヤーは非表示になります。trueに切り替えると、レイヤーは表示されます。

1. メインコンポーネントまたはコンポーネントセットを選択します。
2. 右サイドバーの[プロパティ]セクションでをクリックし、ドロップダウンからブール値を選びます。
3. [コンポーネントプロパティを作成]モーダルで、フィールドとドロップダウンメニューを使用してプロパティを設定します。
   • テキストフィールドで、プロパティに名前を付けます。
   • デフォルト値をtrueまたはfalseに設定します。必要に応じて、既存のブール型バリアブルが利用可能ならば、バリアブルを適用をクリックすることもできます。
4. [プロパティを作成]をクリックします。

ブール型プロパティをコンポーネントに適用する

1. メインコンポーネントまたはバリアントにネストされているレイヤーを選択します。
2. バリアントを扱っている場合、をクリックしてマルチ編集を有効にし、一致するオブジェクトを編集してワークフローを迅速化できます。バリアントをマルチ編集する方法についてはこちらを参照してください。
3. 右側のサイドバーで[外観]セクションを見つけて、バリアブル/プロパティを適用アイコンをクリックします。
4. リストからブール型プロパティを選択します。適用すると、右サイドバーにプロパティ名のついた紫色のピルが表示されます。

インスタンススワップ型プロパティ

インスタンススワップ型プロパティを使用すると、メインコンポーネントやバリアントにネストされたインスタンスで入れ替え可能なものを指定できます。

インスタンススワップ型プロパティを作成すると、ファイル内で作成された任意のコンポーネントや、ファイルに追加されたライブラリからデフォルトのインスタンスを設定できます。また、他の人がどのインスタンスに切り替えられるか示すために優先インスタンスを設定することもできます。インスタンススワップ型プロパティを使用してコンポーネントをスワップする方法についてはこちらを参照してください。

インスタンススワップ型換プロパティを作成する

1. メインコンポーネントまたはコンポーネントセットを選択します。
2. 右サイドバーの[プロパティ]セクションでをクリックして、ドロップダウンからインスタンススワップを選びます。
3. [コンポーネントプロパティを作成]モーダルで、フィールドとドロップダウンメニューを使用してプロパティを設定します。
   • テキストフィールドを使用して、プロパティに名前を付けます。
   • ファイル内で作成された任意のコンポーネントや追加されたライブラリから、ドロップダウンを使用してインスタンスを選択して、デフォルトの値を設定します。
   • 必要に応じて、優先インスタンスを設定し、他の人がインスタンススワップを実行するときに選択するコンポーネントを知らせましょう。
4. [プロパティを作成]をクリックします。

インスタンススワップ型プロパティをコンポーネントに適用する

1. メインコンポーネントまたはバリアントにネストされているインスタンスを選択します。
2. バリアントを扱っている場合、をクリックしてマルチ編集を有効にし、一致するオブジェクトを編集してワークフローを迅速化できます。バリアントをマルチ編集する方法についてはこちらを参照してください。
3. 右サイドバーの上部で、インスタンススワップ型プロパティを適用をクリックします。
4. リストからインスタンスプロパティを選びます。適用すると、右サイドバーにプロパティ名のついた紫色のピルが表示されます。

優先する値を選択する

優先値は、インスタンスを入れ替えるときの選択元になる選別されたコンポーネントセットを(インスタンススワップ型プロパティで)作成できます。どの特定のコンポーネントが既存のものを置き換えることができるかを知らせることにより当て推量を減らします。

たとえば、インスタンススワップ型プロパティを持つアイコンボタンを作成して、アイコンを入れ替えられることを示します。ただし、アイコンライブラリには100を超えるアイコンが含まれますが、そのうち8つだけをこのボタンに使用する必要があります。

これらの8つのアイコンを簡単に見つけてどれが使用できるかを把握するには、これらを優先値として追加します。これでデザイナーは、アイコンを入れ替えようとするときにはいつでも、使用できることがわかっているアセットの選別されたリストを得られます。

優先値を持つコンポーネントを使用する場合、優先値のリストはインスタンススワップ型プロパティメニューを開くときにデフォルトで表示されます。

インスタンスに優先値を追加するには:

1. まず、既存のインスタンススワップ型プロパティを編集するか、新規作成します。
2. それぞれのモーダルで[優先値]セクションのをクリックし、優先値として含めたいインスタンスの横にあるチェックボックスをオンにします。

優先値を削除するには、モーダルの[優先値]セクションの値の横にあるをクリックします。

テキスト型プロパティ

テキスト型プロパティを使用して、コンポーネント内で編集可能なテキストコンテンツを示します。テキストコンテンツは、右パネルやキャンバス上で編集可能です。

テキスト型プロパティを作成する

1. メインコンポーネントまたはコンポーネントセットを選択します。
2. 右サイドバーの[プロパティ]セクションのをクリックし、ドロップダウンからテキストを選択します。
3. [コンポーネントプロパティを作成]モーダルから、フィールドを利用してプロパティを設定します。
   • テキストフィールドを使用して、プロパティに名前を付けます。
   • [値]テキストフィールドを使用して、テキストのデフォルト文字列を設定します。また、バリアブルを適用をクリックして、利用可能な既存の文字列バリアブルを適用できます。
4. [プロパティを作成]をクリックします。

コンポーネントにテキスト型プロパティを適用する

1. メインコンポーネントまたはバリアントにネストされているテキストレイヤーを選択します。
2. 右サイドバーの上部にある[テキスト]セクションで、テキストフィールドにカーソルを重ね、バリアブル/プロパティを適用をクリックします。
3. リストからテキスト型プロパティを選択します。

バリアント型プロパティ

バリアントは、コンポーネントセット内の個々のコンポーネントです。

バリアント型プロパティでは、状態、カラー、サイズなどのバリアントの属性を定義できます。

コンポーネントセットには複数のバリアントが含まれ、バリアントにはバリアントプロパティによって定義される属性があります。バリアントプロパティはバリアントとコンポーネントセットに固有であり、メインコンポーネントに作成または適用することはできません。

バリアントとコンポーネントセットを作成する方法についてはこちらを参照してください。

以下の例には、4つのバリアントを含むボタンコンポーネントセットがあります。これにはサイズとカラーの2つのプロパティがあります。サイズの値には小と大が含まれ、カラーの値には緑と赤が含まれています。

別のコンポーネントプロパティに切り替える

レイヤーにコンポーネントプロパティが適用されている場合は、いつでも別のものに変更できます。

1. 右サイドバーで変更したいコンポーネントプロパティの該当セクションを見つけます。
   • インスタンススワップ型プロパティ: 右サイドバーの上部。
   • テキスト型プロパティ: 右サイドバーの[テキスト]セクションの上部。
   • ブール型プロパティ: [外観]セクション。
2. 紫色のピルをクリックします。
3. 同じタイプの既存のプロパティを選択します。

コンポーネントプロパティをカスタマイズする

デフォルト値を変更する

テキスト型、ブーリアン型、インスタンススワップ型のプロパティのデフォルト値を変更します。

1. コンポーネントセットまたはメインコンポーネントを選択します。
2. バリアントプロパティの横のをクリックして、プロパティ編集モーダルを開きます。
3. 値セクションのテキストフィールドまたはドロップダウンで、デフォルト値を更新します。

デフォルト値の更新は、関連付けられたインスタンスレイヤーにプロパティのオーバーライドが適用されていない場合は、キャンバスに反映されます。

ネストしたインスタンスの公開

特定のネストしたインスタンスを公開し、そのコンポーネントのプロパティを最上位インスタンスのものと並べて表示します。これにより、レイヤーを深くまで選択して見つけることなく、デザインシステムユーザーがネストしたインスタンスとそのコンポーネントのプロパティを調べることができます。

たとえば、アバター、名前、ボタンなど複数のコンポーネントを内部にネストしたソーシャルメディアカードコンポーネントを作成するとします。デフォルトのボタンのアイコンを「送信」アイコンに変更し、そのテキストを変更しようとしているとします。また、キャンセルボタンを無効の状態に変更しようとも考えているとします。

その場合、各レイヤーを深くまで選択してそのコンポーネントのプロパティのコントロールを見つける代わりに、ネストしたインスタンスを公開することにより、最上位コンポーネント(この場合はソーシャルメディアカード)をクリックするだけで一か所でインスタンスを編集できます。

公開ネストインスタンスとともに最上位インスタンスを選択する場合、最上位かつネストしたインスタンスのコンポーネントのプロパティのリストが右パネルに表示されます。

プロパティ行にマウスカーソルを合わせると、キャンバス上の対応するオブジェクトの周りに薄紫のハイライトが表示されるため、編集している対象がわかります。

公開するネストしたインスタンスの選択

メインコンポーネントまたはコンポーネントセットを選択した状態で、右パネルの[プロパティ]セクションでをクリックし、[プロパティの公開元]の下の[ネストされたインスタンス]を選択します。

[ネストしたインスタンスを公開]モーダルから、最上位に表示するインスタンスのボックスをオンにします。

ネストしたインスタンスを選択したリストが右パネルに表示されます。

ネストしたインスタンスを公開対象から削除するには、このリスト上のインスタンス名にマウスカーソルを合わせ、をクリックします。

インスタンスを簡素化する

インスタンスを簡素化すると、コンポーネントのプロパティを適用せずにレイヤーを非表示にすることにより、レイヤーとプロパティパネルでの乱雑さを軽減するのに役立ちます。Figmaでは、コンポーネントのプロパティのないレイヤーは編集すべきでないレイヤーであるため、非表示にすることのできるレイヤーであると想定しています。

インスタンスを簡略化するには、メインコンポーネントまたはコンポーネントセットを選択し、右パネルの[コンポーネントの設定]をクリックします。ポップアップで[インスタンスをすべて簡略化]チェックボックスをオンにします。

簡素化されたコンポーネントのインスタンスを使用する場合、過剰なレイヤーは、[すべてのレイヤーを表示]の下に折り畳まれます。[すべてのレイヤーを表示]をクリックすると展開してレイヤーが表示されます。レイヤーパネルの外側をクリックするか、別のレイヤーを選択すると再度折り畳まれます。

コンポーネントプロパティを管理する

作成したコンポーネントプロパティとその値は、いつでも管理できます。名前の変更、並べ替え、デフォルト値の変更などが可能です。

プロパティの切り離し

レイヤーからテキスト型、インスタンススワップ型、またはブーリアン型のプロパティを切り離します。

1. コンポーネントプロパティが適用されたネストしたレイヤーを選択します。
2. 分離するプロパティの横にある右サイドバーパネルのをクリックします。

これにより、レイヤーからコンポーネントプロパティが取り除かれますが、コンポーネントプロパティは削除されません。

名前の変更、並べ替え、削除

プロパティ

既存のコンポーネントプロパティの名前の変更、並べ替え、削除を行うには、次の手順に従います。

1. メインコンポーネントまたはコンポーネントセットを選択します。
2. 右サイドバーのプロパティセクションで、次の操作を行います。

   • 名前の変更: プロパティ名をダブルクリックします。新しい名前を入力し、return / enterを押すか、フィールドの外側をクリックして適用します。

   • 並べ替え: プロパティにカーソルを合わせてハンドルを表示します。クリックアンドドラッグで並び替えて、ボタンを離して適用します。

     バリアントプロパティは、右サイドバーで常に他の型のプロパティの上に表示されます。バリアント型の他のプロパティとの間で並べ替えることはできますが、他の型のプロパティと一緒に並べ替えることはできません。

   • 削除: プロパティを右クリックし、[プロパティの削除]をクリックします。または、プロパティを選択してDeleteを押します。

     コンポーネントセットまたはメインコンポーネントにバリアントプロパティが1つしかない場合は、そのプロパティを削除するとコンポーネントセットまたはメインコンポーネント全体が削除されます。

値

バリアントプロパティの値の変更または並べ替えを行うには、次のようにします。

1. コンポーネントセットまたはメインコンポーネントを選択します。
2. バリアントプロパティの横のをクリックして、プロパティ編集モーダルを開きます。
   • 変更: 値セクションで、テキストフィールドの値を更新します。
   • 並べ替え: 値にカーソルを合わせてハンドルを表示します。クリックアンドドラッグで並べ替えます。

Dev Modeでのコンポーネントプレイグラウンド

Dev Modeでコンポーネントまたはインスタンスを選択すると、コンポーネントのプレビュー、メインコンポーネントへのリンク、さらに関連ドキュメントや開発リソースへのリンクも表示されます。

コンポーネントのインスタンスが選択されると、コンポーネントのプレイグラウンドファイルがインスペクトパネルに表示されます。プレイグラウンドファイルを使用して、実際のデザインを変更せずにコンポーネントの異なるプロパティを試します。Dev Modeでコンポーネントプレイグラウンドを開くには、次の手順に従います。

1. キャンバス上のコンポーネントインスタンスを選択します。
2. インスペクトパネルで[プレイグラウンドで開く]をクリックします。

Dev Modeを使用したデザインのインスペクトについて詳しくは、こちらを参照してください。