Figma UI3 AI tools 用法及使用時要注意的地方
Hi 我是 JF，本文分享及紀錄 UI3 AI tools 用法 & 流程、使用心得及可能應用的實際情境。最後分享我最喜歡的功能。
(建議以電腦閱讀，以更好閱讀圖像）
前言：首先看工具前，建議先觀察自己的工作流程，思考如何改進、想達成的目標，再去找相應的工具協助。
以下是以我自己的工作流程為範例，拆解後抓出 AI 可以協助的地方：
Figma 已暫時關閉「 Make Design」AI 生成 UI ，因版權爭議問題
創辦人執行長 Dylan Field 推文： https://x.com/zoink/status/1808045655082033483
讓我們看一遍 Figma UI3 AI tools，希望能幫助你更有效率設計工作。
將由左至右順序跟大家分享。
本篇暫不介紹 Make Design 及 Visual search。
呼叫 AI 工具的快捷鍵為 ⌘K (Mac), Ctrl + K (Windows)
A. Prototype 原型
快速製作 prototype 做迭代。
重點摘要：
流程的介面可以用 section 包起來，如果用 frame 或 group 去包，
AI prototype 的功能是不會出來
Figma Slide 功能可以直接放 Prototype，能直接在 slide 上操作產品，
一條龍從 mockup to presentation，很好用了。
有關 slide 的部份，我有空會再寫一篇。
08/12/2024 updated : 有關 Figma Slide 的部份
B. Replace Content 替換內容
幫你把同樣重複元件裡的文字內容，用 AI 替換成其他假資料。
重點摘要：
1. 元件必須完全相同，才能替換
2. 目前不支援圖片
3. 要替換內容的元件需要在 Auto Layout 的框架下
4. 嗯⋯⋯沒有 ChatGPT 聰明
B-1. 上圖：
這功能可為產出更貼近真實的使用情況，代替了想文案、輸入或貼上的工作。在電商、後台、交易所等有大量資訊的情境會很方便！
B-2. 上圖：
利用功能進行多語系的測試，測試介面能承載文字的量，再迭代調整。
C. Rename Layers 重新命名圖層
為圖層命名有規則的名稱
重點摘要：
1. 手動修改過的圖層名稱不會被自動更改
2. 相同元件內的同名圖層會一起命名
順帶分享命名圖層的優缺點
優點：
- 提高檔案的可讀性（團隊）： 方便自己及其他人理解、維護、開發
- 快速搜尋： 搭配搜尋功能，更快找到需要調整的地方
- 兼容自動化工具： 某些工具在命名狀態下可批次操作，增加效率
- 團隊協作及版控： 讓溝通基於同一個語言
缺點：
- 花時間： 前置規劃、溝通、維護、定規則等都需要時間
- 學習曲線： 新人需要時間學習了解及適應
是否使用命名，可做權衡取捨
如果是獨立作業或小型專案，可衡量成本再做決定；而對於中大型專案，在多人協作的情況下，命名帶來的效率性及維護性都是有利的。
D. Text Tools 文字工具
解放想 / 寫文案的勞動。
文字分為三個部份：重寫、翻譯、縮短文句
重寫
重點摘要：
1. 如果拿整個元件來改，AI 不會判斷句子該改或不改，用 prompt 來控制效果也不太好
2. 可以依據你下的 prompt 更改語氣，字數
不用再想假文案，Figma AI 幫你搞定了。
D-1 上圖：
功能雖然有下 Prompt 的流程，但產出結果來說比 ChatGPT 弱，所以建議用一些簡單的指令就可以了。
翻譯
重點摘要：
在開發多語系應用時，多嘗試不同語系對照的方法，並與工程師、行銷、PM 等角色協作。
多語系的應用
每個團隊在開發多語系應用時，都可能遇到文件同步、維護、參照等問題。或許利用 Figma 來解決這些問題是一個不錯的方法。
例如，在 Figma 中完成翻譯後，同步至文件進行校對，然後再將校對後的內容同步回 Figma。
縮短文句
重點摘要：
AI 會視你文字框作字數的調整
E. Image Tools 圖像工具
簡單的生成與去背不用再切換軟體。
圖像分為兩個部份：生成圖像、去背
生成圖像
重點摘要：
1. 生成圖片的比例預設為 512 x 512 (1:1)，
2. Prompt 會存 5 筆紀錄，不會紀錄圖像版本
我本身有使用 MidJourney，想對比生成圖的服務。測驗如下圖，有興趣也可以多生成看看。
目前生成的品質是好的，雖然人體、手指等還是會有詭異的情況，但以 Figma 的使用者量體和產圖量，之後餵給 AI 推測很快能改善。
如果不追求過於精緻的圖片、細節調整和連續風格，Figma 生成的圖像足以滿足 mockup 甚至是 launch 的需求。
去背
重點摘要：
1. 只能簡單去背，細節調整需依靠其他工具
2. 一次只能去背一個物件，過程中你可以繼續做其他事
以上就是這次 Figma UI3 AI tools 實測～ 希望能幫你更快上手！
目前 Figma UI3 個人最喜歡的功能是 Replace Content，有要處理表格類或商品陳列類型的 UI mockup 實在是方便！其次就是翻譯，特別是在亞洲，產品通常要處理中英語系。
MurMur 心得 : AI 趨勢下，隨著AI工具越來越多，其中設計師的挑戰是未來將面臨的訂閱成本（Figma 感覺會漲，AI 不便宜），因此，設計師需要回顧並優化工作流程，選擇最適合自己的工具組合，控制設計成本。
編者 Instagram 帳號 @fokfokjames
https://www.instagram.com/fokfokjames/
