AIDDデザイン室のまきです。
Figmaの新機能「Slots(スロット)」について、今回は自分の経験も交えつつ書いてみようと思います。

Slotsとは何か

Figmaの「Slots」は、2026年3月からオープンベータとして展開されている新機能です。
まずざっくり説明すると、コンポーネントの中に「自由に中身を差し替えられる領域」を作れる機能です。
これまでFigmaでコンポーネントの中身を変えたい時って、だいたい以下のどれかで対応してたんじゃないかと思います。

  • Detach(結合解除)して個別に編集する → メインコンポーネントとの連携が切れる
  • Booleanプロパティやバリアントで表示/非表示を切り替える → パターンが増えるほど非表示レイヤーがどんどん溜まっていく
  • インスタンススワップ用の差し替え口を用意する → 差し替え先がコンポーネントインスタンスに限定される

Slotsはこのあたりの課題をまるっと解決してくれる機能で、detachせずにコンポーネントの骨組みはそのまま、中身だけ自由に入れ替えられるようになります。

2023年頃、似たようなものを自分でも作っていた

この新機能を知った時、「本家きた！！」と思いました。

2023年頃、海外のFigmaコミュニティで、手作りでSlotのようなものを再現している人を見かけて、それを見よう見まねで自分のデザインシステムにも取り入れて運用していました。
差し替えたい領域にはSlotという名前をつけたダミーのコンポーネントを仕込んでおいて、右サイドバーのプルダウンから、Slotコンポーネントと置き換えるコンポーネント（テキストなりボタンなりチェックボックスなり）を探す、というやり方です。

これでなんとか「枠は固定、中身だけ差し替え可能」という構造自体は再現できていたのですが、

  • 中身を「空」にしたい時は本当に取り除くことができず、透明なダミーを仕込んでごまかす必要があった
  • 差し替えるコンポーネントを毎回プルダウンから名前で検索して探す必要があり、コンポーネント数が増えるほど目当てのものを見つけるのが地味に手間だった

というようなデメリットがありました。

デメリットはありつつも、当時そこまでしてSlotの構造を取り入れたかったのは、ちょうど案件で大規模なデザインシステムを作ることになったからでした。
規模が大きくなると、コンポーネントを使わずに直接作られたパーツが紛れ込んだり、すでに同じようなコンポーネントがあるのに似たものを新しく作ってしまったりしがちです。そうなるとあっという間に管理しきれなくなってカオスになるので、その可能性をできるだけ0にしたかった、というのが理由です。

自作Slotでは10個のSlotを用意して増減に対応していた

自作Slotの具体的なやり方をもう少し書くと、1つの自作Slot（Slotという名のコンポーネント）は1つの要素（コンポーネント）にしか置き換えられないので、例えばCardコンポーネントの場合あらかじめCardの中にSlotを10個くらい用意しておいて、使う数に応じて表示/非表示を切り替える、というやり方をしていました。

たとえばカード内がタイトル・画像・テキスト・ボタンの構成であれば、10個のうち4個だけ使って、残り6個は非表示にしておく。逆に要素の多いカードなら、必要な分だけSlotを表示させる。
こういう力技で、要素数が可変のカードに対応していました。

これはこれで運用は回っていたのですが、使っていない6個のSlotが非表示になっているだけで、Figma上のデータとしては常に裏に残っている状態なので、ファイルとしては結構重たいことになっていたと思います。

公式のSlotsだと、この部分はだいぶ発想が変わります。
公式Slotsは1つのスロットの中に複数の要素をまとめて入れられるので、これを使うと、

  • Cardの中に用意するスロットは1つだけ
  • そのスロットの中に、必要な数だけ要素をその場で追加していく(2個でも10個でも)
  • 使わない分はそもそも「存在しない」状態になる(非表示にして温存する必要がない)
  • 最小/最大の個数も設定できるので、上限や下限のガードレールも敷ける

というやり方に置き換えられます。
つまり「10個用意しておいて使わないものは隠す」から「必要な数だけその場で追加する」に変わるわけで、自作Slotで苦労していた部分がまるごと解消されるので、これは本当に便利になるなと思っています。

個人的に便利そうだなと思っているポイント

よく使うコンポーネントを優先インスタンスにしておける

まず地味に嬉しいのが、スロットに入れるコンポーネントのうち、よく使うものをPreferred instances(優先インスタンス)として設定しておける点です。設定しておくと、スロットに中身を入れる時にそのコンポーネントが優先的に候補として出てくるので、ぱっと選べるようになります。
自作Slotの頃は、差し替えのたびにかなりの数のコンポーネントの中から名前で検索して探していたので、「よく入れるもの」があらかじめ手元に並んでくれるのはかなり助かりそうだなと思っています。

さらに、スロットの設定には「優先インスタンスのみ許可」というチェックボックスもあります。
これをオンにしておくと、優先インスタンス以外のコンポーネントがスロットに入れられた時に警告が出るようになるので、「このスロットにはこれしか入れないでね」というルールをツール側で示せます。

自作Slotの頃は、何を入れていいかのルールは結局運用でカバーするしかなかったので、これがFigmaの機能として用意されているのはめっちゃ助かります。

