FDS - ガイドライン

Slot

Slot ComponentとはInstanceを入れる事のできる箱のようなものです。FDSでは、このSlot Componentを使う事で高速なモックアップ制作や汎用的なコンポーネントの使用を可能にしています。

特徴 – ( 1 )

SlotはSpacingおよび縦組・横組の定義を持っています。 要素の数、並べる方向をComponent Propertiesパネルで素早く設定することができます。
余白についてはVariablesを利用してAuto Layoutから設定します。

特徴 – ( 2 )

Swap Instanceでコンポーネントを入れることができます。Slot自体を調整してSwap後にも縦横・要素数・間隔の調整を簡単に行うことができます。

特徴 – ( 3 )

Slot同士はネストできません。
Sectionを構成するContainerに入れるようにします。

Slotを使った再利用度の高いコンポーネント

これまでFigmaでComponent Instanceを作る場合、そのコンポーネントの構成要素の種類が増えれば増えるほどVariantが増えたり、Instance化したものは構成要素の編集ができない為マスターからDetachする(切り離す)必要がありました。
FDSでは差し替え可能な箇所にSlot Componentを使う事でコンポーネントの柔軟性と再利用度を確保しています。

Gridに合わせたレイアウト

Slotで構成されたコンポーネント「Grid Slot」を使うことでGridに合わせたコンポーネントグループを作ることができます。

おすすめの記事

TOP