Figma Slots 教學：設計系統終於可以靈活又不失控了
2026年3月5日 下午 5:27
UI/UX 設計
一直以來，設計系統都在「一致性」和「彈性」之間拉鋸。Figma 新推出的 Slots（插槽） 功能，讓元件可以靈活替換內容，又不用 detach，正是解決這個問題的關鍵。
▲ Figma 官方 Slots 介紹影片
為什麼設計系統越做越難維護？
你有沒有遇過這種狀況：公司的設計系統建好了，元件庫也整理好了，但實際設計的時候，還是要一直 detach 元件來改？
原因通常是這樣的：設計系統的元件做得太死，每次有新的排列組合需求，只好新增 Variant；Variant 一多，Library 就越來越臃腫；最後大家乾脆不用元件庫，直接 detach 改掉，系統的一致性就崩了。
這不是設計師的問題，而是設計工具的限制。Figma 這次推出的 Slots 功能，就是從根本上解決這個結構性問題。
Slots 是什麼？
Slots 可以理解成元件裡的「可替換區域」。你在設計一個 Card 元件時，可以在裡面放一個 Slot，讓使用者決定這個區域要放什麼——圖片、圖表、按鈕組，都行，而且全程不需要 detach。
💡 換句話說
Slots 就像積木底座，結構固定，但你可以自由決定上面要放什麼積木。元件的骨架不變，內容可以任意替換。
這個概念其實在前端開發裡早就有了，Vue 的 <slot>、React 的 children 都是同樣的思路。Figma 現在把這個能力帶進設計端，讓設計結構真正對齊開發結構。
目前 Slots 已在 Open Beta，所有 Full Seat 用戶都可以使用。
Slots 的 5 個實戰技巧
Figma 官方在 Schema 2025 發表後，與早期測試者合作整理出 5 個最有效的使用方式：
從最常被 detach 的元件開始
找出你的設計系統裡大家最常 detach 的元件，那些就是 Slots 最能發揮價值的地方。常見選擇：Dialog、Modal、Card、Panel。有這些元件的地方，Slots 馬上就能減少 80% 的 Variant 需求。
空插槽 vs 預填內容，要刻意選擇
空插槽 = 提示設計師「這裡需要填內容」；預填插槽 = 提供預設值，不需要改的話直接用。兩種都有其用途，重點是要根據元件的使用情境刻意選擇，不要隨便設定。
用 Preferred Instances 引導插槽內容
插槽太自由也是問題——設計師會不知道該放什麼進去。善用 Preferred Instances（偏好實例）功能，在 Props 面板裡預先指定「這個 Slot 推薦放這幾個元件」，讓 Slot 靈活但有邊界。
Slots 也可以用在大版型
Slots 不只能用在小元件，Header、Sidebar、頁面 Section 一樣適用。建立一套固定版型，讓各個區域可以替換不同的內容元件，就不需要再從零開始做每一頁了。
讓設計結構對齊程式碼
Slots 的設計方式和前端 container component 邏輯完全一致，搭配 Code Connect，工程師可以直接在程式碼片段中看到 Slot 對應的位置，交接溝通成本大幅下降。
如何建立第一個 Slot？
步驟非常簡單，不需要任何插件：
建立或開啟主元件（Main Component）
Slots 只能存在於 Main Component 內，不能直接放在 Canvas 上。
在元件裡新增一個 Frame
Slot 是從 Frame 轉換過來的，Rectangle 不能直接轉換成 Slot。
右鍵選擇轉換成 Slot
對著 Frame 右鍵，選擇「Convert to Slot」，或用快捷鍵 Shift + Command + S，完成。
📂 官方 Playground 檔案
Figma 有提供一個 Slots Playground 社群檔案，可以直接複製下來玩，是上手 Slots 最快的方式。
Slots 與程式碼的關係
對於需要跟工程師協作的設計師來說，Slots 有一個很關鍵的優勢：它的結構思維和前端完全一致。
開發端在寫 Dialog、Card 這類 container component 的時候，通常會定義固定的 slot 區域讓外部傳入內容，而不是把所有可能的內容都寫死在元件裡。Figma 的 Slots 現在把這個邏輯帶進設計端，代表設計師和工程師說的是同一種語言。
🔗 搭配 Code Connect 使用
Slots 已整合進 Figma 的 Code Connect 功能。工程師在 Dev Mode 看到元件時，可以直接看到 Slot 對應的程式碼結構，大幅減少「這個設計要怎麼實作」的溝通來回。
📝 重點整理
→
Slots 讓元件內容可替換，不需要 detach，解決 Variant 爆炸問題
→
從最常被 detach 的元件開始用，效益最大
→
空插槽 vs 預填內容，要根據使用情境刻意設計
→
Preferred Instances 讓插槽有引導，避免過度自由
→
設計結構對齊前端 container component 邏輯，交接更順暢
→
現在是 Open Beta，所有 Full Seat 用戶都可以直接用
