Figma の Component Properties を改めて整理する

こんにちは、UIデザイナーの水澤です。

以前の記事では、ステートの切り替えができるコンポーネントの作り方を紹介しました。Figma では Variants 機能を使うことで実現できます。

コンポーネントのプロパティ設定は元々 Variants のみでしたが、Figma Config 2022 で Component Properties が登場し、 Variants を含む複数のプロパティ設定が可能になりました。

新たに追加されたプロパティ設定の一部は Variants で対応できるものもあり、当初の自分はなかなか使い分けを理解しにくいと感じていたのですが、それから現在まで実際に使用してみてある程度の理解を進められました。

今回は改めて Component Properties について整理し、当時との差分を振り返ってみます。

Component Properties の中身

現在は以下のタイプを設定できます。

• Variant
• Boolean
• Instance swap
• Text
• Nested instances

Variant

状態・カラー・サイズなどの属性のバリエーションを定義できます。
Component Properties に吸収された後もできることは同じため、割愛します。

Boolean

レイヤーに対して表示／非表示の切り替えを定義できます。

この設定は Variant でも定義できるものですが、Figma Learn では Component Properties について「コンポーネントおよびデザインシステムの正確な使用率が改善されます」としているため、（Boolean に限らずですが）プロパティを使い分けた方が使用率は圧迫されにくいようです。

参考：コンポーネントのプロパティを調べる（Figma Learn）

Instance swap

親コンポーネント、あるいは子コンポーネント（＝インスタンス）内で使用しているインスタンスの入れ替えができます。

内容そのものは Component Properties が登場する前からできることですが、そのためにはその都度差し替えたいインスタンスを選択する必要がありました。

差し替えたいインスタンスを Instance swap として適用しておくことで、下層にあるインスタンスを選択することなく、そのインスタンスを含むコンポーネントを選択すれば 右サイドバーの properties エリア からいつでも差し替えができます。

下記の画像ではレイヤー階層がシンプルなボタンをサンプルにしているため、際立った恩恵は感じにくいかもしれませんが、特に階層が複雑なコンポーネントで便利さを感じられます。

Text

テキストレイヤーを指定し、変更する文字列を定義できます。Component Properties がなかった頃は直接テキストレイヤーを選択して編集するしかありませんでした。

Text のメリットは Instance swap と似ています。編集可能性のあるテキストレイヤーを Text として適用しておくことで、そのテキストレイヤーを含むコンポーネントを選択すれば properties エリア からいつでもテキストを編集できます。特に階層が複雑なコンポーネントで便利なプロパティです。

Nested instances

こちらも Instance swap, Text と似たメリットがあります。コンポーネント内に Component Properties が設定されたインスタンスがある場合、そのプロパティを編集するには該当のインスタンスを選択する必要がありましたが、その手間を省くものです。

Nested instances を適用しておくことで、該当のインスタンスを選択しなくてもそのインスタンスを含むコンポーネントを選択すれば、インスタンスのプロパティも合わせて編集可能になります。

おわりに

個人的に気になっているところでは、今までコンポーネントのデータを作る＝コンポーネントの表示パターンをすべて網羅できていたのが、Boolean の登場によってそうとは限らなくなった点があります。
Boolean の活用によって指定したレイヤーの表示／非表示パターンを両方作る必要はなくなりましたが、開発者に共有するために別途表示パターンを作る必要があると考えています。

また、上記はデザイン制作時のメリットをまとめましたが、Component Properties を設定すると Dev Mode の Props に設定したプロパティが表示されます（参考：エンジニアにはDevモードのココを見てほしい、Figmaのコンポーネント）。開発者にバリエーションや構造を把握してもらうためにも、今後も Component Properties を積極的に活用していきます。