Figmaでコンポーネントを作っていると、「構造は同じなのに中身だけ違うUI」を何度も作ることがあります。
例えば、ボタンのアイコンだけ変えたい、カードの画像だけ差し替えたい、といったケースです。
このようなときに役立つのが「Figma Slot（フィグマスロット）」というコンポーネント設計の考え方です。
Slotを使うと、コンポーネントのレイアウト構造を保ったまま、特定の部分だけを自由に差し替えることができます。
この記事では、
- Figma slotとは何か
- VariantsやInstanceとの違い
- Figma slotの使い方
- コンポーネント設計での活用方法
を初心者にもわかりやすく解説します。
Figmaでデザインシステムを作っている人や、UIコンポーネントを効率よく管理したい人はぜひ参考にしてください。
Figma Slotとは？コンポーネントの中身を自由に入れ替える設計方法
Figma slotとは、コンポーネントの中に自由に差し替えできる「入れ替え用のエリア」を作る設計方法です。
このエリアを使うことで、コンポーネントのレイアウト構造はそのままに、アイコン・画像・テキストなどを自由に差し替えることができます。
例えば、ボタンコンポーネントに「アイコンslot」を作っておけば、
- 検索アイコン
- 矢印アイコン
- ダウンロードアイコン
などを簡単に差し替えることができます。
つまりFigma slotは、UIコンポーネントの再利用性を高めるための設計思想と考えると理解しやすいでしょう。
Figma SlotとVariants・Instanceの違い
Figmaにはすでにコンポーネント機能として「Variants」や「Instance」があります。
Slotはこれらと似ているようで、役割が少し異なります。
Variantsは状態を管理する機能
Variantsは、コンポーネントの状態やパターンを管理するための仕組みです。
例えばボタンの場合
- Primary
- Secondary
- Disabled
- Hover
といった状態を管理できます。
Slotはコンポーネントの中身を差し替える仕組み
一方でslotは、コンポーネントの一部分を別の要素に置き換えるための設計方法です。
つまり
- Variants → 状態管理
- Slot → 内容の差し替え
という役割になります。
この2つを組み合わせることで、柔軟で管理しやすいコンポーネント設計が可能になります。
なぜFigma Slotが重要なのか？コンポーネント設計が変わる理由
最近のUIデザインでは、デザインシステムやコンポーネント設計の重要性が高まっています。
その中で、より柔軟なコンポーネント構造が求められるようになりました。
Variantsだけではパターンが増えすぎる
従来のFigmaでは、UIパターンをVariantsで管理することが多くありました。
しかし、
- サイズ
- カラー
- アイコン有無
- 状態
などをすべてVariantsで管理すると、組み合わせが増えすぎてしまいます。
slotを使えば、アイコンなどの要素を差し替えるだけで済むため、Variantsの数を大幅に減らすことができます。
デザインシステムの再利用性が高まる
slotを使うと、1つのコンポーネントをさまざまな用途に使い回すことができます。
例えば
- カードUI
- ナビゲーション
- ボタン
- リストUI
など、多くのUIパターンで活用できます。
その結果、デザインシステムの管理がシンプルになります。
Figma Slotでできること（具体例）
ボタンのアイコンを自由に差し替える
slotを使えば、ボタンの構造を変えずにアイコンだけ変更できます。
例えば
- 検索ボタン
- 送信ボタン
- ダウンロードボタン
などを1つのコンポーネントで作ることができます。
カードUIの画像やCTAを変更する
カードコンポーネントでは、画像やボタンを差し替えるケースが多くあります。
slotを使うことで
- 画像ありカード
- 画像なしカード
- CTA付きカード
などを簡単に作ることができます。
ナビゲーションの要素を柔軟に変更する
ヘッダーやナビゲーションでもslotは活躍します。
例えば
- ロゴ
- 検索バー
- ログインボタン
などを状況に応じて入れ替えることができます。
Figma Slotの基本的な使い方
Auto Layoutでコンポーネントを作る
まずはAuto Layoutを使ってコンポーネントの基本構造を作ります。
slot設計ではAuto Layoutがほぼ必須になります。
差し替えたいエリアを用意する
次に、差し替えたいエリアを作ります。
例えば
- icon-slot
- media-slot
- action-slot
などです。
インスタンス側で要素を差し替える
インスタンスを配置した後、slot部分に別のコンポーネントを入れます。
これにより、同じ構造でも異なるUIを作ることができます。
Figma Slotを使うメリット
コンポーネントの再利用性が高くなる
slotを使うことで、同じ構造のUIを多くの場面で使えます。
Variantsの数を減らせる
Variantsを増やしすぎる必要がなくなります。
デザインシステムの管理がシンプルになる
コンポーネント数が減るため、運用が楽になります。
Figma Slotを使うときの注意点
Auto Layout設定を正しく行う
Auto Layoutが正しく設定されていないとレイアウトが崩れることがあります。
slotに入れるサイズを統一する
例えばアイコンは24pxなど、サイズを統一しておくことが重要です。
チームでルールを決める
slotの命名や使い方をチームで統一すると、デザインシステムが運用しやすくなります。
まとめ：Figma Slotを理解するとコンポーネント設計が大きく変わる
Figma slotは、コンポーネントの中身を柔軟に差し替えるための設計方法です。
これを理解すると、
- UIコンポーネントの再利用性が向上
- Variantsの管理がシンプル
- デザインシステムの運用が楽になる
といったメリットがあります。
Figmaで効率的にUIを設計したい人は、ぜひslotの考え方を取り入れてみてください。
コメント