Figma AI 初步試用後分析（1/2）

Written By kogi ko

由於突然獲得 Figma AI，時間倉促關係，這主題會分上下兩篇文章記錄。

我會透過 3 個專案，集中在 Figma AI 的兩個功能去研究：”First Draft” 和 “Make Changes”裡的 Prompt的應用。

先簡單總結一下：

它是一個 UI 頗強，但學識有限的實習生，對 UX 原則和基礎認識較弱，主要只是想把 UI 弄得好看。

文章重點包括：

1️⃣ 3 個專案測試（0-1 設計），讓大家了解 FIGMA AI 強弱項和限制

2️⃣ UX 新手應該害怕 FIGMA AI 嗎？

3️⃣ 面對 FIGMA AI，UX 設計師應怎麼定位自己，才能保持競爭力？

快速看一下，Figma AI 的主要兩個功能：”First Draft” 和 “Make Changes”：

First Draft - 提供 4 種 0 - 1 設計方法，包括：

  1. Basic app (High Fidelity Design)

  2. App wireframe

  3. Basic site (High Fidelity Design)

  4. Site wireframe

Make Changes - 選取了由 AI 生成的界面後，便有 Make changes 的選項，用作修改由 AI 產生出來的內容或設計。

我用了 3 個假想的專案去測試一下”First Draft” 和 “Make Changes”裡的 Prompt的能力。為了方便展示測試結果，下面大部份測試都以 Basic app 產出 UI。

結果如下：

專案 1 ：創建電商產品清單頁

First Draft: Prompt

✅ 大部份 UI 都如期產出

✅ Icon 使用了 24x24
✅ 產品標題行距沒有使用預設 （Auto）的設定，而是自設 135%，這接近行內建議的最低標準
✅ 使用了 8 Grid System

✅ 價錢有顯示兩個小數位，如 749.99

❌ 心型圖標和圖片之間的行距出現小數位（如：12.5）

❌ 沒有 5 星評價的 UI

Make Changes: Prompt

❌ 嘗試使用 Make Changes 補上 5 星評價的 UI 失敗，被 AI 認為太複雜。

Make Changes: Prompt

❌ 批量更換圖標失敗，被 AI 認為太複雜。

Make Changes: Prompt

✅ 成功使用 Make Changes 加上新內容。

Make Changes: Prompt

❌ 批量更換風格、批量移除字眼失敗

我指示它去將 Seller Name 變成 Underline，結果連價錢都變成 Underline。

Make Changes: Prompt

✅ 批量更換內容成功

✅ 圖片由手機產品更換成超市產品後，價錢也會自動合理調整

Make Changes: Prompt

❌ 嘗試整個版面由 Listing Page 變成某產品的 Detail Page，失敗。

First Draft: Prompt

如果要產出下一頁的設計，便要重新以 First Draft 來處理。結果：

✅ 大部份 UI 能成功產出

❌ 功能有重複（如心型圖標、3 張縮圖和 Carousel 有衝突）

❌ 內容未能合理地展示相關功能（牛奶通常沒有 Size 要去選）

專案 2 ：創建叫車手機 App 首頁

First Draft: Prompt

✅ 有展示基本內容如 Pick Up Location和 Destination。

❌ 不能夠同時間產出多個設計選項

❌ 重複功能（兩個錄音圖標）

❌ I.A. 嚴重出錯（如：地圖在這裡根本沒有用）

First Draft: Prompt

我見到上面那個 UI 的 I.A. 嚴重有錯，於是嘗試修改一下 Prompt，試一下它的理解能力，我刻意提到一個抽象一點的要求： ‘make it super simple for elderly to use’，結果它認為 ‘make it simple’ 便是將大部份的組件移除，效果比之前更差。

First Draft: Prompt

我決定給仔細的 Prompt，結果：

✅ 有提供 3 個車款的選擇

❌ 不明白為何有 3 個輸入地址選項

❌ 3 個車款選擇的 UI 形狀和插畫風格並沒有跟隨指示

 

專案 3 ：創建員工開支報銷手機 App

之前的兩個專案，都是大家一般會接觸到的 B2C 產品，現在我試一下一個在 B2B 場景裡的其中一種產品，它能夠讓員工去查看自己之前申報的報銷 (Reimbursement)的狀 況，還有添加新的報銷。

First Draft: Prompt

❌ 錯得離譜

First Draft: Prompt

我之後修改 Prompt，並寫得十分仔細，並試了5次以上，例如：

Develop a mobile app homescreen for a user to submit reimbursement, with reimbursement history in listing format, highlight the 'Total Spend Amount' on each reimbursement, with 1 line description each and with status like 'successful' or 'pending' using chip UI, sort by latest reimbursement, with a 'add' button at right bottom corner

結果：

✅ “增加”按鈕順利產出，能自動判斷是一個 floating 按扭

✅ 基本內容產出

❌ 內容的 Visual Hierarchy 和 I.A.錯亂，錯重點（如：價錢和狀態應該是重點要看的資訊，可是並沒有突顯出來）

❌ 會出現不相關的功能如圖片和『心型圖標』？

