figma

一、設計的「Google Docs」時刻

在 Figma 出現之前，設計師用 Sketch 畫圖，存成文件，發給開發，然後發現版本不對。 Figma 把設計搬到了瀏覽器裡。它不僅僅是一個畫圖工具，它是產品團隊的操作系統。 無論是產品經理畫線框圖、設計師做高保真 UI，還是開發人員切圖，所有人都在同一個 URL 裡協作。這種「實時性」徹底終結了文件傳輸的噩夢。

二、核心功能：為什麼它是行業標準？

1. Auto Layout (自動佈局) 這是 Figma 的靈魂。

• 它模擬了前端開發的 Flexbox 佈局邏輯。
• 優勢：當你修改按鈕裡的文字長度時，按鈕會自動變寬；當你刪除列表裡的一行時，下面的內容會自動補位。這讓設計稿不再是「死圖」，而是具有邏輯的「活體」。

2. Design Systems (設計系統)

• Figma 的組件（Component）和變體（Variant）功能極其強大。
• 你可以定義一套 Design System，包含顏色、字體、按鈕狀態。修改一個主組件，全站幾百個頁面自動同步更新。這對於大型 App 的維護至關重要。

3. Prototyping (原型與變量)

• 現在的 Figma 原型支援變量 (Variables) 和 條件邏輯。
• 你可以做出像真實 App 一樣的交互：點擊「購買」，購物車數字+1，總價自動計算。這讓用戶測試（User Testing）變得非常真實。

三、Dev Mode：填平設計與開發的鴻溝

2023 年推出的 Dev Mode 是 Figma 向開發側邁出的最大一步。

• 不僅是標註：它不再只是簡單的紅線標註。開發者可以看到組件的代碼片段（React/Vue/Swift），查看變更歷史（Diff View）。
• VS Code 整合：開發者甚至不需要打開瀏覽器，直接在 VS Code 裡就能看到設計稿，點擊元素自動定位代碼。
• 注意：這是 Figma 商業化的核心，現在需要付費席位。

四、Figma AI：未來的設計方式

Figma 正在積極引入 AI：

• Make Designs：輸入「一個寵物領養 App 的登錄頁」，AI 生成可編輯的 UI 草稿（包含圖層結構）。
• 智能重命名：一鍵把「Frame 1234」變成「Submit Button」，拯救強迫症。
• 文案潤色：內置 AI 幫你把 Lorem Ipsum 假文案替換成真實的行銷文案。

五、優缺點總結

維度	優點	缺點	建議
協作	無敵，多人實時編輯絲般順滑	網絡要求高，斷網基本無法工作	確保網絡環境良好
功能	Auto Layout 符合代碼邏輯	學習曲線較陡峭，對新手有門檻	建議先學 Flexbox 概念
生態	社區（Community）資源極豐富	插件太多有時會導致卡頓	定期清理不用的插件
價格	免費版夠個人用	Dev Mode 需付費，企業版昂貴	團隊按需購買席位

六、總結

Figma 已經不是一個簡單的設計軟體，它是互聯網產品構建的基礎設施。 它強迫設計師像工程師一樣思考（組件化、響應式），也讓工程師能更容易地理解設計。 在這個時代，如果你想從事 UI/UX 設計，或者想高效地開發前端頁面，精通 Figma 不是選擇題，而是必修課。