Figma是一款兼容瀏覽器與桌面應用程式應用的設計工具,支援多人即時協作,讓設計師、產品經理(PM)和工程師等團隊成員可以在同一份設計檔案上同時編輯、留言、討論並提供回饋。因此,它被譽為「設計界的Google Docs」可謂非常貼切。Figma主要應用於UI/UX設計、網頁設計、行動應用設計等領域,並內建原型製作(Prototyping)、元件系統(Component System)以及協作功能,能大幅提升設計效率與一致性。另外,Figma提供免費版本(功能有限制),也有付費版本,提供更多團隊管理與進階功能。
近代圖形化人機介面設計的流程中,常出現設計師與工程師之間的溝通瓶頸,導致設計理念與最終執行成果產生落差。如下圖1所示,產品客戶明確表示,他們希望由使用者體驗(UX)團隊,而非工程師,主導使用者介面(UI)的設計與開發工作。UX團隊的職責在於全面掌控介面的螢幕佈局、互動行為及使用者回饋,並期望工程師能忠實部署設計成果,以建立由UX引領、工程支援的協作流程,提升整體產品品質與使用者滿意度。
https://thejibe.com/post/big-differences-between-ux-and-ui-design
根據前述有關Figma的特性、UX/UI的差異與其在設計流程中的重要性,Microchip圖形化設計工具針對嵌入式系統的需求,規劃出一套完整且高效的設計流程,如圖2所示。此流程從終端客戶提出產品構想開始,UX團隊可利用Figma平臺上進行使用者介面(UI)與使用者體驗(UX)的設計與原型開發。透過Figma的即時協作與元件化管理特性,團隊能快速完成設計驗證與版本整合。設計完成後,可藉由Figma Plugins中的MGS Exporter外掛,將設計成果直接匯出至MGS Composer中,進一步整合至Microchip的圖形化開發環境。
在進行實際硬體驗證之前,開發者可先透過Web與Desktop模擬器進行設計預覽與互動測試,以確認介面佈局、動態效果及使用者操作體驗的準確性與流暢度。此階段的模擬驗證可大幅降低硬體端測試的錯誤與重工風險,有效縮短開發週期。完成初步模擬後,設計可下發至實際硬體平臺進行最終驗證,以確保設計與系統執行結果完全一致。
藉由MGS所提供的開發環境、豐富的圖形化應用範例與整合工具,開發者能夠更快速地進行嵌入式GUI(Graphical User Interface)的設計與整合工作。透過結合Figma中的MGS Composer – Exporter工具以及Microchip官方提供的教育與培訓資源,整個設計流程從概念到硬體驗證得以無縫銜接。這套整合式開發架構,不僅提升了設計與驗證的效率,還進一步增強了產品在Microchip平臺上的開發可維護性與擴充性。此舉使設計團隊能更專注於創造優質的使用者體驗,同時兼顧開發速度與品質。
歡迎瀏覽以下相關的頁面,以尋找適合您的產品與資源:
https://www.microchip.com/en-us/tools-resources/configure/microchip-graphics-suite
https://developerhelp.microchip.com/xwiki/bin/view/software-tools/mgs/mgs-harmony-guide/composer-ug/figma/export/design-guide/
https://www.figma.com/community/plugin/1436449232324855213/mgs-composer-exporter
本文作者為:Microchip主任現場應用工程師 陳宇翔