前言
嗨 我是 Syuan 👋，目前在一間顧問公司擔任設計師。近期，我有幸參與了一個外部團隊的專案，在這個專案中，我與甲方團隊攜手合作，共同打造數位產品。這次專案有別於我過往的經驗，使用了 Chakra UI 框架作為設計系統的基礎，這是一個專為 React 打造的開源 UI 元件庫。接下來的內容將分享我的實作經驗，帶你一同探索這趟「查克拉之旅」。
Part 1 -專案導言
A. 專案背景脈絡
B. 如何選擇 UI 框架
Part 2 -實際案例 🙌
C. 利用 Chakra UI 製作設計系統
D. 導入後回顧
＊本文並非針對設計系統的教學文，旨在分享 Chakra UI 框架實作經驗＊
A. 專案背景脈絡 👉
甲方團隊 — 慧景科技，是一間專注於能源的 SaaS 服務軟體公司，目前線上的軟體服務為「PHOTON 智能太陽能監控系統」。
今年度，甲方團隊計畫擴展能源產品線，然而在此之前，必須先解決一系列難題。其中一個主要的問題是，隨著時間推移，產品變得越來越複雜，原先的設計規範已不足夠應用，慢慢浮現視覺跟交互一致性的問題，例如：元件擺放的邏輯不一致、同一個元件多種樣式，舊元件不符合新的品牌形象等。
這些問題除了造成使用者體驗不佳外，也影響工程師的效率及產品經理的需求提案。
引入設計系統的用意，是為了解決產品累積的問題。設計師首先需盤點過往產品使用情境，定義當前的設計系統，並確保能夠為不同的產品線提供統一的設計解決方案。利用通用的設計系統，提高效率及維持一致的用戶體驗。
＊本文介紹不會涉及該專案實際畫面＊
B. 如何選擇 UI 框架? 👉
理解設計系統的重要性後，接下來要探討設計系統與 UI 框架之間的關係。看到此刻的你，必須先面臨靈魂拷問：「設計師不是前端，為什麼要了解 UI 框架？有什麼意義？」 🫣
先別緊張～設計師沒有必要深入程式開發，了解 UI 框架知識和元件組建的方式，能幫助設計師更好地與開發團隊合作。熟悉 UI 框架的元件和結構（學習彼此的詞彙），可以更清楚地傳達設計需求，並考慮到 技術可行性。
為什麼需要 UI 框架？怎麼選擇？
為了更好地理解這些 UI 框架，需要先談談它們背後的歷史發展。
UI 框架的演變
在過去，開發人員在構建 React 應用程序時，經常需要花費大量時間處理 UI 元件的風格和外觀。這不僅耗時費力，還可能導致產品內的一致性問題。UI 框架的誕生，正是為了解決這個問題。
不同團隊在選擇 UI 框架時，會考慮各種不同的因素，包括專案需求、導入的時空背景、轉換成本…等等。
舉例來說：在早期，可選擇的 UI 框架有限，僅有 Ant Design 及 MUI 元件庫是相對完整，Ant Design Pro 雖然能快速構建後台系統，但在面對客製化元件需求時，開發人員難以調整元件，無法快速符合各專案所需，因此早期有客製化需求的團隊更傾向選擇 MUI。
近年來 ，UI 框架不斷推陳出新，選擇越來越多。Chakra UI 因其易於使用、響應式設計、容易客製化，且強調可訪問性而廣受歡迎，雖然設計元件完整度不及成熟的設計系統，但它提供開發人員更靈活友善的開發方式。
簡言之，當下哪個 UI 框架最符合需求，能夠效益最大化，就是最好的選項 🚀
在接下來的章節（part 2）
將呈現設計細節：創建 Chakra UI 主題，運用 Chakra UI 元件建構出符合需求的設計系統，以及處理自定義元件。
參考資料 👀
📌 如果你想更了解 Chakra：
以上是我個人專案回顧的分享，如果你喜歡這次內容，請拍手給與小小的回饋鼓勵 👏👏👏
