【2024最新】FigmaのComponent property完全理解

2023から新しくなったコンポーネントプロパティですが、最新版の記事がほとんどなかったので新しく作ります。

コンポーネントプロパティとは？

新しく設定できるプロパティは以下です。

バリアント
ブール値（表示非表示を切り替える）
インスタンスの入れ替え（コンポーネントから生成されるもの）
テキスト

それぞれの中身を少し解説

まずは4つのプロパティの内容に関して少し解説します。

バリアント

バリアントは主に複数のタイプ/モードがある場合の切り替えに使います。プロパティを切り替える際はドロップダウンで行うことになります。
ただ、2つしかない時はTrue/FalseもしくはOn/Offをいれておけばトグルで切り替えることができます。

いちばん上にあるFillこれがバリアントで作っているトグルです。
中身は塗りか線かを切り替えるものです。

ブール値

ブール値は表示、非表示を切り替えるものです。
主にはボタンのアイコンを表示したり、非表示にしたり。

レイヤーのHasDateをブール値で管理してます。
ブール値をレイヤーに割り当てることでTrue/Falseを切り替えることができます。

切り替えはトグルで行えます。

レイヤーにしか適応できないため、ボタンの線の表示/非表示や、塗りのOn/Offはできないのでそれを見越したコンポーネントを作成していかないと行けない。

インスタンスの入れ替え

インスタンスを入れ替えれるようになってます。
例えばボタンのアイコンを違うものに切り替えたい時に使用します。

基本的には切り替えたいインスタンスにプロパティを割り当てるだけで完結です。

テキスト

プロパティで切り替えたいテキストに割り当てるイメージでOK。

このようにテキストにプロパティを割り当てます。

そうすると、

右側のプロパティパネルでLabel『BBB』と記載されている箇所でテキストを変更できます。

ボタンの他にも、インプットフォームのplaceholderの値に割り当てたり、ラベルを変更したりさまざまな使い方があります。

これらの4つのプロパティは実務でかなり使います。
マスターしておくといいと思います。

少し高度なコンポーネントプロパティ

新しく作成しているコンポーネント内に他で作ったコンポーネントのインスタンスがあればネストされたインスタンスと表示されます。

これを設定しておくことでネストされてるプロパティを継承して変更することが可能です。しっかり構築をしておけばかなり便利に使うことができます。

構築のTipsは具体的にはこのような感じ。

複数のインスタンス（コンポーネントから生成されるもの）をネスト（入れ子）された状態です。

各コンポーネントセットを作るときに、プロパティで

ネストされたインスタンスを選択すると、ネストされてる要素をチェックボックスで選択することができます。

こうすることで、

ネストされてる要素のプロパティを上位の要素で一括で設定することができるため、ほぼ全ての要素をコンポーネントで管理するメリットがあると感じます。

注意点

ネストしている全ての要素の設定を上位のインスタンスで管理できるのはすごく良いが、プロパティの設定項目が多すぎると煩雑な管理になってしまう。コンポーネントセット、プロパティを効果的に使い煩雑にならないような管理方法を考えなければ行けない。

ここはチームに合わせて管理方法を柔軟にしていくべきだと思います。