FigmaのComponent Propertiesを使ってボタンコンポーネントの限界に挑む
Figma Config2022の更新ではたくさんの新機能が搭載され、私もすべてをトライしていないのですが、先日の記事の通り、ボタンのアイコンをスワップすることすら以前は苦悩していましたが、Component Propertiesを利用するとすごく楽になりそうです。今回トライするのは
「ボタンコンポーネントのインスタンス、いちいちダブルクリックで色やアイコンやテキスト変えるのいいかげんめんどくさいので、右のデザインパネルでサクッと変更できるようにする」です。
なおこちらの機能は、ふじけんさんのnoteで学習させていただきました。ありがとうございます！
Component Propertiesで変更できるもの
Component Propertiesで変更できる要素は以下の３種類しかありませんが、それぞれ命名できるので、複数あっても大丈夫です。
・テキストの内容
・アイコンなど、内包されているコンポーネントのスワップ
・Boolean。TrueかFalseしかありません。今のところ、表示非表示にしか使えないようです。
まずは要件定義をします
スマホサイトを想定しています。
今回必要なボタンは：
・スタイルは、デフォルト、ゴーストボタン（サブ）、非活性の３種類。
・機能は、編集、削除、コピーの３種類必要なため、３つのアイコンを用意。背景が変わっても大丈夫なようにグレーと白の２種類を作成。
・アイコンがないボタンも一応欲しい。
・ボタンの大きさは２種類。固定幅のタイプ（大きいボタン）と、テキストの長さによって変動するタイプ（小さいボタン）。
これらを、それぞれプロパティとバリアントに振り分けて設定、作成すればOKということになります。
プロパティは機能や要素。バリアントはデザインスタイルのバリエーション。と覚えれば概ね問題ありません。ただ、コンポーネントの階層設定の意識も必要です。
Variants
・ステータスは、default, ghost, disabledでそれぞれ色を変える
・disabledはドロップシャドウを無くす
・大きさは、可変幅と、固定幅。
Component properties
・テキスト
・機能別に必要なアイコンのスワップ
・アイコン表示非表示
それでは作成を始めましょう。
1．先に必要なアイコンのコンポーネントを作ってしまいます。
これは前回と同じです。後でもいいですが、先にやっちゃうと楽かもしれない。
アイコンは３種類、今回はボタンの色が濃淡あるので、白とグレーの２種類を作成します。
それぞれに階層のあるコンポーネント名をつけて、コンポーネント化します。
icons/edit/white など。※コンポーネントの階層は考え方次第なので、お好みで。
2．デフォルトのボタンを一個作りComponent Propertiesを設定します
とりあえず、可変幅のデフォルト色ボタンを作成します。
こちらに、先にプロパティを設定してしまいましょう。設定するのは：
・可変テキスト
・アイコンの表示非表示
・アイコンのスワップ
これらを、それぞれ
・Text（テキスト。コンポーネント内のテキスト内容が変更可能）
・Boolean（ブーリアン。真偽の２択のみが返されるので表示非表示に使う）
・Instance Swap（インスタンススワップ。インスタンスの差し替えが可能）
に振り分けます。
やり方としては、２通りありますが、まずはこちらの方法から。
先にコンポーネントに対して必要なプロパティを全部設定する
コンポーネント全体を選択して、必要な分だけプロパティを作成しそれぞれの名前をつけます。
ちなみに要素にテキストエリアが３つあったら３つプロパティを設定することもできます！なのでわかりやすい名前をつけた方がいいですね。
Boolean
Instance swap
Text
この状態だと、右側に「！」アイコンが出ていると思います。
このままだと使用できませんので、コンポーネント内のそれぞれの要素を選択して、「紐付け」を行います。
テキストを選択肢、右パネル「Content」の横に矢印からTextプロパティを選択。（設定した名前が出ます）
アイコンを選択肢、Layerの横の矢印からBooleanプロパティを選択。
アイコンを選択したまま、アイコンコンポーネントの横の矢印から、Instance Swapプロパティを選択。
プロパティの設定ができました！
もうひとつのやり方があります。それは、さきほどコンポーネント全体を選んでプロパティを設定しましたが、コンポーネント内部の要素を選択した状態から、プロパティをいきなり割り振る方法もあります。初見だと３つのプロパティのタイプのどれに該当するかわかりにくいので、最初はあまりおすすめしません。
この状態だとまだデザインの変更ができませんので、このコンポーネントからVariantsを作っていきます。
3.Variantsを作成する
先ほどのコンポーネントにPropertiesを追加した時、Variantという項目があったと思います。
今度はそれを選択します。すると一個しかコンポーネントがなくても、Variantsが作られます。これは厳密にいうとバリアントではないので、これからバリアントを追加していきましょう。
この時点でコンポーネント名がスラッシュで区切られていれば、通常のバリアント作成と同じように、左パネルで名称が綺麗に分かれます。（分かれてなかったら後からつけても問題ないです）
この状態から、紫色のプラスのアイコンをクリックしていくと、プロパティが引き継がれたバリアントが作成されます。
まずは幅可変ボタンを３パターン作ってみる
ではVariantを２つ作ってみます。
作成する度に右デザインパネルでコンポーネント名をつけなおせるようカーソルが自動移動してくれますので、この機会につけてしまうと楽です。今回は2階層のVariantを作りたいので、１階層目はボタン幅、２階層目をスタイルにしています。
autoは可変幅の意味。この３つは同じ幅なので、これは統一で。
defaultはスタイル名です。これは３つとも変更します。今回はghostはゴーストボタン風（キャンセルなどに使う想定）、disabledは押せない時のデザインなので淡いグレーです。
ボタン幅にバリエーションが要らなければ、プロパティautoは必要ありません。
なお、アイコンのカラーですが、この時点で変更できないようなので、現在白で統一しています。変更できないとスタイルガイドに載せられないのでちょっと困惑中です。引き続き調べます。
この後「幅固定ボタン（大きめ）」を作りますので、また３つ複製します。
こちらは幅を「Fixed」に変更しWにお好みの数値を入れ、スタイルを設定して名前変更します。
Variantsができました！
念の為、Component propertiesも適用されているか確認してみましょう。
適用されていますね！要素を選択した時に右パネルに紫のテキストアイコンが出ていれば、設定完了です。
では、こちらのVariantsから、インスタンスを一個作って、右デザインパネルを見てみますと…
設定項目がずらり。
変えたい放題だーッ！！！パーリータイム！！
これは楽しい。
Variantは後からでも足せるので、サイトが大きくなってもさほど問題はなさそうですが、時々何かがきっかけてコンポーネントが崩れてしまうのはよくある話…。
Figmaのバックアップ機能も活用してうまくやっていきましょう！！
他に使えそうなケースは？？
・フォームの状態変化
・ブログサイトのカード要素（同じものだけだとクライアントがイメージできないなどの時）
・ECサイトなどのそれぞれのアイテム（これもバリエーションを持たせるため）
・タブで状態変化（currentタブに色がついたり）するもの
・グローバルメニューでアイコンがあったりなかったりするもの
特にテキストの入力がかなり楽になると思います！
ぜひ活用して、楽に作業しましょう〜。コンポーネントの中身をダブルクリックで変えていくのは、骨が折れますもんね。
Booleanはお気に入り追加前、追加後、などに使えそうですね。
難点と感じたのは、
アイコンの色変更は、Booleanではないこと。Booleanを使うと表示非表示になる。あくまでもSwapで表現しなければならない。その代わり、アイコンのコンポーネント名にon/offが入っていると、右ウインドウではトグルボタンで表現されるので、活用されたし。（この自動機能は本当にすごい気が利いてると思います）
Figma、改めてすごいなあ。そしてすごくデベロッパー寄りですよね。コーディングしたことある人だと「わかるわかる」って感じです。