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

はじめに

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

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

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

ここでは、コンポーネントプロパティの仕組み、型、優先値、公開されたネストしたインスタンスなどについて詳しく説明します。

作成

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

コンポーネントプロパティは、メインコンポーネントやコンポーネントセットの親レイヤーと子レイヤーの2つのレベルで作成できます。親レイヤーと子レイヤーの関係について→

子レイヤーでインスタンススワップ、テキスト、ブーリアンのプロパティを作成すると、何もしなくても子レイヤーに適用されます。

親レイヤーでもすべてのコンポーネントプロパティを作成できますが、子レイヤーへの適用は手動での操作が必要です。バリアントプロパティは、親レイヤーでのみ作成できます。

プロパティ	子レイヤー	親レイヤー
ブーリアン	✓	✓
テキスト	✓	✓
インスタンススワップ	✓	✓
バリアント	✕	✓

子レイヤーで

バリアントまたはメインコンポーネントの子レイヤーでコンポーネントプロパティを作成すると、作成したプロパティが選択したレイヤーに適用されます。

この方法で作成できるプロパティは、インスタンススワップ、テキスト、ブーリアンです。

子レイヤーでバリアントプロパティを作成することはできません。

1. メインコンポーネントまたはバリアントにネストされているインスタンスを選択します。
2. (オプション、バリアントのみ)をクリックし、マルチ編集を有効にして一致するオブジェクトを編集し、ワークフローをスピードアップします。バリアントのマルチ編集の方法→
3. 作成するコンポーネントプロパティに対応するセクションのをクリックします。ドロップダウンメニューが表示されたら、以下のそれぞれの場所の[プロパティを作成...]をクリックします。
   • インスタンススワップ: 右サイドバーのインスタンスの入れ替えドロップダウンの横。
   • テキスト: 右サイドバーのコンテンツセクション内
   • ブーリアン: 右サイドバーのレイヤーセクション内
4. コンポーネントプロパティを作成モーダルで、フィールドとドロップダウンメニューを使用してプロパティを設定します。
   • インスタンススワップ:
     • テキストフィールドで、プロパティに名前を付けます
     • ドロップダウンメニューでデフォルト値を設定し、ファイルまたは有効なライブラリのローカルコンポーネントからインスタンスを選択します。
     • 優先値がある場合は設定しておくと、コンポーネントを使用するときにどの値を選択するべきかを他のユーザーに知らせることができます。詳細→
   • テキスト:
     • テキストフィールドで、プロパティに名前を付けます
     • 値テキストフィールドで、テキストのデフォルトの文字列を設定します。デフォルト値を現在の文字列以外の文字列に設定すると、テキスト文字列がその値に更新されます。逆の場合も同様で、メインコンポーネントのテキスト文字列を更新すると、デフォルト値も更新されます。
   • ブーリアンプロパティ:
     • テキストフィールドで、プロパティに名前を付けます
     • デフォルト値をtrueまたはfalseに設定します。
5. [プロパティを作成]をクリックします。適用されると、右サイドバーの対応するプロパティのセクションにプロパティ名が付いた紫色のピル(錠剤の形状)が表示されます。

親レイヤーで

この方法は、バリアントプロパティを含むすべてのプロパティ型をサポートします。

親レイヤーでのコンポーネントプロパティの追加プロセスは、2つのステップからなります。

1. 親レイヤーで、コンポーネントプロパティを作成します。
2. 目的のレイヤーに手動で適用する↓

親レイヤーでコンポーネントプロパティを作成するには、次のようにします。

1. メインコンポーネントまたはコンポーネントセットを選択し、右サイドバーのプロパティセクションにあるをクリックします。コンポーネントプロパティのオプションを含むドロップダウンが表示されます。
2. コンポーネントからプロパティを選択します。
   • バリアント型プロパティ
   • ブーリアン型プロパティ
   • インスタンススワップ型プロパティ
   • テキスト型プロパティ
3. コンポーネントプロパティ作成モーダルのフィールドとドロップダウンを使用して、プロパティ名とデフォルト値を設定します。
4. [プロパティを作成]をクリックします。
5. プロパティをネストしたレイヤーに適用します。この方法を使用して作成したコンポーネントプロパティは、他のネストしたレイヤーには適用されません。詳細↓

管理

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

既存のプロパティの適用

既存のコンポーネントプロパティは、いつでもネストしたレイヤーに適用できます。

1. メインコンポーネントまたはバリアントにあるネストしたレイヤーを選択します。
2. (オプション、バリアントのみ)をクリックし、マルチ編集を有効にして一致するオブジェクトを編集し、ワークフローをスピードアップします。バリアントのマルチ編集の方法→

3. 右サイドバーで、適用するプロパティのセクションを見つけます。　

4. をクリックしてドロップダウンを開きます。ドロップダウンには、そのセクションに対応する型の既存のプロパティが含まれています。

   • インスタンススワップ: インスタンススワップセクション
   • テキスト: コンテンツセクション
   • ブーリアン: レイヤーセクション

   ドロップダウンではなくコンポーネントプロパティ作成モーダルが表示される場合は、その型のプロパティがコンポーネントに存在しません。コンポーネントプロパティの作成方法↑

5. ドロップダウンからプロパティをクリックして、選択したレイヤーに適用します。アイコンとプロパティ名が付いた紫色のピル(錠剤の形状)が、右サイドバーに表示されます。

デフォルト値の変更

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

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

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

プロパティの切り離し

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

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

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

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

プロパティ

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

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

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

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

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

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

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

 

値

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

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