Figma UI Kit / Template：25 個設計系統、版型、Dashboard 與元件資源整理

快速答案：Figma 模板適合加速起稿，但正式專案仍要調整品牌、內容與互動邏輯。

UI Kit 和 Template 的價值不是「直接套上去就完成」，而是省掉重複起稿時間。真正要交付給客戶或上線產品，還是要改品牌語氣、內容結構、元件狀態、RWD 和互動。這篇整理 Figma UI Kit、官方設計系統、Dashboard template、網站版型與元件系統；正文只引用研究表中已查證、預覽圖通過 QA 的 A/B 資源。

先看分類：UI Kit、Template、Design System 不一樣

類型	代表資源	免費/付費	適合用途	授權注意
商業 Figma UI Kit	Untitled UI、UI Prep、Frames X、Setproduct	Freemium / 付費	SaaS、Web app、Dashboard、Landing Page	Free/Pro、單人/團隊、Figma/Code 授權分開看
官方 Design System	Material、Apple、Fluent、Carbon、Atlassian、Primer	免費	App、企業產品、設計規範、元件治理	可參考元件邏輯，但不可誤用品牌、Logo 或官方背書
前端生態 UI Kit	MUI、Flowbite、Radix、Chakra、Ant Design	免費 / 付費	設計稿與前端元件對齊、React/Tailwind 專案	Figma 資源、程式碼、Pro 元件授權通常分開
模板與素材市集	UI Store、Craftwork、Relume、TailAdmin、shadcnblocks	免費 / Freemium	起稿、網站區塊、Dashboard、Mockup、社群圖	聚合站不是統一授權來源，每個模板要逐款確認
企業級元件系統	Arco、Semi、TDesign、Lightning、Elastic	免費	B2B、資料產品、管理後台、內部工具	適合參考結構，正式品牌仍要重做視覺和元件規則

挑 Figma 模板前先問 5 件事

• 這是要做網站、App、Dashboard、簡報，還是完整 design system？
• 模板是否支援元件狀態、auto layout、variables、responsive variant？
• 它能不能商用？能不能用在客戶案？能不能交付給團隊多人使用？
• 是否有對應前端元件？如果有，Figma 和 code 是否同一套邏輯？
• 改完後能不能看出品牌差異，而不是像直接套版？

25 個 Figma UI Kit / Template 資源推薦

1. Untitled UI

官方網站。高完整度 Figma UI Kit，適合產品設計與 SaaS 介面快速起稿

• 價格型態：Freemium
• 適合用途：SaaS UI、Dashboard、Landing Page、設計系統起稿
• 授權注意：需授權；Free/Pro、Figma、React、商用與團隊使用依方案；完整商用、React 元件與團隊協作需看方案；模板不能直接當品牌完成稿

2. UI Prep

官方網站。把 UI Kit 和設計系統方法放在一起，適合新手建立 Figma 工作流

• 價格型態：Freemium
• 適合用途：Figma design system、設計系統訓練、產品 UI
• 授權注意：需授權；UI Kit 與課程/資源依方案；不同套件與訓練內容授權不同；正式案要確認可否用於客戶專案

3. Material Design Kit

官方網站。官方 Material 設計資源，適合建立 App UI 與主題系統

• 價格型態：免費
• 適合用途：Material 3 App、Android、跨平台產品、主題系統
• 授權注意：可使用；需遵守 Material Design 與 Google 相關規範；適合 Material 生態；非 Material 品牌需調整，不宜硬套外觀

4. Apple Design Resources

官方網站。做 Apple 平台介面必看，可下載官方設計資源與模板

• 價格型態：免費
• 適合用途：iOS、iPadOS、macOS、watchOS、visionOS App 設計
• 授權注意：需遵守 Apple Design Resources 與平台規範；只能作為 Apple 平台設計參考；商標、App Store、平台規範需另外遵守

5. Microsoft Fluent 2

官方網站。大型企業設計系統代表，適合參考元件、可用性與文件結構

• 價格型態：免費
• 適合用途：Microsoft 生態、企業軟體、跨平台產品 UI
• 授權注意：需遵守 Microsoft Fluent 使用規範與品牌規範；不是通用品牌模板；套用前要確認產品是否適合 Fluent 語氣

6. IBM Carbon Design System

官方網站。官方提供 Figma kit 與設計規範，適合資料產品和 B2B 介面

• 價格型態：免費
• 適合用途：企業產品、Dashboard、資料密集型介面、設計系統
• 授權注意：需遵守 Carbon/IBM 開源與品牌相關條款；IBM 品牌資產不可誤用；元件樣式需依產品品牌調整

7. Atlassian Design System

官方網站。適合參考成熟 SaaS 設計系統與元件治理方式