detachせずに新しい表現を試せる

もうひとつ「これは助かるかも」と感じたのは、既存のデザインシステムがある案件で新しいページを作る時の話です。
そういう時って、既存のコンポーネントの枠に収まらない新しい見出しや表現を試したいことが結構あります。その場合、これまでは一旦コンポーネントをdetachしてから新しいデザインの検討に入る、という手順を踏まなきゃいけませんでした。

新機能のSlotsを使えば、detachせずにその検討ができそうだというのが、個人的に期待しているポイントです。
骨格(レイアウトや余白のルール)は保ったまま中身の表現だけ自由に試せるので、「新しい見出し表現を試したいけど、一旦detachするか…」という一手間がなくなるのはいいなあと思っています。

ただ、detachせずに既存コンポーネント以外の表現ができてしまうので、最後にその新しい表現をきちんとコンポーネント化するのを忘れないように気をつける必要も出てきちゃうなあという気もします。
と思ったのですが、いい機能がありました。先ほど紹介した「優先インスタンスのみ許可」の設定をオンにしておくと、優先インスタンス以外のものをスロットに入れた時に警告が出るのですが、コンポーネントではないもの(普通のテキストやフレーム)も「優先インスタンス以外」として扱われるので、同じように警告が出ました。
入れた瞬間は黒いトーストメッセージがさっと出るくらいなのですが、それを無視して入れたままにしておくと、右サイドバーのスロットのところに「1の制限」という表示が残り、開くと「1個の非優先アイテムが見つかりました」と教えてくれます。「レイヤーを表示」から該当のレイヤーにも飛べるので、あとから「コンポーネント化し忘れているもの」を探す時にも使えるかもしれません。

作り方のざっくりした流れ

詳しい手順はFigma公式のヘルプ(Create and use slots to build flexible components in Figma Design)にまとまっているので、ここでは実際に作ってみた流れをざっくり書いておきます。

  1. カードなど、スロットを持たせたいものを先にコンポーネント化しておく(スロットはコンポーネントの中でしか作れないため)
  2. コンポーネントの中に、スロットにしたい領域用のフレームを用意する(※四角形などの図形ではなく必ずフレームにする)
  3. そのフレームにAuto Layoutを設定する
  4. 初期値として入れておきたい中身があれば、フレームの中に入れておく
  5. フレームを右クリックして「Convert to slot」（スロットに変換）を選択。ショートカット ⇧⌘S でもOK
  6. 名前や説明をつけて、必要なら最小/最大レイヤー数やPreferred instances(優先インスタンス)などを設定する

挿入時の操作

インスタンス側でスロットに中身を入れる方法はいくつかあります。

  • 「+」ボタンから選択:スロットにホバーすると出てくる「+」をクリックすると一覧が開くので、そこから選ぶ。右サイドバーのスロットのプロパティ名からも同じ一覧を開けます
  • ドラッグ&ドロップ:キャンバス上のレイヤーやAssetsパネルのコンポーネントを、スロット領域にドラッグする
  • スロット内で直接作る・複製する:スロットの中でテキストツールなどを使って直接レイヤーを追加したり、スロット内のレイヤーを複製したりもできます

優先インスタンスを設定していれば、「+」から開く一覧は最初から優先インスタンスで絞り込まれた状態になるので、メンバーが迷わず選びやすくなります。

ちなみにドラッグ&ドロップは、公式ヘルプではそのままドラッグすれば入れられると書かれているのですが、私の環境ではそのままだとすんなり入る時と全然入らない時があり、試しにCommandキーを押しながらドラッグしたら入りました。同じように入らなくて困った人は試してみてください。

実際にサンプルを作って触ってみた

記事を書くにあたって、Cardコンポーネントにスロットを1つ持たせたサンプルを実際に作って触ってみました。
スロットには画像・タイトル・テキスト・ボタン・グラフ・タグの6つのパーツを優先インスタンスとして登録しています。

結論から言うと、めっちゃ便利でした。特に良かったのはこの3つです。

  • 「+」から優先インスタンスがすぐ出てくる:全コンポーネントの中から名前で検索して探していた自作Slotの頃と比べて、候補がすぐ目の前に出てくるのが本当に楽でした
  • 消したら本当に消える:中身を消すとちゃんと消えて、透明なダミーでごまかす必要がないのが気持ちいいです
  • 要素をいくつでも足せる:1つのスロットに2個でも3個でもその場で足せるので、10個用意して隠していた自作Slotの苦労は何だったんだという気持ちになりました

どれも自作Slotで地味にストレスだったところがそのまま解消されていて、触りながら何度も「おお〜」となりました。

まとめ

Slotsは、Figmaのコンポーネント機能がずっと抱えていた「一貫性を保とうとすると柔軟性が犠牲になる」というトレードオフに対する構造的な解決策だなと感じています。
社内のデザインシステムはまだ自作Slotで運用していて、公式のSlotsには移行できていないのですが、ぜひ移行したいところです。ただ、既存の大規模なデザインシステムでの利用は注意が必要という声も見かけるので、慎重に進めたいなと思っています。
今後新しいデザインシステムを作る際には思い切りこのSlots機能を取り入れたいですね。