Material UI for Figma
加強設計師與開發者之間在 Material UI 與 Figma 之間的協作。
開始使用
Material UI Figma 版包含 Figma 中 Material UI 程式庫 React 組件的呈現方式，以便設計師和開發人員能夠更有效率地溝通和迭代。此設計套件包含
- 設計與 Material UI 相同的組件
- Material Design 未涵蓋的其他組件和功能
- 來自 React 程式庫的共用術語，用於 props、變數、設計 tokens 和其他值
社群版 vs. 完整版
Material UI 設計套件提供 社群 (免費) 版 和 完整 (付費) 版。
| 社群版 | 完整版 | |
|---|---|---|
| 不含自訂的組件 | 全部 | 全部 |
| 含自訂的組件 | 4 | 全部 |
| Figma 變數 | - | ✅ |
安裝完整版
首先解壓縮包含 .fig 檔案的 .zip 壓縮檔。然後，您可以依照 Figma 的匯入指南 或 將其新增至您的團隊程式庫。
變更記錄
前往 GitHub 上的「發行版本」標籤頁 以追蹤新的設計套件版本。
主題
本機變數
此設計套件使用 Figma 的本機變數來建立樣式集合，其樣式集合可與 Material UI 程式碼的主題結構相媲美。依照下方影片中的步驟，查看所有可用的變數
自訂色彩
使用變數面板來自訂色彩，如下方影片所示
自訂排版
排版自訂使用本機樣式，而非本機變數。體驗與修改色彩相似，如下方影片所示
在淺色和深色模式之間切換
此設計套件使用 Figma 的本機變數，讓您在淺色和深色之間切換變數模式，如下方影片所示
組件
編輯主要組件
您可以使用 Similayer 外掛程式，一次選取多個共用某些屬性的組件。
表格組件
新增欄
下方影片示範如何新增欄，方法是將儲存格從其列組件中分離，讓您能夠自由移動內容。
在主要組件中新增欄
表格和資料網格組件預設隨附有限數量的欄。下方影片示範如何透過直接在主要組件上複製儲存格來新增欄
程式碼同步 (beta)
您可以使用 Figma 的同步外掛程式 將主題 tokens 和組件自訂項目匯出至程式碼。設計套件的建置目標是盡可能接近 React 組件，以便與程式碼流暢整合。
深入了解 Material UI 主題結構，方法是前往 「主題設定」 和 「預設主題檢視器」 頁面。
使用新的設計套件版本
我們通常不會在更新中發布重大變更，而是新增內容。如果您需要更換已更新的單一組件，則有幾種選項
- 將新版本的設計套件新增為程式庫，並使用 新的 Figma 程式庫交換功能。組件在兩個程式庫中必須具有相同的名稱。
- 觀察新的組件，並將變更重新套用至現有專案。當您需要更新多個專案時，這是建議的方法。
- 將新的組件複製並貼到您的現有專案中，給它一個不同的暫時名稱，然後將 tokens 重新連結至新的組件。當使用 「選取相似項目」外掛程式 時，這應該不會超過五分鐘。然後，您可以移除舊的組件並更新新的組件名稱。
意見回饋和錯誤報告
如果您有任何意見回饋，我們很樂意聽取您的意見。
整合
Anima
透過 Anima，您可以輕鬆地將 Figma 設計轉換為 Material UI 程式碼。Anima 會智慧地將您在 Figma 中的設計組件與最相關的程式碼 API 進行比對，確保產生的程式碼是乾淨、可重複使用且可供生產環境使用。Anima 支援 Figma 和 VS Code，因此您可以選擇最適合您的工作流程。
- 使用 Anima Figma 外掛程式 直接在 Figma 中轉換您的設計。
- 使用 Anima VS Code 擴充功能 (Frontier) 在您的開發環境中無縫產生和編輯 Material UI 程式碼。
前往 Anima 以了解更多詳細資訊。
Quest
Quest 提供與此設計套件的原生整合。
當您使用此套件設計組件時，您可以使用 Quest 外掛程式 將您的 Figma 設計轉換為 Material UI 程式碼。產生的程式碼應是乾淨且可供生產環境使用。
前往 Quest 文件 以了解更多詳細資訊。