Slot ComponentとはInstanceを入れる事のできる箱のようなものです。FDSでは、このSlot Componentを使う事で高速なモックアップ制作や汎用的なコンポーネントの使用を可能にしています。
特徴 – ( 1 )
SlotはSpacingおよび縦組・横組の定義を持っています。 要素の数、並べる方向をComponent Propertiesパネルで素早く設定することができます。
余白についてはVariablesを利用してAuto Layoutから設定します。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img01-9.png)
特徴 – ( 2 )
Swap Instanceでコンポーネントを入れることができます。Slot自体を調整してSwap後にも縦横・要素数・間隔の調整を簡単に行うことができます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img02-1-1.png)
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img02-2-1.png)
特徴 – ( 3 )
Slot同士はネストできません。
Sectionを構成するContainerに入れるようにします。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img03-6.png)
Slotを使った再利用度の高いコンポーネント
これまでFigmaでComponent Instanceを作る場合、そのコンポーネントの構成要素の種類が増えれば増えるほどVariantが増えたり、Instance化したものは構成要素の編集ができない為マスターからDetachする(切り離す)必要がありました。
FDSでは差し替え可能な箇所にSlot Componentを使う事でコンポーネントの柔軟性と再利用度を確保しています。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img04-8.png)
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img05-3.png)
Gridに合わせたレイアウト
Slotで構成されたコンポーネント「Grid Slot」を使うことでGridに合わせたコンポーネントグループを作ることができます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/06/img06-2.png)