如何讓AI成為設計師最強的工作夥伴 - Figma AI 工具
❖ 前言
首先介紹「Figma AI 工具篇」，現在大部分設計師與工程師都會利用Figma來溝通，所以能多了解並善加利用Figma生態圈的 AI 工具們，既不用花費學習其他AI工具的成本，對我們的工作流程也事半功倍。
此系列文章將分為三篇，「Figma AI 工具」、「拓展輔助 AI 工具箱」、「掌握 AI 指令技巧」。
❖ Figma AI 工具 - Figma Make
Figma Make 是Figma 官方在2025年5月推出的 AI 工具。
用自然語言(支援中文/英文)描述設計，Figma Make 就能快速生成可編輯的原型，所有元件皆可自由編輯。
最適合應用在「專案初期」!!
快速產出高保真原型以驗證想法，或與客戶、團隊溝通概念時，Figma Make 可以將你的想法轉化為可完整運作的原型或網頁應用程式。
我們可以在 Figma 左側選的 Recents, Drafts 頁籤裡，找到在左上方的 Figma Make。
✦ Figma Make 介面介紹
- 指令區
在此指令區清楚描述設計需求，且支援自然語言(中/英文)，可以多次修改內容。指令內容描述得越清楚，產出的結果越精細。
- 指令輔助功能區
Attatch design/Upload image : 可以直接貼Figma Frame的設計畫面，也可以上傳圖檔。
Select a library : 匯入設計規範，Figma Make 會依據提供的設計規範產出畫面。
Point and edit : 可以在預覽的畫面中，直接指定單一元件下指令修改樣式。
- 重整頁面、Console、切換裝置(RWD)
Refresh Preview : 重整預覽。
Open console : 用來監看、測試與除錯 AI 動作的輸出結果的開發工具。
Mobile Preview : 可以利用這個工具看到畫面在各個裝置下的預覽樣式，就可以看出排版是否如你預期。
- 預覽區、程式碼區
預覽區 : 直接預覽介面設計樣式。
程式碼區: Figma Make 提供可編輯的 React, HTML, CSS 程式碼結構，方便前端工程師後續串接。
- 產出figma設計、預覽模式、其他(發佈後)設定
Copy design : 將在 Make 做好的高保真互動 Prototype，透過複製將畫面複製到Figma設計檔裡，去做更精美的調整。
Open full-screen view : 開啟全螢幕預覽。
Make settings : 發佈之後設定。可以透過這裡看到發布的網域資訊，也可以把整包程式碼放到GitHub。
- 發佈成figma site、分享檔案
Publish : 把做好的檔案發佈到Figma Site，發布之後會給URL，可以將這個URL提供給想快速對焦需求的客戶或是團隊。
✦ Figma Make 實戰案例
❖ Figma AI 工具箱
Figma AI 工具 提供了一整套 AI 工具，涵蓋範圍從規劃到交付的各個階段。
適用對象：付費方案，需要有Full seat。
✦ Figma AI 工具介紹
- 編輯圖片(Image editing)
Remove background : 選取一或多張圖片，移除圖片背景以突顯主體。
Make an image : 你可以選取一個圖層，將圖片填入圖層，也可以直接建立新的圖片圖層，使用指令文字生成圖片。
Edit image : 選取你想編輯的圖片，使用指令文字來編輯圖片。
Boost resolution : 選取一或多張想增強的圖片，提升低解析度圖片的清晰度。
- 設計工具(Design tools)
Replace content : 替換內容文字，可以將佔位文字替換成更貼近實際的文字內容，可以選取單一或多個重複元件一起替換。
First Draft : 透過指令文字，可以在短時間內將創意轉換為可編輯的線框或設計稿。能幫助快速探索設計可能性，減少從零開始創建初期設計的工作量。
Add interactions : 透過指令文字，你可以快速為你的設計加入多個prototype互動與連結。減少手動為每個畫面設定連結的時間。
Rename layers : 透過指令文字，你可以快速為你的圖層賦予有意義的名稱，有助於整理檔案、簡化大量圖層命名的流程。有幾種情況AI不會重新自動命名，例如：我們自己手動命名過的圖層、被隱藏或鎖定的圖層、個別的向量圖形、在intance內的子圖層。
Search with image or selection : 協助你更快速地找到團隊、組織、或社群檔案中的設計元件或資源，讓你更快進入設計流程、著重在創意思考。
- 文案發想(Riffing and writing)
Rewrite this ... : 透過指令文字，可以為選取的文字圖層調整文案語氣、風格，或從零開始生成文案。
Translate to ... : 對多語系的設計來說，這個功能可以快速讓你預覽在其他語言中顯示的樣貌。目前提供28種語系。
Shorten : 你可以將冗長的段落優化為更簡潔的文案，特別適合字元受限的UI元件或版面設計。
❖ 總結
Figma Make 可以幫忙我們在概念發想、風格選定、原型展示快速地呈現畫面，可以更快速且方便的與專案團隊成員聚焦設計畫面及風格。
但我實際用過 Figma Make 之後，建議FIgma Make適合放在專案初期前期發想和快速迭代需要與客戶或團隊成員快速對焦的時候，因為 AI 產出的排版較為制式，若想要做出跨圖版面等設計都還是建議使用 Figma 或其他繪圖軟體來繪製。
下一篇「如何讓AI成為設計師最強的工作夥伴 - 拓展輔助 AI 工具箱」我會介紹如何搭配其他 AI 工具，讓整個設計工作流程更完整。
