Figma Make 將設計融入生活的AI工具

Figma Make 是一款 AI 驅動的新工具，為了幫助設計師和產品團隊能夠使用對話式建立功能原型、Web 應用程式、互動式 UI ，使用者能創建自己的互動式原型並也可以透過繼續對話來編輯或改進功能原型和 Web 應用程序，以及直接編輯預覽和程式碼。

主要功能

• 快速原型製作：快速將靜態螢幕變成使用者可以點擊、互動和體驗的內容。
• 數據驅動的原型：上傳文件或連接到真實的 API，使原型感覺更真實。
• 有針對性的編輯：直接操作 Figma Make 環境中元素的大小、顏色和字型等屬性。
• 要點和提示：選擇設計的特定部分並提示僅針對選區區域進行更改。
• 協作功能：原生於 Figma 系統內，因此合作團隊可以在這些互動式原型上進行協作。
• 與 Figma 網站整合：Figma Make 與 Figma Sites 中的「代碼層」功能結合，允許將設計轉換為程式碼（如 React 元件），縮短設計師與開發者之間的鴻溝，讓設計不只是視覺設計稿，而是更接近可上線的程式碼。

如何操作

如何操作 Figma Make

1. 1. 在 AI 聊天欄位中，表達你想要構建什麼樣的設計模組？你可以多描述你想要的設計風格或是附上 Figma 檔案設計。
2. 2. 發送提示後，Figma Make 會開始為您的功能原型或 Web 應用程序生成代碼。根據結果的複雜程度，Figma Make 可能需要幾分鐘才能完成程式碼的產生。

photo by Figma website

使用上的限制與考量

雖然 Figma Make 非常強大，但在目前的階段也有一些限制和問題：

如何整合與現有外部生產程式碼庫？

Figma Make 能夠將設計轉換為程式碼，但在實際導入專案時，首要挑戰是如何避免 AI 輸出的元件能與現有的程式碼結構和框架造成衝突。

1. 1. 相容性：AI 生成的程式碼是否與現有專案所使用的特定框架版本、元件庫等完全相容？
2. 2. 配置與環境：如何將 AI 生成的程式碼有效地「插入」到現有的開發環境中，避免引入額外的配置負擔或技術衝突？
3. 3. 技術問題：如果 AI 的輸出與團隊現有的程式碼風格差異過大，可能會在整合的同時，反而會增加了專案的短期技術問題。

如何維護與現有外部生產程式碼庫？

一旦程式碼被整合進現有環境時，長期的維護成本與可持續性就成為核心考量。

1. 1. 程式碼品質與可讀性： AI 輸出的程式碼是否足夠清晰、有良好的結構、並遵循了業界最佳實踐？若程式碼缺乏足夠的註解或邏輯複雜，將導致團隊在後續進行修復、功能擴展和版本升級時，需耗費更多時間理解和手動重構。
2. 2. 規範遵循度： AI 生成的程式碼可能無法完全遵循團隊既有的程式碼風格（如：命名規範、縮排格式、檔案結構等），這將破壞專案程式碼庫的整體一致性。
3. 3. 除錯效率： 當 AI 生成的程式碼出現問題時，工程師的除錯難度可能會高於手寫程式碼，導致花費更多的除錯時間。

如何保持與現有設計的一致性？

設計一致性是產品使用者體驗的基礎。雖然 Figma Make 提升了設計速度，但它面臨著如何與專案中已建立的設計系統（Design System）或元件庫進行同步的挑戰：

• 1. 設計系統的應用： 如果 AI 透過對話式生成的元件，無法完全繼承和應用現有設計系統的顏色、字體、間距或元件變體，將可能在不知不覺中創造出與品牌風格不符的新樣式。
• 2. 設計規範的遵守： 設計師必須確保 AI 的輸出是建立在現有設計規範之上，而不是每次都從頭開始創造新的視覺風格，否則將破壞產品整體視覺和互動模式的一致性。

photo by Figma website

Figma Make 被定位為一種探索工具，能幫助同時幫助不同角色的使用者迅速掌握設計的外觀、感受與操作，並輕鬆製作複雜交互或實驗性 UI/UX 概念的原型。它非常適合需要快速驗證與迭代設計的設計師、產品經理和團隊。不過，如何將這項 新興的 AI 工具的效能發揮到極致，值得所有使用者深入思考。