--- title: "Figma Slots 教學：設計系統終於可以靈活又不失控了" slug: figma-slots-design-system url: https://rar.design/posts/figma-slots-design-system published_at: 2026-03-05 modified_at: 2026-03-05 author: "設計師 Riven" category: "UI/UX 設計" tags: ["figma"] access: public_access --- # Figma Slots 教學：設計系統終於可以靈活又不失控了 > 不用 detach、不爆 Variant，用 Slots 重新定義元件彈性 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-03-05 一直以來，設計系統都在「一致性」和「彈性」之間拉鋸。Figma 新推出的 Slots（插槽） 功能，讓元件可以靈活替換內容，又不用 detach，正是解決這個問題的關鍵。📋 本文目錄為什麼設計系統越做越難維護？Slots 是什麼？Slots 的 5 個實戰技巧如何建立第一個 Slot？Slots 與程式碼的關係重點整理▲ Figma 官方 Slots 介紹影片為什麼設計系統越做越難維護？你有沒有遇過這種狀況：公司的設計系統建好了，元件庫也整理好了，但實際設計的時候，還是要一直 detach 元件來改？原因通常是這樣的：設計系統的元件做得太死，每次有新的排列組合需求，只好新增 Variant；Variant 一多，Library 就越來越臃腫；最後大家乾脆不用元件庫，直接 detach 改掉，系統的一致性就崩了。這不是設計師的問題，而是設計工具的限制。Figma 這次推出的 Slots 功能，就是從根本上解決這個結構性問題。Slots 是什麼？Slots 可以理解成元件裡的「可替換區域」。你在設計一個 Card 元件時，可以在裡面放一個 Slot，讓使用者決定這個區域要放什麼——圖片、圖表、按鈕組，都行，而且全程不需要 detach。💡 換句話說Slots 就像積木底座，結構固定，但你可以自由決定上面要放什麼積木。元件的骨架不變，內容可以任意替換。這個概念其實在前端開發裡早就有了，Vue 的 、React 的 children 都是同樣的思路。Figma 現在把這個能力帶進設計端，讓設計結構真正對齊開發結構。目前 Slots 已在 Open Beta，所有 Full Seat 用戶都可以使用。Slots 的 5 個實戰技巧Figma 官方在 Schema 2025 發表後，與早期測試者合作整理出 5 個最有效的使用方式：1從最常被 detach 的元件開始找出你的設計系統裡大家最常 detach 的元件，那些就是 Slots 最能發揮價值的地方。常見選擇：Dialog、Modal、Card、Panel。有這些元件的地方，Slots 馬上就能減少 80% 的 Variant 需求。▲ 同一個 Panel 元件，透過 Slots 可以延伸出完全不同的介面——結構不變，內容自由替換（圖片來源：Figma Blog）2空插槽 vs 預填內容，要刻意選擇空插槽 = 提示設計師「這裡需要填內容」；預填插槽 = 提供預設值，不需要改的話直接用。兩種都有其用途，重點是要根據元件的使用情境刻意選擇，不要隨便設定。▲ 左：空插槽（提示設計師需要填入）；右：有預設內容的插槽（直接可用，不需每次手動插入）（圖片來源：Figma Blog）3用 Preferred Instances 引導插槽內容插槽太自由也是問題——設計師會不知道該放什麼進去。善用 Preferred Instances（偏好實例）功能，在 Props 面板裡預先指定「這個 Slot 推薦放這幾個元件」，讓 Slot 靈活但有邊界。4Slots 也可以用在大版型Slots 不只能用在小元件，Header、Sidebar、頁面 Section 一樣適用。建立一套固定版型，讓各個區域可以替換不同的內容元件，就不需要再從零開始做每一頁了。5讓設計結構對齊程式碼Slots 的設計方式和前端 container component 邏輯完全一致，搭配 Code Connect，工程師可以直接在程式碼片段中看到 Slot 對應的位置，交接溝通成本大幅下降。▲ Code Connect 讓設計系統的元件直接與程式碼對應，搭配 Slots 讓 Dev Handoff 更準確（圖片來源：Figma Blog）如何建立第一個 Slot？步驟非常簡單，不需要任何插件：1建立或開啟主元件（Main Component）Slots 只能存在於 Main Component 內，不能直接放在 Canvas 上。2在元件裡新增一個 FrameSlot 是從 Frame 轉換過來的，Rectangle 不能直接轉換成 Slot。3右鍵選擇轉換成 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 用戶都可以直接用延伸資源🔗 Figma 官方 Slots 介紹文章🔗 Slots Playground 社群檔案（可直接複製練習）🔗 Figma 官方 Slots 使用說明文件🎓 想系統性學習設計？Figma 完整教學課程從 Figma 基礎到 Auto Layout、元件系統、設計系統建置，一套課程學到位。適合想在工作上真正用好 Figma 的設計師。查看課程內容 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →