Figma 與 MasterGo 入門
🎯 核心問題
如何從零開始使用現代設計工具創建網頁原型？
1. 為什麼要學前端設計工具？
在開始之前，我們需要理解一個問題：為什麼需要學"前端設計工具"？反正直接寫 HTML / CSS 程式碼也能把頁面搭出來，多學一個軟體和技術，真的有必要嗎？
實際上，把頁面運行起來，和把產品設計好根本是兩個概念。程式碼只關注解決如何渲染在瀏覽器上，如何在不同設備上運行的問題；前端設計工具解決的是資訊分佈的問題，前端交互怎麼安排，不同頁面怎麼跳轉，視覺優先級怎麼分配的問題。只需要在設計工具裡搭一塊畫布，就能把版式、資訊層級、交互方式在一塊屏幕上對比確定，選擇最適當的呈現效果。
如果直接開始寫程式碼或直接用 AI 生成完整的前端頁面，通常用戶體驗都不會太好，嚴謹的產品會考慮到用戶和前端交互的舒適度，以及不同頁面想要傳達的內容分佈，從用戶的角度出發先進行前端頁面排布，再進行程式碼轉換或生成。
另外，從團隊協作的角度而言，前端設計工具還降低了多方的合作成本：設計師、產品、開發不再各自對著腦補畫面或者抽象的程式碼說明，而是支持多人協同，大家能夠圍繞一份可視、可標註、可迭代的畫布討論版本管理、需求變更、反饋意見。更進一步的是，現代前端設計工具本身不再只是畫圖軟體，一鍵生成部分程式碼，管理設計系統和組件庫，新時代的設計工具已能夠將大量重複性的體力勞動（對齊、標註、導出、改樣式）自動化或批量化，極大促進了頁面設計的開發效率。
1.1 前端設計工具的演變
在時間的長河中，所謂前端設計工具其實是一條持續演化的技術。從 90 年代以本地位圖編輯為主的 Photoshop 時代，到 2010 年前後 Sketch 帶來的矢量化、組件化工作流，再到 2016 年之後 Figma 把協作徹底搬上雲端，設計團隊從單兵作戰逐漸走向多人實時協同。來到 2025 年，AI 已經實打實地嵌入到這些工具內部：從"根據一句話生成頁面草稿"，到"把設計稿直接轉成可運行的前端結構"，"設計即程式碼""人機共創"正在從概念變成可用的生產力。
本節中，我們會選取最具代表的兩種現代前端設計工具進行介紹，Figma 和 MasterGo。一方面，它們都覆蓋了現代 UI/UX 所需要的核心能力（矢量編輯、組件系統、自動佈局、程式碼交付等），可以支撐你完成從線框到高保真到開發交接的完整閉環；另一方面，這兩款工具都已經在 2025 年之後陸續加入了實用的 AI 功能，幫助你在保證原型不變的同時將設計圖變成真正可運行的程序。
1.2 誕生之旅
在現代前端專用工具尚未誕生的年代，整個界面設計行業的視覺設計工作，很長一段時間都由 Photoshop 這類 "全能型" 設計軟體順帶承包。設計師會在本地通過一層層疊加的圖層，細緻完成頁面整體視覺效果的設計，最終將體積不小的 .psd 源文件交付給前端工程師 —— 而前端要精準還原設計圖，還必須手動完成三項繁瑣且關鍵的工作：
一是 "切圖"：需要從 .psd 文件的多層結構裡，把按鈕、圖標、Logo、背景模塊等獨立視覺元素逐一拆分提取，再導出為 PNG、JPG 等網頁能直接加載的圖片格式（畢竟網頁無法直接識別 PSD 的圖層資訊，只能依賴這些拆分後的圖片呈現細節）；
二是 "量尺寸"：得用軟體自帶的測量工具，逐一確認每個元素的寬高、不同模塊間的間距（margin/padding）等資料，確保所有尺寸都精準到像素；
三是 "摳標註"：要從設計圖中提取那些 "看不見卻必須有的" 隱性參數 —— 比如文字的字號、字重、行距，每個色塊的 RGB 或 HEX 色值等，相當於把設計師沒寫在紙上的 "設計規格" 手動 "摳" 出來記錄。
在此之後，前端的實現階段才真正展開。無論使用的是原生 HTML/CSS/JS，還是基於 Vue、React 等框架，本質過程是一致的。前端會以 "容器為核心載體"，根據設計中各模塊的層級與語義重建頁面結構。這裡的容器是指具有明確佈局邊界、專門承載和組織子元素的單元，它不直接呈現具體內容，卻通過 Flex、Grid 等規則，為內部元素劃定排列範圍。而 "結構塊"（如頂部導航欄、側邊欄、文章列表區、底部頁腳等肉眼可辨的功能 / 內容區域），便依託容器存在；每個結構塊內部，又會嵌套更小的容器來組織元素，比如一條文章列表項，會由 "列表項容器" 控制內邊距與整體排版，再包裹標題、摘要、時間、封面圖標等細節元素。
在現代前端框架裡，這些 "結構塊（及關聯的容器與元素）" 通常會被實現為 "組件"。組件可簡單理解為：帶有清晰邊界、整合了容器佈局與邏輯的可複用界面單元，它既包含控制外觀與排列的容器（比如 "按鈕組件" 用容器定義寬高、圓角，"文章卡片組件" 用容器組織標題、封面的位置），也封裝了交互邏輯。設計稿中重複出現、形態一致的部分（如統一風格的按鈕、反覆使用的文章卡片），在程式碼中會被抽象成組件：既能在不同頁面 / 場景複用，減少重複開發，也能通過組件內容器的統一規則，確保所有複用處的佈局與風格高度一致
隨後，前端會使用樣式系統還原視覺和佈局。切圖階段導出的 PNG/JPG 等資源，會作為組件或結構塊內部的 <img>、背景圖片，或者按照各框架推薦的靜態資源方式引入；量尺寸階段得到的寬高、間距、行高等具體數值，會被轉寫為 width、height、margin、padding、line-height 等樣式屬性，應用到對應的組件或結構塊上；摳標註階段整理出的顏色、字體、陰影、圓角以及 hover/active 等狀態，則會落實到 CSS、CSS Modules、CSS-in-JS、Tailwind 等具體方案中的 color、font-family、font-size、box-shadow、border-radius 以及偽類或狀態類名上。此時，切圖、尺寸和標註提供的是一組精確的視覺參數，組件和結構塊則提供了承載這些參數的程式碼組織單元，兩者結合起來，構成可維護、可複用的界面實現。
但是，以本地文件為中心的模式天然是低效率的。版本通過郵件和網盤傳輸，新舊稿件容易混淆，設計和開發之間大量依賴上述的複雜交互方法，協作成本和出錯概率都不低。
移動互聯網興起後界面複雜度和迭代速度需求快速上升，Photoshop 的"大而全"逐漸顯得笨重。這個階段，出現了 Sketch。Sketch 專注在 UI 設計本身，剝離掉大部分與視覺後期處理相關的負擔；用 Symbols 把按鈕、導航、輸入框等高複用元素組件化，一處修改可以全局同步；再配合 Zeplin 一類工具，把標註和樣式片段自動生成。Sketch 把"組件思維"引入了設計工作流。不過它依然是基於本地文件的桌面應用，實時協作要靠雲盤、第三方插件或版本工具繞行實現，沒有從底層解決"多個人同時改同一份稿子"的問題。
真正改變遊戲規則的是 Figma。自 2016 年起，它把 UI 設計、原型製作、評論協作統一整合到瀏覽器中，支持多種現代功能：多人實時光標、在線評論、版本時間線、分享鏈接等，今天看起來非常簡單，但在當時是對 Photoshop / Sketch 模式的正面挑戰。
至此，界面設計不再是散落在各自電腦裡的文件，而是集中在一份在線、實時更新的雲端畫布上。圍繞這塊畫布，我們可以想象更進一步，用自動化或 AI 的方式模糊設計和前端程式碼的邊界。
最開始，我們僅能依賴各類平臺插件，將設計稿中的組件、樣式資訊半自動導出為程式碼片段（如 React/Vue 組件骨架、CSS 變量等），其核心本質是通過插件實現結構化資訊提取。隨後，隨著平臺能力的進化，大部分設計平臺開始支持大模型 MCP（Model Context Protocol，模型上下文協議）功能：該協議提供了一套標準機制，能讓大模型安全、可控地訪問設計文件、插件接口與項目元資料，進而更便捷地將設計稿導出為程式碼。
再往後，在插件與 MCP 的基礎上，前端程式碼自動化進一步邁入到原生支持從設計稿直接推導程式碼結構的階段。我們可在設計工具內一鍵生成前端項目骨架、組件層次、樣式體系及對應的程式碼結果。這使得設計師與前端開發工程師得以從手動搬運設計細節的工作中解放出來，將更多精力投入到用戶體驗優化與功能版本的更新迭代上。
2. Figma 入門
接下來我們從抽象的概念部分來到實際的操作環節。由於時間關係，我們只會學習 Figma 的基本操作邏輯，確保即便你完全沒用過設計工具，也能跟著完成練習。如果你想進行完整的 Figma 功能學習，請你參考 Figma 提供的詳細官方教程進行學習：https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners
或者參考如下教程，進行類似個人作品集簡單網頁的快速搭建：https://help.figma.com/hc/en-us/sections/35895585621655-Figma-Sites-collectio
左側是項目的新建和資源管理入口，右上角的幾個按鈕是 Figma 的常見功能。其中，Make 用來用一句話讓 AI 幫你先生成一個大概的界面或結構草稿，Design 是真正畫網頁 / App 界面、搭組件和做原型的主工作區，FigJam 像團隊白板，用來貼便利貼、畫流程和做前期討論，Buzz 是品牌資產規模化生產工具，用於批量生成內容以保持品牌一致性，Site 則是把這些設計整理成真正可訪問的網頁或文檔站對外展示。
乍一看 Figma 的功能非常多，不好入門，但其實這類功能工具本質上都是熟能生巧，不需要害怕一開始操作出錯，也不用想著一步做對，只需要先玩起來，玩多了自然能快速上手。
本篇教程中，為了快速入門，我們會對 Design 功能做簡單講解。
2.1 新建 Design 文件
在首頁或者右上角的入口裡，選擇 Design ，新建一個文件，你會進入一個空白的設計畫布。 這個界面大致分成三塊：左邊是頁面和圖層，用來查看和修改頁面、元素從屬關係；中間是畫布，用於查看當前效果；右邊是屬性和樣式，用於修改具體的形狀、顏色、樣式；底部一條是工具欄，用來切換工具，包含選框、畫形狀、輸入文字、評論、插件等，選中工具後，可以按 Esc 鍵返回至默認鼠標工具。
2.2 創建你的第一個 Frame（畫板）
在正式放置元素之前，需要先為頁面確定一個清晰的邊界，這個邊界由 Frame 來承擔。你可以在底部工具欄中選擇 Frame 工具，或者直接按鍵盤 F，然後在畫布上拖出一個矩形區域。
- 使用底部工具欄裡的 Frame 工具，或者直接按鍵盤
F。 - 在畫布中拖出一個矩形區域，右側屬性欄裡把寬度改成比如
1440，高度改成900。 - 在左側圖層欄，把這個 Frame 重命名，比如叫
My First Page或者你項目的名字。
這個 Frame 就是一屏界面的頁面容器，之後的標題、文字、按鈕、圖片等內容都應該放在這個 Frame 內部，而不是散落在畫布的任意位置。以 Frame 為邊界來組織內容，有助於在後續進行滾動設置、適配不同設備尺寸、導出畫面及製作原型時，保持結構可控。
2.3 在 Frame 裡放文字和簡單元素
有了容器，接下來我們來學習如何放置最基本的組件，例如：標題、副標題、按鈕、佔位圖塊。
- 選擇文字工具（底部工具欄中的
T），在 Frame 裡點擊一下，輸入頁面標題，比如：My Portfolio。 在右側屬性裡，把字體大小調大一點（例如 96），字重調粗一點。 - 在標題下面，再用文字工具輸入一行簡單說明，比如一兩句描述這個頁面要做什麼。 字號可以小一些，行高略放大一點，讀起來不那麼擠。
- 畫一個按鈕雛形： 用矩形工具在標題下面畫一個大概
200 × 48的矩形，右側給它一個比較明顯的填充顏色，再適當加一點圓角。
- 然後用文字工具在矩形上方輸入按鈕文字，比如
Get Started，把矩形和文字一併選中，用頂部的對齊工具讓文字水平、垂直都居中。 - 在按鈕一側或下方，再畫一個較大的淺灰色矩形作為"圖片佔位區"，後面可以用來放展示圖片。
做到這裡，其實你已經有了一個非常簡陋但結構完整的"首頁草稿"：一個標題、一段話、一個按鈕、一個主要展示區域。
2.4 善用 Auto Layout 整合元素
如果所有元素只是隨手拖拽，頁面很快會亂。Figma 裡一個很重要的概念就是 Auto Layout ，它可以把一組元素變成一個帶規則的容器。
你可以選中"主標題 + 副標題 + 按鈕"這三樣，在右側屬性欄裡點擊 Add Auto layout 。
這時這三樣會被包在一個容器裡，你可以在右側調整參數，其中的元素佈局會根據參數自動適應調整：
- 它們是豎著排還是橫著排。
- 元素之間的間距是多少。
- 整個這一塊離容器邊緣有多少內邊距（padding）。
同樣，按鈕內部也可以用 Auto Layout，我們能夠實現這樣的一個效果：當我調整了文字，按鈕的長度也會自動調整。
先把按鈕背景的矩形和按鈕文字選中，添加 Auto Layout，讓這兩個東西變成一個"按鈕容器"。接著選中這個按鈕容器，把寬高都設置成 Hug contents 。這樣一來，文字會一直保持在按鈕正中間，文字多一點、少一點，按鈕的寬度都會自動跟著變化。
2.5 將按鈕變為可複用組件
現在我們要學習一個新的概念，組件。組件的意思就是可以被反覆利用的元素，比如按鈕這種元素，只要你預感之後還會反覆用到，就可以考慮把它做成組件。我們在剛才已經加好 Auto Layout 的按鈕基礎操作：
- 選中整個按鈕容器。
- 右鍵選擇 Create component（創建組件）。
這樣，這個按鈕就從一組普通圖層，變成了一個組件母版。之後如果你在其他頁面或 Frame 裡需要同樣風格的按鈕，可以直接從左側的 Assets 面板裡拖出來使用。
此時所有用到的按鈕，都是這個母版的同步拷貝。當你修改母版的顏色、圓角或間距時，所有實例都會自動保持同步更新。
至此，你已經初步掌握了 Figma 的簡單用法。你不需要一開始就把所有功能都弄懂，只要先照著做出第一個簡單頁面，熟悉這幾個核心操作，再慢慢去探索官方教程裡的更多能力，隨著使用次數增多就一定能上手。
3. MasterGo 入門
在理解了 Figma 的基礎工作流程之後，我們再來看 MasterGo，你可以把 MasterGo 簡單看做是中國版的 Figma，但在部分功能上有一定區別。整體上，它延續了與 Figma 相似的界面佈局和操作理念：同樣有畫布、圖層樹和屬性面板，同樣支持組件、樣式、自動佈局和多人協作。更詳細的內容可參考 MasterGO 的官方教程：https://mastergo.com/tutorials/12?全程高能，MasterGo 最完整实用教程，让你从零到精通！
3.1 新建設計文件
進入 MasterGo 後臺
- 打開 MasterGo 官網並登錄賬號。
- 進入後，你會看到類似「文件列表 / 項目列表」的首頁區域，用來管理你的設計文件。
創建新文件
- 在右上角看到 + 設計文件的按鈕選項進行點擊，或者選擇導入 Figma 等文件。
- 點擊後，你會進入一個空白畫布，這就是 MasterGo 的設計工作區。
認識基本界面區塊 當你學會使用 Figma 後，MasterGo 的使用方式大同小異，主要分為幾個區域：
- 頂部工具欄：位於畫布最上方，左側是文件位置和文件名，中間是一排常用工具按鈕（選擇、區域/畫板、形狀、文本、註釋、評論、插件選擇和 AI 工具等），右側是當前在線成員、分享入口以及畫布縮放和預覽控制功能入口。
- 左側面板：主要分為圖層和資源，當前停留在圖層標籤，可看到頁面列表，以及該頁面下所有圖層的結構和層級。
- 中間畫布區：具體繪製和排版的工作區，所有 Frame、組件和圖形都會展示在這裡。
- 右側屬性面板：用於查看和編輯選中對象的屬性，例如大小、位置、對齊方式、背景填充、描邊、圓角等。如果沒有選中任何對象，會顯示畫布相關設置，如畫布背景色、標籤和導出選項。
3.2 創建你的第一個 Frame
在正式放東西之前，我們需要一個頁面容器用來確定界面的邊界和尺寸。這個容器在 MasterGo 裡，通常叫 Frame。
步驟：
- 選擇 Frame 工具
- 在工具欄中找到 Frame / 畫板工具，點擊後可使用預設參數直接將內容創建到畫板。
- 或者使用快捷鍵（通常是
F，如果有差異以實際界面為準）。
- 在畫布中拖出一個矩形區域
- 拖出後，你會看到一個帶選中框的區域。
- 右側屬性面板裡，可以看到這個 Frame 的寬度和高度。
- 把寬度改成比如
1440，高度改成900（一屏網頁常用尺寸之一）。
- 重命名 Frame
- 在左側圖層面板裡找到這個 Frame。
- 雙擊名稱，把它改成你項目的名字，比如：
My First Page，或者你自己隨便起的頁面名。
3.3 創建畫板內容
有了容器，使用與 Figma 中我們已教過的類似方式，很容易可以得到相似的展示頁面。（你可以嘗試複製 Figma 畫板中的文字元素，能夠支持文本組件的直接粘貼導入）
值得注意的是 Auto Layout 功能行為稍微的不一致性，在 MasterGo 中，如果你想實現和 Figma 相似的按鈕長度隨著文字的長度變化，你需要先在對應矩形元素的基礎上創建一個容器或組件，如圖所示：
成功創建容器後，將按鈕矩形和文字放到對應並列的容器中，再在右側找到 Auto Layout 的按鈕啟用自動功能，即可成功實現按鈕寬度能夠隨著文字長度變化的功能。
3.4 AI 生成頁面
在 MasterGo 中，一個值得注意的有趣功能是 AI 生成頁面。你可以用一句話或攜帶參考圖，生成對應的 MasterGo 可編輯版組件，並得到可直接使用的程式碼。你可以使用中文或者英文直接輸入需求，頁面會根據需求返回結構清晰的頁面排布文檔，效果如下：
設計文檔生成結束後，點擊開始生成，稍作等待便能獲取對應的實際網頁效果：
此時你有兩種操作選擇：一是點擊藍色按鈕將生成結果直接插入畫布，二是點擊程式碼預覽功能，直接獲取當前完整頁面的程式碼，具體操作界面如下：
將結果插入畫布後，你還能對網頁的整體佈局、元素細節（如字體、顏色、間距等）進行更精細的調整，直至最終效果完全符合你的預期。
4. 下一步：從原型到程式碼
在前面的內容中，我們已經學習了 Figma 和 MasterGo 的基礎操作，能夠創建出結構完整的界面原型。接下來的關鍵步驟是：如何將這些設計稿轉化為真正能在瀏覽器裡運行的前端程式碼？
📚 後續教程
詳細的方法介紹請參考 從設計原型到項目程式碼，你將學習到：
- 多模態 AI 直接轉換：將設計稿截圖發給 AI，直接生成 HTML/React 程式碼
- Figma Make：使用 Figma 官方 AI 工具高精度還原設計並導出程式碼
- MasterGo AI：一鍵生成可編輯頁面並獲取程式碼
這些方法各有優劣，適用於不同的場景，建議根據項目需求選擇合適的工作流。
5. 總結
通過本章節的學習，你已經掌握了：
前端設計工具的價值：理解了為什麼需要設計工具，以及它們如何解決資訊分佈、團隊協作的問題。
Figma 基礎操作：
- 創建 Design 文件和 Frame 畫板
- 添加文字、形狀等基礎元素
- 使用 Auto Layout 實現自適應佈局
- 創建可複用的組件系統
MasterGo 基礎操作：
- 熟悉與 Figma 相似的界面佈局
- 創建 Frame 和基礎畫板內容
- 使用 AI 生成頁面功能快速創建原型
💡 下一步
現在你已經掌握了前端設計工具的基礎使用方法，可以嘗試：
- 為自己設計一個個人作品集頁面
- 為接下來的項目設計界面原型
- 學習 從設計原型到項目程式碼，將設計稿轉化為可運行的程式碼
如果你在完成 一起做霍格沃茨畫像 項目，可以先設計界面原型，再導出程式碼與 AI 對話功能結合。