• 價格型態：免費
• 適合用途：團隊協作產品、SaaS、工作管理、企業工具
• 授權注意：需遵守 Atlassian 品牌與設計系統使用規範；Atlassian 品牌元素不可誤用；元件規範需轉成自家品牌語氣

8. Primer Design System

官方網站。適合開發者工具與文件型產品參考元件結構

• 價格型態：免費
• 適合用途：開發者工具、文件型產品、Dashboard、GitHub 生態
• 授權注意：需遵守 GitHub/Primer 開源與品牌規範；GitHub 品牌和商標不可誤用；風格偏工程工具

9. MUI for Figma

官方網站。適合使用 MUI React 生態的團隊，把設計與前端元件對齊

• 價格型態：付費
• 適合用途：React 產品、MUI 專案、Dashboard、企業 UI
• 授權注意：需授權；Figma kit 與 React 元件使用依 MUI Store 條款；付費授權；設計稿與程式碼授權需分開確認

10. Flowbite Figma

官方網站。Tailwind 生態常見 UI kit，適合設計稿接前端元件

• 價格型態：Freemium
• 適合用途：Tailwind CSS 產品、Dashboard、Landing Page、SaaS UI
• 授權注意：部分可商用；Free/Pro 元件與模板依 Flowbite 授權；Pro 元件與模板需付費；Figma 與程式碼授權需分開看

11. TailAdmin

官方網站。適合快速參考後台版型與 dashboard 結構

• 價格型態：Freemium
• 適合用途：Admin dashboard、SaaS 後台、資料產品、管理介面
• 授權注意：部分可商用；Free/Pro template 依方案授權；模板偏前端和 dashboard；Figma/程式碼版本與商用範圍需確認

12. Setproduct

官方網站。Figma UI kit 商品完整，適合找特定產品類型模板

• 價格型態：Freemium
• 適合用途：AI UI、Dashboard、Web app、設計系統模板
• 授權注意：需授權；各 UI kit/模板依商品條款；不同商品授權不同；購買前看是否允許客戶案和商用

13. Frames X

官方網站。高品質 Web UI kit，適合網站和產品頁快速起稿

• 價格型態：付費
• 適合用途：網站設計、Web app、Landing Page、Design System
• 授權注意：需授權；Figma UI kit 與 web design system 依商品條款；付費套件；正式商用與團隊使用需看授權

14. UI Store Design

官方網站。免費 UI kit 數量多，適合找起稿素材和模板方向

• 價格型態：免費
• 適合用途：免費 UI kit、模板、App/網站設計靈感
• 授權注意：部分可商用；每個 UI kit 需逐款確認授權；聚合站不是統一授權來源；下載前要看原作者條款

15. Craftwork UI Kits

官方網站。素材類型完整，適合一次補 UI kit、mockup 和插圖資源

• 價格型態：Freemium
• 適合用途：UI kit、Mockup、插圖、品牌素材、簡報視覺
• 授權注意：部分可商用；Free/Pro、素材包與訂閱依條款；免費素材與 Pro 素材授權不同；需確認客戶案與商用範圍

16. shadcnblocks

官方網站。適合 shadcn/ui 和 Tailwind 專案找網站區塊與版型

• 價格型態：Freemium
• 適合用途：shadcn/ui、Tailwind blocks、網站區塊、Landing Page
• 授權注意：部分可商用；blocks、templates 與程式碼依方案；偏前端 blocks，不是完整 Figma design system；正式上線仍需工程整理

17. Relume Library

官方網站。大型 Figma 網站元件庫，適合快速搭頁面結構

• 價格型態：Freemium
• 適合用途：網站線框、Sitemap、Webflow/Figma 頁面區塊
• 授權注意：需授權；Figma library、site builder 與團隊功能依方案；偏網站和 Webflow 流程；完整團隊使用需看方案

18. Ant Design

官方網站。企業級設計系統代表，適合後台和資料產品參考

• 價格型態：免費
• 適合用途：企業後台、B2B 產品、資料密集 UI、React 生態
• 授權注意：需遵守 Ant Design 開源與品牌相關規範；官方規範偏 Ant/React 生態；Figma 資源需另查版本和授權

19. Arco Design

官方網站。提供設計與開發資源，適合參考企業級 UI kit 架構

• 價格型態：免費
• 適合用途：企業級產品、前後端一致設計系統、管理後台
• 授權注意：需遵守 Arco Design 開源與品牌規範；偏企業級系統；套用前需調整品牌和元件規則

20. Semi Design

官方網站。適合中文團隊參考企業級設計系統和元件文件

• 價格型態：免費
• 適合用途：企業應用、內容平台、Dashboard、React 產品
• 授權注意：需遵守 Semi Design 開源與品牌規範；中文文件友善，但仍需看元件與資源授權；品牌不可直接套用

