Figma - Slot 功能，讓元件配置更自由！

在做大型專案或 Design System 時，常常遇到元件越做越多，明明只是小地方不同，卻要新增一個 Variant，或是為了快速調整，直接 Detach 修改，最後和 Library 不同步了。

Figma 推出的 Slot 功能，能讓元件保有一致的結構，同時又能讓部分內容自由替換，讓整個元件系統變得更有彈性。

# 專案共同痛點：元件越建越多

剛開始建立 Design System 時，Button、Card、Dialog、Table⋯⋯一開始看起來都很完整。

但隨著專案推進，需求會開始慢慢變化，例如：

• Header 多一個按鈕
• Card 多一個 Tag
• Footer 多一個狀態資訊

這些調整其實都還是沿用原本元件的設計邏輯與版型結構，只是因應不同情境，開始出現相似但略有差異的新版本。

看起來只是小變化，但原本的元件設計，卻已經無法完全滿足新的樣式需求。這時候最常見的做法，通常有兩種：

不斷新增 Variant

為了維持元件同步，開始新增各種版本，例如：

• Card/Default
• Card/With Tag
• Card/Double Button
• Card/Highlight

最後元件開始變得不好找、不好管理，也不確定哪個才是正式版本。

Detach 後直接修改

另一種情況則是為了快速出稿，直接 Detach 修改。短時間很方便，但這些被 Detach 的元件，就不會再和 Library 同步了。

久而久之，同一份專案裡，會開始出現很多：「看起來很像，但其實都不同版」的元件。

# Slot 是什麼？

Slot 可以理解成，元件中「可替換的區域」

以往元件通常是固定內容，但 Slot 可以讓部分區塊保留彈性，例如：

• Header 的操作按鈕
• Card 的圖片區
• Dialog 的 Footer
• Banner 的內容區塊

都能自由替換不同內容。

但整體的：

• Layout
• 間距
• 結構
• 視覺規則

依然維持一致。

這也是 Slot 最重要的地方，它不是把元件做得更難管理，而是讓同一個元件能適應更多使用情境。

# Slot 如何改善元件維護

很多時候，設計系統最麻煩的，其實不是建立元件，而是後續維護。專案時間一長，元件數量會開始快速增加，這時候如果沒有好的元件結構，很容易遇到：

• Variant 爆炸
• 元件命名混亂
• Library 難維護
• Detach 越來越多

而 Slot 的出現，其實就是讓元件能保有一致性，同時又保留內容調整的彈性。

當元件不需要一直拆分新版本時，整個 Design System 也會變得更輕巧、更容易維護。