デタッチ、もうしなくていいかも
「このカードにもう1個ボタン足したいんだけど、コンポーネントが対応してない……デタッチするか……」
Figma使ってるデザイナーなら、たぶん全員やったことあると思います。で、デタッチした瞬間にデザインシステムとの接続が切れて、あとから本体を更新しても反映されない。わかってるけどやるしかない、みたいな。
この長年のモヤモヤに対して、Figmaがようやく機能を出してきました。
それが Slots（スロット）機能 です。
2025年11月のSchema 2025で発表されて、2026年3月からオープンベータとして順次使えるようになっています。
そもそもスロットって何？
ざっくり言うと、コンポーネントの中に「ここは自由に中身を入れ替えていいよ」というエリアを作れる機能です。
今までのFigmaだと、インスタンスの中にレイヤーを追加したり並べ替えたりすることはできませんでした。リストの項目数を変えたいだけなのに、わざわざデタッチしたり、あらかじめ非表示レイヤーを10個くらい仕込んでおいたり、項目数ごとにバリアントを量産したり……。
スロットを使うと、インスタンス内のスロットエリアにテキストでも画像でもインスタンスでも、好きなものを追加・削除・並べ替えできます。コンポーネントとの接続は切れません。
エンジニアにはおなじみの概念
フロントエンドにはすでにだいぶ前からSlotの考え方があるらしく、Reactの children やVue.jsの <slot> にあたるらしいです。エンジニアと話すときに「ここスロットにしてます」で通じるようになるので、ハンドオフもだいぶ楽になるはずです。
スロットの作り方
フレームをスロットに変換する
コンポーネントの中にあるフレームを選んで、右クリック → 「スロットに変換」（Convert to slot）でフレームがスロットになります。
既存のレイヤーをまとめてスロットにすることもできます。
テキストやグループ、インスタンスなどフレーム以外のものをスロット化したい場合は、対象を選んで右クリック → 「新しいスロットで囲む」（Wrap in new slot）で選択したものがスロットの中にまるっと入ります。
ショートカットは ⌘⇧S（Mac）/ Ctrl+Shift+S（Windows）で、右パネル（インスペクタ）のボタンからでもいけます。
右パネルから追加
メインコンポーネントを選んだ状態で、右パネルの 「プロパティ」 セクション（Properties）からスロットプロパティを追加する方法もあります。先にプロパティだけ定義しておいて、あとからフレームに紐づけるパターンです。
スロットの設定
作ったスロットは、右パネルの 「プロパティを作成」（Edit slot property）から名前や説明を設定できます。
「優先されるインスタンス」（Preferred instances）を設定しておくと、スロットにコンテンツを追加するときに候補として優先表示されます。「ここにはこのコンポーネントを入れてね」というガイドを仕込めるわけです。設定したスロット内のコンポーネントは並べ替えも削除もできます。
インスタンス側の操作
スロット付きコンポーネントのインスタンスを配置すると、プロパティに ＋ボタン が出てきます。これをクリックするとコンポーネント一覧が出るので、入れたいものを選びます。
優先設定したコンポーネントの他にもコンポーネントは選択できます。
どこで使うと効くか
繰り返し要素があるコンポーネント
テーブル、リスト、タブ、フォームあたりが典型です。
今まではリスト3項目版、5項目版、7項目版……みたいにバリアントを増やすか、非表示レイヤーを山ほど入れておくしかなかった。スロットなら、使う側が必要な数だけ項目を足せばいいのでだいぶ楽になります。「いくつになるかはわからないけどとにかく数がはいる」とか「追加されるコンポーネントが特定できないがなにかしらはいる」みたいな場合に使用するのがいいです。
レイアウトの自由度が高いコンポーネント
モーダル、カード、ダイアログ、パネルあたりです。
タイトル＋テキスト＋ボタン1個のカード。タイトル＋画像＋ボタン2個のカード。メディア＋テキスト＋リンクのカード。こういう組み合わせ全部をバリアントで用意するのは面倒なうえに進めてると予想してなかったのが追加されたりします。
スロットがあれば、1つのコンポーネントで全部カバーできます。
実際に運用するときのコツ
1. デタッチが多いコンポーネントから手をつける
全部いっぺんにスロット化するのは大変なので、まずはよくデタッチされてるコンポーネントからやるのがいいです。Figma公式ブログでも、早期テスターはダイアログ・メニュー・モーダル・カードあたりで一番効果を感じたと書いてました。
「このコンポーネント、みんなすぐデタッチするんだよな」というやつ、たぶん心当たりあると思います。そこから始めましょう。
2. 中身を入れた状態で公開するか、空で公開するか
スロットはデフォルトコンテンツ入りでも空でも公開できます。
カードの右上にだいたいアイコンが入るなら、最初から入れておいたほうが使う側は楽です。逆に「ここは毎回自分で入れてね」という箇所は空にしておくと、入れ忘れ防止にもなります。
どっちが正解というものでもないので、コンポーネントの性質に合わせて使い分ければOKです。
3. 「優先されるインスタンス」でゆるく制御する
スロットは自由度が高い分、「何を入れたらいいかわからない」問題が起きることもあります。そこで使えるのが「優先されるインスタンス」の設定です。
ボタン用のスロットにデザインシステムのButtonコンポーネントを推奨設定しておけば、＋ボタンを押したときに候補の上のほうに出てきます。強制ではないけど、自然と正しい選択に誘導できます。複数人で作業しているなら設定しておきましょう。
4. バリアントを整理する
スロット導入前に量産した「項目数違い」「レイアウト違い」のバリアントはけっこう減らせるはずです。
同じコンポーネントセット内のバリアントにスロットを適用するときは、マルチエディットで複数バリアントの同じレイヤーを選択して一括適用できます。
従来のSlotハックとの違い
「Slotコンポーネント」というテクニックがあります。空のコンポーネントを作ってインスタンススワップで中身を入れ替えるというやつです。
新しいSlot機能はこのテクニックとは根本的に別物です。
| 項目 | 従来のSlotハック | Slot機能 |
|---|---|---|
| レイヤーの追加 | ❌ できない | ✅ 自由に追加 |
| 並べ替え | ❌ できない | ✅ ドラッグで並べ替え |
| 使えるレイヤー種類 | インスタンスのみ | テキスト・画像・インスタンス等なんでも |
| 推奨インスタンスの設定 | ❌ なし | ✅ 優先されるインスタンス |
| セットアップの手間 | ダミーコンポーネントが必要 | 右クリックで変換するだけ |
| デザインシステムとの整合性 | 壊れがち | ネイティブ機能なので安定 |
既存のSlotハックからの移行手順は、Figmaが公式の移行ガイドを出してくれてるのでそちらも参考に。
注意点
いくつかハマりポイントがあるので書いておきます。
-
トップレベルレイヤーにはスロットを設定できません。 コンポーネントの一番外側のフレームではなく、その中にネストされたフレームに対して設定する必要があります。
-
スロットの中にスロットは作れません。 入れ子にしたい場合は、スロット付きコンポーネントをインスタンスとしてスロット内に入れれば実現できます。
-
スロットをやめたくなったら、 右クリック → 「フレームに変換」 で通常のフレームに戻せます。
-
一気に移行しないほうがいいです。 ライブラリ全体を一度に書き換えると影響範囲が読みきれないので、コンポーネント単位で少しずつ進めるのが安全です。
おわりに
デザインをちゃんと作ろうとすればするほど硬くなって、結局コンポーネントをデタッチして使うという本末転倒な状態になりがちでした。スロットはその構造的な問題に対する、かなりまっとうな解決策だと思います。
まずはデタッチされてるコンポーネントを1つ選んで、スロット化で試してみることをおすすめします。
参考リンク
NCDC株式会社( ncdc.co.jp/ )のテックブログです。 主にエンジニアチームのメンバーが投稿します。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！
Discussion