コンポーネントの中身を自由に差し替え可能なFigmaの新機能「スロット」を使ってみた

Figmaの新機能である「スロット」（執筆時点でオープンベータ版）が、自分の環境にデプロイされたので使ってみました。

事前の情報通り、モーダルダイアログのヘッダーやアクション部分は固定化できるけど、コンテンツ部分が場合によって変わりすぎるとか、ドロップダウンメニューやタブなど使う場所によって個数が違いすぎて結局個別管理になってしまう…といった課題をまるっと解決できそうな機能ですね。

スロットとは？

ざっくりいうと、“自由に中身を差し替え可能な領域”をつくる機能で、コンポーネントの大枠は維持しつつ、中身を自由に編集できるようになります。

例えばドロップダウンメニューだと、使う最大数のメニュー項目を準備してブーリアンプロパティで表示非表示を制御するやり方か、インスタンススワップ用のスロットを用意して別途準備したコンポーネントを入れ替えるというやり方だったかと思います。

しかし、いずれの方法にも課題がありました。ブーリアンやバリアントでは、パターンが増えるほど内包するコンポーネント数が爆増し、非表示のデータが大量に残ります。インスタンススワップは柔軟性があるものの、差し替え先がコンポーネントインスタンスに限定されるため、そこでしか使わないコンポーネントをわざわざ作成する必要がありました。

そして耐えきれなくなり、コンポーネントをデタッチして、編集するというジレンマ……

スロットを使うことで状況に応じて内容を構成できるため、ブーリアンプロパティでの制御も無駄なコンポーネント化もデタッチも不要になるのです。もはや神。
さらに概念としては、ReactのchildrenProps（やVue.js・Web Componetnsの<Slot>）と同じとのことで、実装側とのやり取りがスムーズになりそうです。

スロットのつくり方

コンポーネントの中にフレームを作成します。

インスペクタで「スロットに変換」を選択します（ショートカット: cmd + shift + s）

オートレイアウトやパディングを必要に応じて変更します。また初期値としたいコンテンツを配置しておけます。

コンポーネント内に複数のスロットを作成できますが、スロットの中にスロットは作成できません。ただしスロットを持つインスタンスはスロットへ入れることが可能です。

また「優先されるコンポーネント」を指定できるので、よく使うコンポーネントがあれば指定しておくと良いでしょう。あくまで「優先」なので、コンポーネントを指定してもそのコンポーネント以外も自由に入れられます。

スロット用のコンポーネントプロパティを、フレームを作成する前に定義しておくこともできます。フレームを作成・設定し、インスペクタからバインドしましょう。

スロットの使い方

まずはコンポーネントを配置した上で、必要なオブジェクトを入れていきます。

コンポーネントを検索して入れたい

インスタンスに表示されている［＋］アイコンをクリックすると、コンポーネントを選択するドロップダウンメニューが開きます。

「優先されるインスタンス」を設定している場合は、ここで表示されます。

ただし、スロットへすでにオブジェクトが存在する場合は［＋］アイコンは表示されず、スロットのレイヤーを選択して表示されるマゼンタの赤丸にカーソルを合わせる必要があります。（筆者の環境では拡大率を113%以上にしないと表示されませんでした。環境によって異なる可能性があります）

またインスペクタのコンポーネントプロパティのスロットでマウスオーバーで表示される［＋］アイコンをクリックしても、同様にコンポーネントを選択できます。

任意のオブジェクトを入れたい

オブジェクトがコンポーネントであるかどうかに関わらず、次の方法でスロット内へ配置できます。

• オブジェクトをスロットの枠へドラッグ＆ドロップする
• コンテンツをコピー後、スロットレイヤーを選択してペーストする
• スロット内へ直接描画する（長方形やテキストレイヤーなど）

初期状態に戻したい

インスタンスをリセットするか、スロットのレイヤーを選択して「スロットをリセット」をクリックします。

使ってみた所感

まだ少し触っただけですが、冒頭で例を挙げた通りモーダルダイアログやドロップダウンメニューなど、次のようなシチュエーションで効果を発揮しそうです。

• 一部固定＋内容可変型: モーダルダイアログ・サイドバーなど、ヘッダーやフッターといった一部は固定だが、内容が大きく変わるもの
• 同一構成＋個数可変型: ドロップダウンメニュー・タブ・テーブルなど、同じコンポーネントを繰り返し使うが、数が変動するもの

Figma MCPでの扱い

Claude Code（Sonnet 4.6）で、新しいスロットと擬似スロットをそれぞれ使ったコンポーネントをshadcn/uiベースで実装をしてもらい、違いを聞いてみました。

新しいスロットを使っているものはget_design_contextで返される情報において、スロットを使用している箇所の内部情報もすべて開示されるため、すべてのスタイルが正しく伝わるようです。

従来のインスタンススワップによる擬似スロットの場合、MCPから返されるのはスロット用コンポーネント自体の情報であり、その内部情報は開示されません。そのため、メタデータ＋スクリーンショットからの実装となり、細部のスタイルが抜け落ちる可能性があるようです。（これもしかして、インスタンススワップ使わないほうが良かったりするかもなので要検証）

まとめ

とりあえず従来機能との違いをまとめてみました。

自由度が格段に上がったため、より設計力が問われることになりました。
統制を効かせたい部分と自由に編集できる部分を見極めつつ、さらにはバリアントやインスタンススワップの使い分けも考慮に入れて設計するって、なかなかシビれますね。

公式ブログにも書かれていることでもありますが、ひとまず次のルールを課して運用していこうかなと思っています。

• 適切なスロット名をつける
• 「優先されるインスタンス」があれば適切に設定する
• スロットだけ配置するのではなく、例となるコンテンツをデフォルトで配置しておく

あなたの環境にもデプロイされたら、ぜひ使い方を共有してください！
それでは素敵なFigmaライフを！

参考リンク:
https://www.figma.com/blog/supercharge-your-design-system-with-slots/