First Draft: Prompt

我再寫更仔細的 Prompt，結果：

✅ 有替我強調價錢

✅ 沒有多餘圖片

❌ 不同『狀態』沒有使用不用顏色（不用那麼大吧）

❌ 沒有日期

人手改動

最後我決定人手改動，建立 Component，修改 I.A. 和 Visual Hierarchy

Auto-filled content

這個真的太神，只需要輕輕一拉，便自動產出相關內容，但還是有些出錯：

✅做到隨機顯示相關標題、隨機價錢和隨機狀態

❌日期不是順序

簡單總結一下：

它是一個 UI 頗強，但學識有限的實習生，對 UX 原則和基礎認識較弱，主要只是想把 UI 弄得好看。

強大地方：

  1. 適合快速生成慨念，或作新專案研究。

  2. 適合快速提供新點子作參考。

  3. 某些 UI 的產出的完成度和質量有驚喜。

  4. 常用場境估計因為較多數據去訓練 FIGMA AI，如電商介面，較容易產出相關度高的介面。

暫時限制：

  1. 用 Made Change 來更換內容還可以，但批量更換設計組件則暫時還未支援。

  2. 對於過於慨念的指令並不適合，如： make it super simple for elderly to use

  3. 如果想介面符合期望，需要逐一列出具體內容和功能的需求，可是它現在的理解能力還是有限，當需求太多時，便會處理不了（這個跟早期的 CHATGPT 一樣）

  4. 目前只能集中一個介面去自動生成設計，且不能作太仔細的批量改動。

    • 如：嘗試過使用 MAKE CHANGE 去改變一組字的 LAYOUT SETTING，由 FILL 變成 HUG，結果是失敗的。

    • 如：暫時未能作出十分仔細的改動，如批量更換圖標，或部份 UI 更換顏色。

  5. 暫時只能生成真實風格圖片，插畫暫時還未能支援。

弱項：

  1. 只能單頁生成設計，不能兼顧前後頁面設計流程。

  2. Information Architecture 和 Visual Hierarchy 有點亂來和隨機。

  3. 嘗試過按目前的頁面生成相關的下一頁，結果 FIGMA AI 認為太複雜。

  4. 生成出來的 UI 沒有/不會生成 Component，則使是一樣的組件重複地出現。

  5. 如果原來的頁面不是由 AI 生成，則不能夠使用 AI 中的 Make Change 作出更改。

如果原來的頁面不是由 AI 生成，則不能夠使用 AI 中的 Make Change 作出更改。

這代表了對大部份現有團隊的設計檔，這 Make Changes 便起不了作用。

初步簡單想法：

UX 新手應該害怕 FIGMA AI 嗎？

  • 簡單說：不應該

  • AI 能夠變得強大，是因為它某方面數據：大部份的 AI 建構方法，都是通過大量數據去讓 AI 學懂一些『常用』法則，越是『通用』或『常用』的數據，便會讓 AI 越容易產生相關的設計出來。

  • FIGMA AI 加快部份設計過程：它簡化了部份設計程序（做競品研究 》分析 》自己畫介面），可是當相關數據缺乏時，FIGMA AI 便顯得無能為力，甚至經常出錯。

  • FIGMA AI 只能夠提供『通用』方案：基於數據有限，FIGMA AI 在短期內只能夠解決一般且大眾的『通用』方案。

  • FIGMA AI 在數據不足情況下，只能夠亂猜：這是我的感覺，特別是在上面的 B2B 專案，我估計 FIGMA AI 並沒有足夠的相關數據，加上由於我對該場景比較理解，知道用戶的期望和應該強調的視覺元素，因此我能夠判斷出它產生出來的設計跟實際可行的方案是差得遠。

  • 現實中要處理的問題較複雜和獨特：在現實中，每家公司面對要解決的業務問題和用戶問題都十分複雜和獨特，短期內我不應為 FIGMA AI 能夠針對你面對的問題去提供一個極易用的方案。


那之後 FIGMA AI 的數據會越來越多嗎？

肯定會的，但在中期發展中，我感覺上它最多可能定位在：

  1. 提供參考點子

  2. 加快完成設計

跟現在的 ChatGPT 的定位差不多。

 

UX 設計師應怎麼定位自己，才能保持競爭力？

未來 FIGMA AI 只會越來越完善和強力，但我認為 UX 設計師對此並不需要感到擔憂。

  • 集中在解決問題的能力上：UX 設計師必須要將自己的注意力，集中在解決問題的能力上，尤其是解決複雜問題的能力。

  • 熟練 UX 基礎和了解用戶：必須要深入了解用戶行為和期望，同時需要熟練地運用 Information Architecture 和 Visual Hierarchy，將用戶洞察轉化成易用的體驗，這些都是短期內 AI 做不了的事。

  • 切換焦點和思維：最基本和簡單的事就讓 AI 來處理，FIGMA AI 是你的 UX 實習生，你來監察它的工作有否做對。

今天就分享到這裡。

謝謝你耐心閱讀！

下星期日見，

Kogi

kogi ko
Next

3 個推銷方法：穩勝第一輪面試