21. TDesign

官方網站。多端設計系統完整，適合參考元件規範和跨端設計

• 價格型態：免費
• 適合用途：企業產品、多端設計系統、管理後台、App/Web UI
• 授權注意：需遵守 TDesign 開源與騰訊品牌相關規範；騰訊品牌資產不可誤用；Figma/Sketch/程式碼資源需分別確認

22. Radix Themes

官方網站。適合產品設計和前端共同討論元件結構與狀態

• 價格型態：免費
• 適合用途：React UI、設計系統、產品元件、shadcn 生態參考
• 授權注意：需遵守 Radix UI 授權；品牌與範例資產另看條款；不是傳統 Figma UI kit；更適合作為元件語言和設計系統參考

23. Chakra UI

官方網站。適合 React 團隊用來對齊設計元件和前端元件邏輯

• 價格型態：免費 / 付費
• 適合用途：React 產品、元件設計、Dashboard、設計系統參考
• 授權注意：需遵守 Chakra UI 授權；Pro 元件另依方案；Figma/template 資源需看官方或 Pro 方案；不是純設計素材站

24. Salesforce Lightning Design System

官方網站。成熟企業級 design system，適合參考大型 B2B 介面規範

• 價格型態：免費
• 適合用途：企業 CRM、B2B 產品、表單、資料密集介面
• 授權注意：需遵守 Salesforce/SLDS 使用與品牌規範；Salesforce 品牌不可誤用；元件風格偏企業 CRM

25. Elastic UI

官方網站。適合資料密集型 UI 和工具型產品參考元件設計

• 價格型態：免費
• 適合用途：資料產品、搜尋分析、Dashboard、技術型介面
• 授權注意：需遵守 Elastic UI 開源授權與品牌規範；偏工程與資料產品；Figma kit 狀態需依官方資源確認

使用情境建議

SaaS 和 Dashboard 起稿

Untitled UI、Frames X、Setproduct、TailAdmin、MUI for Figma、Flowbite Figma 都適合快速起稿。重點是先用模板建立結構，再替換品牌色、內容密度、資訊架構和元件狀態。

官方 App 或平台設計

Apple Design Resources、Material Design Kit、Fluent 2 適合做平台語氣明確的產品。這些資源不要當成通用美術模板，它們更像平台規範。

企業級內部工具

Carbon、Atlassian、Ant Design、Arco、Semi、TDesign、Lightning、Elastic 更適合 B2B、資料產品和管理後台。這類系統看起來安靜，但元件狀態和文件結構很值得參考。

網站區塊與 Landing Page

Relume Library、shadcnblocks、Craftwork、UI Store Design 適合找網站區塊和版型。使用時不要整頁照搬，至少要重排段落順序、替換內容邏輯和調整視覺節奏。

設計稿接前端

MUI、Flowbite、Radix、Chakra 這類資源適合和工程一起討論。設計師看的是元件語氣，工程看的是 API、狀態和可維護性，兩邊要一起對齊。

模板改稿檢查清單

• 先替換真實內容，不要只用 lorem ipsum 看版面。
• 改品牌色、字體、間距、圓角、陰影，不要只換 Logo。
• 檢查 hover、disabled、empty、error、loading 等元件狀態。
• 確認手機版、平板、桌機的 responsive 規則。
• 保留模板來源、授權頁、購買紀錄和使用範圍。

FAQ

Figma 模板可以商用嗎？

要看每個模板的授權。免費模板不一定可商用，商業模板也可能限制團隊人數、客戶案、轉售、再散布或程式碼版本。

UI Kit 和 Design System 差在哪？

UI Kit 通常是元件和版型素材；Design System 還包含規則、命名、使用情境、設計 token、文件和治理方式。UI Kit 可以是起點，但不是完整設計系統。

免費模板適合客戶案嗎？

可以當起稿參考，但要先確認授權，並且大幅調整品牌、內容和互動。直接套版交付通常風險很高，也很容易撞版。

模板要怎麼改才不像套版？

先重做資訊架構和內容，再調品牌字體、色彩、間距、元件狀態和圖片風格。不要只換 Logo 或主色。

Figma UI Kit 需要和前端框架一致嗎？

不一定，但若產品已使用 MUI、Flowbite、Radix、Chakra、Ant Design 等前端元件，最好選相近的設計資源，減少設計和工程落差。

延伸整理

• 看創作邦 Figma 工作流整理
• 看創作邦模板資源
• 看更多創作邦設計資源

最後更新：2026-06-27。本文是設計資源整理，不取代各網站最新授權條款。授權不確定時，請在專案內標註「需自行確認授權」。