Figmaの概念を覆す新機能！「スロット」でコンポーネント設計が劇的に進化

カードやモーダルなど、共通の枠組みを保ちながら中身だけを変えたいことはありませんか。Figmaのスロットは、コンポーネントの内部に内容を追加・配置できる領域を設ける機能です。インスタンスをデタッチせずに、画像やテキスト、別のコンポーネントを組み合わせられます。

スロットでできること

スロットはメインコンポーネントに設定するプロパティです。たとえばカードの本文部分をスロットにすると、カード全体の共通構造を保ちつつ、インスタンスごとに画像や項目一覧などの内容を配置できます。

スロットはFigma Designのすべてのプランで利用でき、ファイルの編集権限を持つユーザーが作成できます。ライブラリに公開し、チームで共有することも可能です。

スロットを作る手順

メインコンポーネントの中で、差し替え可能にしたいフレームを選択します。右クリックして「Convert to slot」を選び、名前と設定を決めます。そのコンポーネントのインスタンスを作成すると、スロットの中にレイヤーを追加したり、並べ替えたりできます。

フレーム以外のテキストや複数のレイヤーを選択した場合は、「Wrap in new slot」を使う方法もあります。コンポーネントの最上位レイヤー自体にはスロットを割り当てられないため、内部の領域を選択します。

バリアントとの使い分け

バリアントは、ボタンのサイズや状態のようにあらかじめ決めた選択肢を切り替えるのに向いています。スロットは、カードの本文など、組み合わせる内容を柔軟に変えたい領域に向いています。必要に応じて組み合わせることで、細かな違いごとにバリアントを増やす負担を減らせます。

一方で、すべての組み合わせを許すと、チーム内で見た目がばらつくこともあります。Figmaでは推奨するインスタンスや、追加できるレイヤー数の最小・最大を設定できます。レイヤー数の上限・下限はガイドであり、超えた場合は警告が表示されても編集を続けられます。使う人が迷わないよう、名前や説明と合わせて運用ルールを決めましょう。

使うときの注意点

スロットの初期内容は空にも、レイヤーを入れた状態にもできます。オートレイアウトやサイズなどの設定も、用途に応じてメインコンポーネント側で設計します。インスタンス内で内容を変えられる範囲と、元のコンポーネントで管理する範囲を分けて考えると、更新時の混乱を減らせます。

サイト制作に向けてデザインを引き継ぐときは、FigmaとWebflowの連携方法も参考になります。

まとめ

スロットは、共通の枠組みを保ちながらインスタンス内の内容を柔軟に構成するための機能です。まずはカードやモーダルなど一つの領域で試し、バリアントとスロットの役割をチームで整理してみてください。Webflow側の共通部品の設計は、コンポーネントの作成と運用で解説しています。

参考資料

• Figmaのスロット公式ヘルプ