- Figma Slotの作り方3通り（Convert to slot / Wrap in new slot / プロパティ先行）
- 作ったスロットに、インスタンス側で中身を入れる方法
- 最初に必ずハマる、Slotの4つの制約
- 似ているInstance Swapとの使い分け
Figma Slotの使い方は、ざっくり言うとこの3ステップです。コンポーネントの中の「内側のフレーム」を選んで、右クリックから「スロットに変換（Convert to slot）」を実行する。あとはインスタンス側で、その枠の中に好きな要素を入れるだけ。これで、インスタンスをデタッチ（切り離し）せずに中身を差し替えられるようになります。
ただ、いざ自分でやってみると「あれ、変換のボタンが出てこない」「中身を入れても position が動かせない」と、つまずく場所がだいたい決まっています。
私はWeb制作を17年やっていますが、Slotが正式機能になる前は、カードやダイアログを毎回デタッチして手で組み替えていました。いわゆるデタッチ地獄です。Slotを使い始めてから、そこがかなり楽になりました。
この記事では、Figma Slotの作り方3通りと、インスタンスでの中身の入れ方、そして「最初に必ずハマる4つの制約」を、手を動かしながら覚えられるように整理していきます。最後に、似ているInstance Swapとの使い分けも置いておきます。
記事を書いている人
R（アール）
Web制作の現場で17年（現役進行中）。精密栄養カウンセラー。
個人開発をアプリ6本並行しながら、AIと「作る・届ける」を実験しています。
うまくいったことも、月収2,000円みたいな冴えない数字も、隠さず公開中。
教える人ではなく、少し先で転んで戻ってきた人として、あなたと同じ目線で現在地を観測していけたらと思います。
Figma の Slot とは何か（30秒で）
「Slot って結局なんなの？」というところ、最初は私もぼんやりしていました。
ものすごく簡単に言うと、Slot は コンポーネントの中に置く「中身を自由に差し替えられる領域」 です。枠（外側）は固定したまま、中の要素だけを追加・リサイズ・並べ替えできる。しかもインスタンスをデタッチせずに、です。
TypeScriptやVueを書く方なら、Reactの children props や、Vue・Web Componentsの <Slot> を思い浮かべてもらうと早いです。「外側のコンポーネントは決まっているけど、中に何を入れるかは呼び出し側が決める」。あの感覚がそのままFigmaに来た、と考えると腹落ちします。
それって、前からある Instance Swap と何が違うんですか？正直、どっちを使えばいいのか分かってなくて……
いい質問です。ざっくり言うと、Instance Swap は「1個まるごと別のコンポーネントに差し替える」、Slot は「中身を自由に組み立てる領域」です。この違いは記事の最後で表にして整理しますね。
ステータスも先に書いておきます。Slot は Schema 2025 で発表された機能で、現在は Figma Design の全プランで使えます。編集権限（can edit）があれば、特別な設定なしにすぐ試せます。
では、実際に作るところから見ていきます。
Figma で Slot を作る3つの方法【figma slot 使い方の核】
ここがこの記事の本題です。Figma Slot の作り方は3通りあって、状況によって入口が変わります。この章を読めば、どのケースでも自分でスロットを作れるようになります。
ひとつ大事な前提があります。スロットは「コンポーネントの内側にネストしたフレーム」に対して作ります。 いきなり最外フレームを選んでも作れません（理由は制約の章で説明します）。まずはこれだけ頭の隅に置いてください。
方法1：フレームをスロットに変換する（一番よく使う）
コンポーネントの中にネストされたフレームを選んで、スロットに変える方法です。普段はこれが基本になります。
- コンポーネント内のネストされたフレームを選択する
- 右クリック → 「スロットに変換（Convert to slot）」 を選ぶ
- ショートカットなら ⌘⇧S（Mac）/ Ctrl+Shift+S（Win）でも変換できます
- 右サイドバーにも「Convert to slot」のボタンが出ます
選んだフレームが空のスロットになれば成功です。
方法2：フレーム以外のオブジェクトを包んでスロットにする
テキスト・グループ・インスタンスなど、フレームではない要素を起点にしたいときはこちらです。
- 対象のオブジェクト（テキスト、グループ、インスタンスなど）を選択する
- 右クリック → 「Wrap in new slot」 を選ぶ
- 新しいスロットプロパティが自動で作られます
「Convert to slot」が選べないときは、たいてい対象がフレームになっていません。その場合は「Wrap in new slot」を探してみてください。
方法3：先にプロパティだけ作っておく
「先に設計図としてスロットの枠だけ用意して、中身は後で紐づけたい」というときの作り方です。
- メインコンポーネントを選択する
- 右サイドバーの 「Create property」→「Slot」 を選ぶ
- 設定モーダルが開くので、スロットプロパティを定義する
- 後でフレームを選び、「Convert to slot」でそのプロパティに紐づける
3通りと言いましたが、迷ったら方法1で問題ありません。フレーム以外を起点にしたいときだけ方法2、設計を先に固めたいときだけ方法3、という覚え方で十分です。
では、作ったスロットに中身を入れていきます。
補足：プロパティの細かい設定（Edit property）
作ったスロットは、後から「Edit property」で挙動を調整できます。
- 最小／最大レイヤー数：何個まで入れていいか、ガイドを表示できます（緑チェック／オレンジ警告が出るだけで、強制ではありません）
- 優先インスタンス（Set preferred instances）：よく使うコンポーネントを候補として登録できます。「Only allow preferred instances」で、それ以外を禁止して強制することも可能です
- デフォルトで空スロットを表示：空のスロットにピンクのインジケータを出して、入れ忘れを防げます
ここはコンポーネントを配る相手（チーム）がいるときに効いてきます。一人で使う段階では、後回しでも大丈夫です。
インスタンスで中身を入れる
スロットは作れた。でも「で、ここに何をどうやって入れるの？」で止まる人が多い場所です。この章では、インスタンス側で中身を入れる方法と、入れたあとに変更できること・できないことを整理します。
スロットに中身を入れる方法
インスタンスを置いたら、空のスロットに対して次のどれかで中身を入れます。
- スロットに直接レイヤーを描く
- 既存のスロットレイヤーを複製する
- キャンバスや Assets パネルからドラッグして入れる
- スロットにホバーして表示される 「Add instances」 から、優先インスタンスの一覧を選ぶ
- スロットの [＋] アイコン からコンポーネント選択のドロップダウンを開く
最初は [＋] アイコンとドラッグの2つを覚えておけば、ほぼ困りません。
インスタンスで変更できること・できないこと
ここが地味につまずきます。インスタンス側で入れた中身は、変更できる項目と、できない項目が決まっています。
変更できるもの：
- fill（塗り）
- stroke（線）
- opacity（不透明度）
- effects（エフェクト）
- レイヤー名
- export 設定
変更できないもの：
- position（位置）
- オートレイアウトの flow（並びの方向）
- constraints（制約）
えっ、position を動かせないんですか？じゃあ思った場所に置けないってこと……？
そうなんです。並びはスロット側（＝メインコンポーネント側）のオートレイアウトで決まります。インスタンスで自由に配置はできません。最初これに気づかず、私も「なんで動かないんだ」ってしばらく悩みました。
位置や並びを変えたいときは、インスタンス側でいじらず、メインコンポーネント側のスロットのオートレイアウト設定を見直す、と覚えておくと早いです。
では、ここからが本当の山場です。Slot を使い始めると、ほぼ全員が同じ場所でハマります。
Slot で必ずハマる4つの制約
正直に言うと、Slot は「便利だけど自由ではない」機能です。この章を読むと、初見でハマりがちな4つの制約を先回りで避けられるようになります。元の解説記事ではここがすっぽり抜けていて、私自身も実際に手を動かして初めて気づいた部分です。
制約1：トップレベルにはスロットを作れない
コンポーネントの 最外フレーム（トップレベル）には、スロットを設定できません。 必ず、ひとつ内側にネストしたフレームに対して作ります。
「Convert to slot が出てこない」「ショートカットが効かない」というとき、原因の多くはこれです。最外フレームを選んでいるので、変換できない。
直し方はシンプルで、中にフレームをひとつ作って、そこをスロットにします。
制約2：スロットの中に直接スロットは作れない
スロットの中に、さらにスロットを直接作ることはできません。
ただし抜け道があります。スロットを持つコンポーネントを、インスタンスとして別のスロットに入れるのはOKです。直接の入れ子は不可、でもコンポーネント経由なら実質的に多段にできる、という理解で大丈夫です。
制約3：スロット内のレイヤーにコンポーネントプロパティは適用できない
スロットの中に置いたレイヤーには、コンポーネントプロパティ（テキストプロパティやブールプロパティなど）を紐づけられません。
プロパティで制御したい要素は、スロットの中に入れず、コンポーネント本体側に置く。この切り分けを最初に決めておくと、後から組み直す手間が減ります。
制約4：スロットプロパティを削除すると中身が全部消える
これが一番こわい制約です。スロットプロパティを削除すると、インスタンス側で入れた中身も、加えた変更も、まとめて消えます。 中身ごと飛ぶ、いわゆる破壊的な操作です。直後であれば Cmd+Z（Undo）で戻せますが、気づくのが遅れて他の作業を挟むと、もう戻せません。
「ちょっと整理しようとしてスロットを消したら、各画面で組んでいた中身が全部飛んだ」というのは、起きると地味にダメージが大きい。削除する前に、本当に使っていないか確認してください。
全部消えるって、戻せないんですか……？怖くて触れなくなりそうです。
消した直後なら Undo で戻せます。ただ、気づくのが遅れると面倒なので、私はスロットを消す前に一度ファイルを複製しておくくらいでちょうどいいと思っています。
ちなみに、中身をリセットしたいだけなら削除は不要です。スロットレイヤーを選んで More actions →「Reset slot」で初期状態に戻せますし、中身だけ消したいなら「Delete contents」が使えます。削除（プロパティごと消す）とリセット（中身を戻す）は、別物として覚えておくと安全です。
ひとつ環境依存の小ネタを添えておくと、空スロットのピンク（マゼンタ）のインジケータが、ズームを113%以上にしないと見えない、という報告もあります。「空スロットの印が出ないな」というときは、一度拡大してみてください（※環境によります）。
制約が見えると、次に気になるのは「結局、Instance Swap とどう使い分けるの？」だと思います。
Instance Swap と Slot の使い分け
これまで Instance Swap でやりくりしてきた人ほど、「Slot って Instance Swap でよくない？」と感じるはずです。この章では、両者の違いと、どっちを選ぶかの判断軸をはっきりさせます。
ひとことで言うと、こうです。
- Instance Swap：1つのインスタンスを、別のコンポーネントに「丸ごと1対1で」差し替える。決まった候補から選ぶ
- Slot：中身を「自由に組み立てる」領域。複数の要素を入れたり、テキストや画像を直接置いたりできる。デタッチ不要で自由度が高い
表にすると違いが見えます。
| 観点 | Instance Swap | Slot |
|---|---|---|
| 差し替え方 | 1対1で丸ごと交換 | 中身を自由に組み立て |
| 入れられるもの | 決まったコンポーネント候補 | 複数要素・テキスト・画像など自由 |
| デタッチ | 不要 | 不要 |
| 自由度 | 低め（候補から選ぶ） | 高い |
| 向いている対象 | アイコン1個の差し替えなど | ダイアログ・カード・モーダルなど中身が毎回変わるもの |
判断はシンプルです。アイコンを1個だけ差し替えたいなら、Instance Swap で十分。わざわざ Slot にする必要はありません。一方で、ダイアログ・メニュー・モーダル・カードのように 中身の構成が毎回変わるものは Slot が向いています。
導入の入口としては、「よくデタッチしているコンポーネント」から Slot 化するのがおすすめです。私の場合は、毎回中身を組み替えていたカードとダイアログから始めたら、デタッチの回数が目に見えて減りました。コンポーネントの設計について体系的に整理したい方は、Figmaコンポーネント設計の基本ガイドもあわせて読んでみてください。
まとめ：Slot は「自分の設計の癖」を映す道具
最後に、Figma Slot の使い方をおさらいします。
- スロットは「中身を差し替えられる領域」。React の children と同じ発想
- 作り方は3通り（Convert to slot / Wrap in new slot / プロパティ先行）。迷ったら Convert to slot
- インスタンス側では fill・stroke などは変えられるが、position・flow・constraints は変えられない
- 制約は4つ（トップレベル不可 / 直接ネスト不可 / スロット内にプロパティ不可 / 削除は破壊的）
- 中身が毎回変わるもの（ダイアログ・カード・モーダル）から導入すると効果を感じやすい
ここからは、機能の話を少し離れます。
Slot は確かに便利な機能です。でも本当に大事なのは、新しい機能を覚えること自体ではありません。Slot を導入しようとすると、ひとつ気づくことがあります。「自分は、どのコンポーネントを毎回デタッチして組み替えているのか」が、はっきり見えてくるのです。
毎回デタッチしている場所は、言い換えれば「自分の設計が固定と可変を分けきれていない場所」です。Slot は、その癖を映す鏡のような道具でもあります。便利な機能も、自分の作業をきちんと見ている人が使えば設計の資産になりますし、そこを見ない人が使えば「便利な機能を覚えた」で終わります。
新しいツールを追いかける前に、まず自分が何を繰り返し作っていて、どこで毎回手を止めているのかを観測してみる。そこから、次に整えるべきコンポーネントが見えてきます。
Figma のコンポーネント設計をもう一歩進めたい方は、プロパティとバリアントの使い分けや、命名でつまずかないためのFigmaコンポーネントの命名規則ガイドも用意しています。Slot と組み合わせると、デザインシステムがぐっと扱いやすくなります。
この記事は「Figmaコンポーネント設計ガイド」シリーズの一部です。
→ シリーズ全体を見る
あわせて読みたい
📚 Figma・デザインシステムの全体像は Figma・デザインシステム 完全マスターガイド で関連10記事を整理しています。
📚 シリーズ全体を見る: Figma命名規則ガイド（このシリーズの pillar 記事）
Git/Claude Code 使い込んでる人ほど、止まりがちです。
「もっと勉強しなきゃ」「もっと作らなきゃ」――Claude Code, Cursor, GitLens を試すほど、知識は増えるのに、自分が前に進んでる感覚は薄れていく。
個人開発8本、月収2,000円。Web制作17年のクリエイターが、AI と「作る」「届ける」を honest に実験している過程をメルマガで公開しています。
登録特典:「AI時代に取り残されないための構造整理シート」（PDF 12p / 5ステップ）― スキル棚卸し → AI との組み方 → 自分のポジション設計。
