FigmaのComponent propertiesとVariantsの使い分けの考察
今回は2022年5月11日に公開されたFigmaの新機能「Component properties」の使い方を検証しつつ、類似する既存機能「Variants」との使い分けについて考察してみます。自由研究形式で追記しながら記事を更新しています。
※ この記事内で扱っている情報は公開されたばかりのものですので、今後のアップデートで変更される可能性がある点ご留意ください。
この記事のターゲット
FigmaのComponent propertiesについて情報収集している方
FigmaのVariantsを利用したコンポーネントの改修を検討している方
Component propertiesとVariantsの概要
Component propertiesは、既存のVariantsプロパティに加えてComponent内のオブジェクトについて、Instance swap（Instanceの切り替え）・Boolean （表示/非表示）・Text（テキストの値）をそれぞれ独立したプロパティとして扱うことができるようになった機能です。
これまでComponent内で表示する要素や種類や表示の有無といった差分を個別にVariantsとして表現していたものが、Componentのプロパティ（共通変数）としてVariantsから独立して指定・保持できるようになります。これにより、Variantsとして用意する組み合わせを大幅に省略することができます。詳細は後述しますが、この点は生産性を向上する上で重要な効果があります。
また、これまでのVariantsはComponent propertiesのいちプロパティとして継続して利用することができます。
Componentの基本的な使い方や実践例については以下の記事も参考にしてください。
Figmaのコンポーネント機能の基本的な使い方
今回は、Figmaの最も基本的な機能の一つであるコンポーネント（Component）の使い方を解説します。コンポーネントの使い方を知っているのといないのとでは、デザイン作業の効率が数十〜数百倍変わってくるほど非常に重要な機能です。 ...
Component propertiesの使い方
Component propertiesには現在以下の種類があり、それぞれ適用方法が若干異なります。
Instance swap（Instanceの指定）
Boolean（レイヤー表示のOn/Off）
Text（テキスト値の指定）
Variants（その他のバリエーション）
より詳しい使い方は、英語ですが公式のチュートリアルが公開されていますので、気になる方は以下のリンクから参照してください。
Component Properties Playground（Figma Community）
Instance swap（Instanceの指定）
Component内で使用している別のComponentのInstanceを指定できるようにするプロパティです。
主にアイコンの切り替えやステータスラベルの切り替えといった複数パターン存在する単一コンポーネントの置き換えに利用します。
手順は次のとおりです。
Instance swapを適用したいオブジェクトが含まれるComponentを選択する
Instance swapを適用したいオブジェクトを選択する
右プロパティのInstanceのセクションの右端の菱形に矢印が刺さったようなアイコン（Apply Instance swap property）をクリックし、メニューから「Create property...」をクリック
すでに作成済みのプロパティを選択するとそれがそのまま適用されます
プロパティ作成のダイアログが開くので、プロパティ名とデフォルトで指定するInstanceを設定して「Create property」をクリック
Boolean（レイヤー表示のOn/Off）
Component内に存在するオブジェクトの表示/非表示を切り替えられるようにするプロパティです。
主にアイコンの表示・非表示や、ステータスに応じて表示・非表示が変わる要素の制御などに利用します。
Booleanを適用したいオブジェクトが含まれるComponentを選択する
Booleanを適用したいオブジェクトを選択する
右プロパティのLayerのセクションの右端の菱形に矢印が刺さったようなアイコン（Apply Boolean property）をクリックし、メニューから「Create property...」をクリック
すでに作成済みのプロパティを選択するとそれがそのまま適用されます
プロパティ作成のダイアログが開くので、プロパティ名とデフォルト値（True が表示、Falseが非表示）を設定して「Create property」をクリック
Text（テキスト値の指定）
Component内に存在するテキストの値を指定するプロパティです。
主にVariantsを利用する際に、レイヤー構造上改装が異なるものの共通のテキスト文言を利用したい箇所に適用し共通化することで、Variantsを切り替えた際に値を明示的に継承したい場合などに利用します。
Textを適用したいテキストオブジェクトが含まれるComponentを選択する
Textを適用したいテキストオブジェクトを選択する
右プロパティのContentのセクションの右端の菱形に矢印が刺さったようなアイコン（Apply Text property）をクリックし、メニューから「Create property...」をクリック
すでに作成済みのプロパティを選択するとそれがそのまま適用されます
プロ パティ作成のダイアログが開くので、プロパティ名とデフォルト値（任意のテキスト文言）を設定して「Create property」をクリック
Variants（その他のバリエーション）
Component propertiesからVariantsを追加することができるようになっています。
現在はComponent内の色・フォント・サイズの差分をComponent propertiesで表現できないため、これらを表現する必要がある場合はこれまで通りVariantsを使用します。
Variatnsを追加する手順は次のとおりです。
Variantsを追加したいComponentを選択する
右プロパティのPropertiesのセクションの右端の＋アイコンをクリックし、メニューから「Variant」をクリック
Variant作成のダイアログが開くので、プロパティ名とデフォルト値を設定して「Create property」をクリック
Variantを追加すると紫色の点線フレームで囲われます。Variantをさらに追加したい場合は、フレーム内でVariantをコピーするか、紫色のフレームを選択すると下側に表示される紫色の＋アイコンをクリックすることでも追加できます。
Component propertiesとVariantsの使い分け
基本的にComponent propertiesで表現できることはVariantsで表現可能です。
その逆については、色・フォント・サイズなどの差異を現状Component propertiesで表現できないため、一部はComponent propertiesに置き換えられても一部はVariantsを使い続ける必要があります。
それだけ聞かされると「Variantsだけでいいんじゃね？」と思われるかも知れませんが、Component propertiesに置き換えるメリットとしては、アイコンの置き換えなどの一部のUIがプロパティのUIで選びやすくなるほか、Variantsの数を減らすことでライブラリおよびファイル内のメモリを節約しFigmaアプリのパフォー マンスを改善する効果があります。
巨大なコンポーネント・ライブラリを運用しているほど、ファイルがどんどん重くなって動作が不安定になることも多々あり、こうしたパフォーマンス改善の積み重ねが生産性に直結しますので、利用しない手はないように思います。
