FigmaのSlot機能のおススメの使い方
ついにリリースされました、Figmaのスロット機能！私が待ち望んでいた機能なので、リリースされたその日から使い始めました（笑）。
中には「どう使うの？何に使えるの？変数とどう違うの？」という声も聞くので、私のおすすめの使い方をいくつか例を挙げて記載してみたいと思います。
スロット機能は、現在のコンポーネントをデタッチせず、内容を増減することができる機能です。
ダイアログ・モーダルのコンポーネントを例に説明します
今までは、ダイアログ（モーダル）にフォームなどを入れるとき、全てのフォームコンポーネントを載せてから、表示のOn/Offを行っていましたが、それだとものすごい量になってしまうので、必要な分のモーダルをバリアントで用意したりしていました。
それだと仕様はわかりやすいですが、バリアントが増えすぎて見辛く、作る側としては綺麗に管理できているとは言えません。また、コンポーネントのプロパティが多くなりすぎて、ストレス倍増です。※私はFigmaは仕様書ではない！と思っているので、仕様を説明する場合はデザインをコピーして別のページで説明することが多いです。
また、泣く泣くデタッチしていたこともありますが、デタッチしてしまうと、ダイアログのpaddingを変更したいなどの時に手作業で全てのダイアログを見て回らなければなりません。
例えば、こんなダイアログコンポーネントを作ったとしましょう。実際にあった話です。
このようなダイアログがあったとき、もし表示非表示で差分を作っていると、プロパティがえらいことになってしまいます。
しかし、スロットを使用すると、背景の半透明のオーバーレイも含めて、デタッチせずに中身を足すことができます。（引くこともできますが、足していく方が楽かもしれません）
スロットの作り方
スロットに変換できるのは、フレームかグループのみです。ここで、フレームを選び、オートレイアウトを適用しておくと追加した時に自動的にgapの値分間隔が空くので、とても楽に配置ができます。
スロットには、追加をしたいコンポーネントの候補を設定しておきます。設定しなくても選べますが、1から選ぶことになり非常に効率が悪くなるため、候補の設定をお勧めします。
使う時は、このコンポーネントを呼び出すと、ピンクの枠が表示され、ダブルクリックすると追加方向にプラスのアイコンが出ます。ここで追加候補を選択します。
ちなみに削除はdeleteキーでいくらでも一発で削除可能です。スロット内全部消せます。
スロット機能でできないこと
スロットの入れ子はできません。
スロットに入れるコンポーネントにあらかじめスロットがある場合は別です。こちらは有効になります。
スロットにするととても便利なコンポーネント
最初にダイアログを挙げましたが、以下のコンポーネントもとても楽に増減できるようになるので、いつも苦しんでいる方にお勧めします。
ラジオボタングループ
ラジオボタンを単体で使うことはまず無いので、ラジオボタングループにして使用しますよね。
ある箇所では選択肢が３つあり、曜日選択だと７つになり、と増減するため、ラジオボタンにはすぐに使用しました。
チェックボックスグループ
チェックボックスは単体は別のコンポーネントとして使用しており、複数の選択の場合は上と同じくグループにして使っています。（その方がセマンティックなHTMLと言えるので）特に選択肢が多くなることも考えられやすいフォームパーツなので、スロット必至です。
メニュー
特にフロートしているメニューの場合、外側を囲んで角丸をつけたり、シャドウをつけたりしますね。そのため、内容の増減になるべく柔軟に対応させるため、こちらもすぐにスロットにしました。
データテーブル
データテーブルのセルの中の値がシングルの場合、増減はなくスワップインスタンスで対処できますが、タグが複数入る、データが複数入ることも多いので、スロットにしました。
タブ
タブが毎回２〜３個で済むシステムなら問題ないのですが、２〜６個となると流石に表示非表示が面倒ですよね。こちらもスロットが有用です。
つまり、SaaSのような、大規模なデータを取り扱うサービスサイトにはぴったりの機能になります！
いつも頭を抱えていたデータの増減も、素早く表現して簡単にクライアントに見せられるようになりますね。
問題は「コンポーネントのバリアントで仕様が把握できない」という苦言もありそうですが、そちらはバリアントがかなり増えるようであれば、別ページに仕様としてまとめる方が便利なのではないかなと個人的には思っています。
ダイアログの種類などは、大きなシステムだとかなり多数になる可能性が考えられます。