見出し画像

[ Figma -Nested instances- ]コンポーネントのネストインスタンスのプロパティ変更

未経験から独学でUIデザイナーを目指している初学者です🤓
今日は、心躍る機能(Nested instances)を発見した為ここに綴ります。


コンポーネント内のインスタンスのproperties変更は大変だった

コンポーネント🐓で使用しているインスタンス🐣(ネストされたインスタンス)にComponent propertiesを設定していても、コンポーネント🐓からはインスタンス🐣のproperties の内容を右のパネルで変更できません。

インスタンス🐣のproperties の内容を変更するには、わざわざ該当のインスタンス🐣まで階層を降って行かなくてはなりませんでした。

しかし、Nested instancesを使うとネストされたインスタンス🐣のComponent propertiesをコンポーネント🐓に取り込み、
上層のproperties🐓も下層のproperties🐣も同時に右のパネルから変更できるようになります!

Nested instancesの使い方

①,コンポーネントを用意する

Combine as variantsしたものを用意

②,①を内包したコンポーネントを用意する

①のTagを内包したText Fieldコンポーネント

③Properties横の+プラスボタンを開いて、Expose properties fromの
Nested instancesをクリックする

Nested instancesをクリック

④ネストされたインスタンスのComponent propertiesを選択する

Tagを取り込みたい

以上です!!

Text FieldコンポーネントからTagの選択ができるようになった!

感想

レイヤー階層が深いコンポーネントが増えてくると下層までカチカチクリックするのが大変でしたがNested instancesのおかげで解決できそうです!
まだあまり使いこなせていませんが、柔軟なコンポーネントを作れるように
引き続き勉強に励みます!!

この記事が気に入ったらサポートをしてみませんか?