Figma AI 初步試用後分析(1/2)

由於突然獲得 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

Previous
Previous

8 個技能:讓 UX 設計師和 AI 共存

Next
Next

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