コンポーネントのプロパティを調べる
コンポーネントのプロパティについて既によくご存知ですか。これらを作成してコンポーネントに追加する方法や、コンポーネントのプロパティのあるインスタンスを編集する方法を確認してください。
コンポーネントのプロパティは、コンポーネントの変更可能な要素です。特定のデザインのプロパティに結び付けることで、他のユーザーが変更できるコンポーネントの一部を定義できます。これにより、次のような点を制御できます。
- 表示または非表示にできるレイヤー
- インスタンスを入れ替えられるかどうか
- 変更できるテキスト文字列
これらの定義は、右サイドバーで単一のコントロールセットに統合できます。インスタンスを編集しているユーザーは、これらのコントロールを使用して何が変更可能かを把握し、編集を行えます。
これにより、個々のレイヤーを選択して上書きする必要がなくなり、文書を参照するために必要な時間が短縮し、コンポーネントおよびデザインシステムの正確な使用率が改善されます。
コンポーネントのプロパティは、ブーリアン型プロパティを使用してデザインシステムまたはライブラリファイルのサイズの縮小にも役立ちます。詳しくはこちら↓
通常のコンポーネントと同様に、その他の文書に説明とリンクを添付できます。これにより、コンポーネントを使用するユーザーは、それらを適用するための正しい情報とコンテキストを入手できます。
プロパティタイプ
コンポーネントのプロパティは、別々のデザインのプロパティに関連付けられます。コンポーネントのプロパティは、すべてのメインコンポーネントまたはコンポーネントセットに対して作成し、コンポーネントまたはバリアントのネストしたレイヤーに適用できます。
コンポーネントのプロパティは次のさまざまなタイプで提供されます。
ブーリアン型プロパティ
注: ブーリアン型プロパティは現在、レイヤー表示にのみ利用できます。
ブーリアン型プロパティを使用して、true/falseの値を設定します。これによりユーザーは属性のオンとオフを切り替えることができます。
たとえば、デザインシステムにアイコン付きのボタンとアイコンのないボタンが含まれている場合、状態ごとにバリアントを作成するのではなく、ブーリアン型プロパティをアイコンのレイヤー表示に適用します。
これはまた、デザインシステムとファイルライブラリのサイズの優れた縮小方法になります。
警告: ブーリアン型プロパティをコンポーネントに適用する前に、インタラクティブコンポーネントまたはプロトタイピングコネクションの必要性をすべて考慮することが重要です。プロトタイピングヌードルは、2つのオブジェクト間を接続する必要があります。2つのコンポーネントを接続し、ブーリアン型プロパティを使用してそれらを統合する場合、プロトタイピングコネクションは失われます。
たとえば、アイコン付きのボタンとアイコンのないボタンの2つの状態を表すボタンコンポーネント内のアイコンに適用されるブーリアン型プロパティがあるとします。単一のコンポーネントを使用しているので、2つの間でのインタラクションを設定することはできません。プロトタイプのインタラクションを2つの個別のオブジェクト間で設定する必要があります。
レイヤー表示のブーリアン型プロパティが作成され、値がfalseに設定された場合、関連付けられたコンポーネントのプロパティはすべて非表示になります。trueに切り替えると、関連付けられたプロパティが表示されます。
インスタンススワップ型プロパティ
インスタンススワップ型プロパティは、メインコンポーネントまたはバリアントにおけるどのインスタンスを入れ替えられるかを示します。インスタススワップ型プロパティの作成時に、ローカルのすべての有効化したライブラリからデフォルトのインスタンス値を定義できます。
このプロパティを使用するすべてのユーザーには、同じコンポーネントサブセット内のものや、すべての利用可能なライブラリからのものについてネストしたアセットを入れ替えるために、インスタンススワップメニューが提供されます。
このコンポーネントのプロパティを含むネストされているインスタンスは、その親コンポーネントの最上位レイヤーでのみ入れ替えることができます。ネストしたインスタンスを選択した場合、別のインスタンスに対してそれを入れ替えることはできません。
入れ替え先のインスタンスを他のユーザーがわかるように、優先するインスタンスを設定する↓
テキスト型プロパティ
テキスト型プロパティを使用して、どのテキストレイヤーを編集する必要があるかを示します。
テキスト型プロパティのデフォルト値を管理しているか、それを含むインスタンスを使用しているかにかかわらず、右サイドバーからまたはキャンバス上でテキストの文字列を編集できます。両方の方向で値が更新されます。
このプロパティが適用されていないレイヤーは更新できます。
注: テキスト型のコンポーネントのプロパティは現在、リストスタイル、スーパースクリプト、他のタイプ設定などのリッチテキストをサポートしていません。これらの設定をテキストレイヤーに引き続き適用できますが、その形式は右サイドバーのコンポーネントのプロパティパネルには反映されません。
テキストレイヤーに箇条書きまたは番号付きリストスタイルが含まれる場合、右サイドバーからテキスト文字列を変更するとリストスタイルが削除されます。これを保持するには、代わりにキャンバスから文字列を更新します。
バリアント型プロパティ
バリアントは、コンポーネントセット内の個々のコンポーネントです。
バリアント型プロパティでは、状態、色、サイズなどのバリアントの属性を定義できます。
コンポーネントセットには複数のバリアントが含まれ、これらのバリアントはバリアント型プロパティで定義できる属性を繰り越します。バリアント型プロパティはバリアントとコンポーネントセットに特有であり、作成することも、メインコンポーネントに適用することもできません。バリアントおよびコンポーネントセットを作成する方法について詳しくはこちら→
以下の例には、4つのバリアントを含むボタンコンポーネントセットがあります。これにはサイズと色の2つのプロパティがあります。サイズの値には小と大が含まれ、色の値には緑と赤が含まれています。
注: コンポーネントのプロパティを適用する前に、既存のデザインシステムを確認することをお勧めします。そうすれば、コンポーネントのプロパティとして反映できる側面と、バリアントにする必要のあるものを判断できます。
ネストしたインスタンスの公開
特定のネストしたインスタンスを公開し、そのコンポーネントのプロパティを最上位インスタンスのものと並べて表示します。これにより、レイヤーを深くまで選択して見つけることなく、デザインシステムユーザーがネストしたインスタンスとそのコンポーネントのプロパティを調べることができます。
たとえば、アバター、名前、ボタンなど複数のコンポーネントを内部にネストしたソーシャルメディアカードコンポーネントを作成するとします。デフォルトのボタンのアイコンを「送信」アイコンに変更し、そのテキストを変更しようと考えています。また、キャンセルボタンの状態を無効状態に変更しようとも考えています。
各レイヤーを深くまで選択してそのコンポーネントのプロパティのコントロールを見つける代わりに、ネストしたインスタンスを公開することにより、最上位コンポーネント(この場合はソーシャルメディアカード)をクリックするだけで単一の場所からインスタンスを編集できます。
公開ネストインスタンスとともに最上位インスタンスを選択する場合、最上位かつネストしたインスタンスのコンポーネントのプロパティのリストが右サイドバーに表示されます。
プロパティ行にマウスカーソルを合わせると、キャンバス上の対応するオブジェクトの周りに薄紫のハイライトが表示されるため、編集している対象がわかります。
注: ブーリアン型プロパティで可視性が非表示に設定されている公開ネストインスタンスがある場合、インスタンスに適用されたすべてのコンポーネントのプロパティも非表示になります。
公開するネストしたインスタンスの選択
メインコンポーネントまたはコンポーネントセットを選択した状態で、右サイドバーの[プロパティ]セクションでをクリックし、[プロパティの公開元]の下の[ネストされたインスタンス]を選択します。
注: ネストしたインスタンスを公開するオプションは、メインコンポーネントが次の場合にのみ利用できます。
- 既に公開ネストインスタンスがある、または
- ネストしたインスタンスを含み、コンポーネントのプロパティが適用されている
[ネストしたインスタンス]オプションが表示されていない場合、まずはコンポーネントのプロパティをネストしたコンポーネントに適用してみてください。
[ネストしたインスタンスを公開]モーダルから、最上位に表示するインスタンスのボックスをオンにします。
ネストしたインスタンスを選択したリストが右サイドバーに表示されます。
ネストしたインスタンスを公開対象から削除するには、このリスト上のインスタンス名にマウスカーソルを合わせ、をクリックします。
優先値
優先値は、インスタンスを入れ替えるときの選択元になる選別されたコンポーネントセットを(インスタンススワップ型プロパティで)作成できます。どの特定のコンポーネントが既存のものを置き換えることができるかを知らせることにより当て推量を減らします。
たとえば、インスタンススワップ型プロパティを持つアイコンボタンを作成して、アイコンを入れ替えられることを示します。ただし、アイコンライブラリには100を超えるアイコンが含まれますが、そのうち8つだけをこのボタンに使用する必要があります。
これらの8つのアイコンを簡単に見つけてどれが使用できるかを把握するには、これらを優先値として追加します。これでデザイナーは、アイコンを入れ替えようとするときにはいつでも、使用できることがわかっているアセットの選別されたリストを得られます。
優先値を持つコンポーネントを使用する場合、優先値のリストはインスタンススワップ型プロパティメニューを開くときにデフォルトで表示されます。
注: 優先値を使用しない場合はドロップダウンをクリックするか、リスト上の検索バーを使用して利用できるものから他のコンポーネントを見つけます。
追加および削除
- インスタンスの優先値を追加するには、まずは既存のインスタンススワップ型プロパティを編集するか、新しいものを作成します。それぞれのモーダルから、[優先する値]セクションでをクリックし、優先値として含めるインスタンスの横にあるチェックボックスをオンにします。
- モーダルの[優先値]セクションで、値の横にあるをクリックして優先値をいつでも削除します。
簡素化したインスタンス
インスタンスを簡素化すると、コンポーネントのプロパティを適用せずにレイヤーを非表示にすることにより、レイヤーとプロパティパネルでの乱雑さを軽減するのに役立ちます。Figmaでは、コンポーネントのプロパティのないレイヤーは編集すべきでないレイヤーであるため、非表示にすることのできるレイヤーであると想定しています。
代替: コンポーネントのプロパティが適用されないレイヤーの名前を非表示にすることにより、レイヤー(およびプロパティ)パネルにおける乱雑さを軽減するようにインスタンスを簡素化します。
注: 簡素化されたインスタンスでは、特定のレイヤー名が非表示になりますが、編集可の権限を持つすべてのユーザーは引き続きレイヤーを編集できます。
インスタンスを簡素化するには、コンポーネントまたはコンポーネントセットを選択し、右サイドバーでをクリックします。ポップアップから、[インスタンスをすべて簡素化]チェックボックスをオンにします。
簡素化されたコンポーネントのインスタンスを使用する場合、過剰なレイヤーは、[すべてのレイヤーを表示]の下に折り畳まれます。[すべてのレイヤーを表示]をクリックすると展開してレイヤーが表示されます。レイヤーパネルの外側をクリックするか、別のレイヤーを選択すると再度折り畳まれます。
