Figma Config 2025 新功能實測：設計、開發、行銷一次到位 (上)
2025 年 6 月 4 日
Figma Config 2025 新功能實測：設計、開發、行銷一次到位 (下)
Figma 在 2025 年的 Config 發表會上，正式宣示：Figma 不只是設計工具，而是全面「橫跨設計、開發與行銷的產品平台」。
因應這樣的組織遠景，Figma 發表多項新功能，包含 Draw、Buzz、Site、Make、Grid 2.0、AI Prototyping、Dev Mode 強化。
我試過這些新功能後，於本篇文章中分享使用步驟與心得，讓設計師們可以快速了解 Figma 最新的使用方式，降低資訊焦慮！
Figma Site
試用結論
功能亮點：
設計稿轉成響應式網站、可內嵌設計稿和 prototype
試用心得：
• 類似簡易版 wordpress 的架站服務
• 目前不能使用 CMS，所以類似「聯絡我們」的表單都無法使用
• 預設有三個斷點，可再自行增加
• 內嵌 Make 功能尚未釋出
建議應用場景：
簡易官網、設計師作品集
功能介紹
一開始聽到 Figma 把架站都整合進來了，覺得太厲害了吧！那其他的架站服務還活得下去嗎？
後來玩了一下，目前只能說是比較基礎型的架站，但更進階的東西例如客制 CSS、改寫 HTML、SEO 優化之類的，應該是沒有辦法。
基礎的「前台遞交表單，後台收到回覆」的功能也還在 coming soon，並未釋出 beta 版進行測試。
以上的評測是針對「一般官網」來說的結論，但如果是針對「設計師」而言，這簡直是最好的「作品集」架站資源了！
以前設計師用 Figma 做了好幾個案子，卻還需要另外學架站，把設計稿一張一張修改後存成圖片，就連 prototype 都需要另外存成 GIF 或進行螢幕錄影，才能夠放在作品集中……
難怪設計師就算想轉職，想到還要更新作品集才能去找工作，就打消念頭了(欸
現在使用 Figma Site，可以「直接用畫設計稿的邏輯架站」、「直接內嵌設計稿或 prototype」、「多頁數網站用 prototype 的邏輯就可以實現」…
以下來分享幾個實測結果！
預設樣板
開始在建立檔案時，選擇「Site」，就可以新開啟一個 Site 檔案，且預設跳出一個 modal，問你要不要用樣板，如下圖所示。
樣板雖然沒有很多，但都還蠻美的！ 強烈建議一開始用的時候先從模板開始，可以很快知道 Site 的運作邏輯。
以下是我隨便選一個模板開啟後的樣子，發現連設計系統（design system）都做好了，不僅是顯示在畫布上，是真的有建立在右側面板中的設計系統！
另外，可以看出來有三個頁面，也預設有三個斷點：桌面版（desktop）、平板（tablet）、手機（mobile）。
新增頁面和斷點
那如果要新增頁面，該怎麼做呢？
只要在下方工具列中，點擊左邊數來第二個 icon，就可以新增頁面，如下圖一所示。
新增一個頁面後，預設是製作 desktop 的寬度，如果想增加其他斷點，只要點擊右上方的 +，就可以增加 tablet 、mobile，或是客製化的斷點，如下圖二所示。
編輯排版
Figma 預設給的編輯區塊，樣式為「Frame」，也就是現在的「Layout: Freeform」。建議把它變成「Auto layout: Vertical」，這樣未來在排版的時候可以快速調整。
其他的編輯方法，大致上和平時的 Design file 沒什麼差別，大家開啟來玩玩看就知道了～
另外有一個很酷的地方，就是當你把斷點都新增好後，只要在「Desktop」裡面新增東西，其他斷點內也會自動同步新增，所以把 Desktop 做好後，基本上其他斷點的內容也做好了。
若其他斷點中的排版必須和 Desktop 不同，後續再調整就好，且不會影響到 Desktop 的排版。
互動功能
設計師對於做 prototype 應該很熟悉吧？就是在右側面板的最上方，把 tab 切換到「prototype」就可以開始拉線了。
在 Site 裡面，換頁的功能也是做在同一個地方，只是名稱變成了「Interaction」。
點擊「Interaction」tab，會發現可以選擇加 Link (也可以直接拉線)，或是增加互動特效，例如 hover、Press 等等，也可以設定參數。
詳細功能如下圖，大家可以試試看 (我自己是沒有全部試過啦…)
嵌入設計稿和 Prototype
終於到了 Sites 最厲害的地方，就是把設計稿和 Prototype 放進來～
點擊下方工具列左邊數來第三個 icon，選擇嵌入 Embed，如下圖所示。 (另一個預定選項是 Make，但尚未上線)
新增了 Embed 區塊後，右邊面板會出現可以加入 URL 或 HTML 的位置，如下圖所示。
在 URL 裡面，理論上只要貼上網址，邏輯上應該就可以嵌入，但 Figma 應該有限制 Domain。我直接把設計稿或 Prototype 的連結貼在裡面，卻沒有辦法嵌入 (我猜可能是bug)，但貼 Youtube 的連結就可以，甚至下方還出現「Show UI、Autoplay、Allow Fullscreen」可以開關，如下圖所示。
大家可以自己試試看哪些網域可以用，哪些不行XDD
如果現在 URL 放設計稿和 Prototype 的連結沒有用，那該怎麼辦？ 這個時候就要切到「HTML」，把 embed code 貼進去。
embed code 在哪呢？到你要分享的 Figma 檔案，點擊右上方的「Share」，你會在選單的最後一列找到「Get embed code」，複製這一串從< iframe>開頭，結尾的程式碼，貼到「HTML」裡面即可。
以下是 Embed 的測試結果：
- URL 內貼入連結的方式，目前我只成功了 Youtube，但我猜其他的免費影音平台可能也可以
- HTML 內貼入 embed code 的方式，可以嵌入設計稿、Prototype、Google map (chatGPT 還說可以嵌入 X，看看有沒有強者要試試看)
- Embed 無法再使用 Auto layout 進行排版，所以預設都是垂直排列
預覽和公布
如果想預覽網站，點擊每一個頁面左上角的 Play icon 即可，如下圖所示。
如果想公布這個網站，點擊左側面板上的「Publish…」，設定 Site title 後，再點擊「Publish」即可。如果發佈成功，就會看到以下圖片的內容。
Figma 會給你 Site URL，那個就是你的作品集網址囉！ 如果你想把 Figma 的網域換掉，需要到第三方服務購買網域，然後這裡點擊「Create a domain」，把你購買的網域貼進去後儲存。
其他功能
最後我們來說一下，左側功能列中的每個 icon 是什麼意思。
Figma Make
這篇文章 6 月初的時候寫好，正準備要上架的時候，突然發現 Make 釋出了…… 是不是弄我呢？我不清楚😊
但既然都要寫分享文了，還是來玩一下 Ｍake，假日把文章補齊再發，我覺得我好棒 🥹 (自己說)
試用結論
功能亮點：
• 自然語言生成 UI 元件、prototype、互動式網頁 demo
• UI 元件可轉換成程式碼 (HTML、React、SwiftUI)
• AI 解構語意，自行重複修正，結構更接近開發邏輯
• 中英都通，可以使用中文與 AI 互動對話生成 prototype
試用心得：
• 生成內容較偏初版 layout，但可作為設計師早期構想的「起手式」
• 一般設計流程，在確定要設計的功能後，會是「wireframe > mockup > prototype > MVP 驗證」。現在可以跳過「wireframe 和 mockup」，直接用語意做出 prototype，然後快速驗證
目前限制：
• 雖然可以做到互動，但本質上還是 prototype。以後應該會把該功能整合進 Site 裡，實際建置互動式網站
• 據 config 現場測試者的分享，AI 生成的元件，可以轉成設計稿，但該功能目前尚未釋出
• 可以上傳設計稿、圖片，但無法直接上傳「設計檔案」或「設計系統」
• 無法實現太模糊的需求，例如「給我一個很酷的網站」
建議應用場景：
• 敏捷式開發
• 只有重點畫面設計稿，但需要快速做出 prototype 時
• PM 或沒有設計師的團隊，想要草擬設計時
• 工程團隊的開發前期準備
功能介紹
一開始在建立檔案時，選擇「Make」，就可以新開啟一個 Make 檔案，若是第一次使用Make，會跳出以下 modal，大概跟你宣傳一下這個酷炫功能，接著就可以進入 Make 了～
面板功能介紹
預設 Prompt
提供參考圖
指定修改
因此你可以點擊左下方的游標 icon，然後再點擊你想修改的部分，接著在對話框內說明要怎麼改即可
重新載入 / Console
預覽 / 程式碼
播放 / 設定 / 發布 / 分享
提供參考圖
同以上所述，可以提供設計稿、共用元件、圖片，給 AI 進行生成參考。以下是點擊 Figma icon 後，出現的 modal。 其實我對於只能選擇「Community」的元件有點不懂，如果也可以選擇其他設計檔案內的設計元件就好了……
如果參考圖來自於 Figma，該縮圖右上方會有 Design 的 Icon，如下圖，然後每個縮圖 hover 狀態時可以刪除。 因為最多只能上傳三張，所以上傳滿三張後，下方的 Figma 和 image icon 都不可再點擊
指定修改
前面有提及，可以指定某個地方進行修改。
方法是點擊左側對話欄下方的游標 icon ，接著只要選取到要修改的部分，就會出現工具列。
工具列有兩個模式，預設開啟設計模式，但可以換成「AI模式」。
設計模式：
Make 會根據選擇到的容器特性，顯示可以直接編輯操作的功能： 例如選到 div，可以直接調整填滿色、圓角、padding、margin 若選擇到 p，可以調整的就更多了，包含字體、顏色、字級、粗體、斜體、底線、對齊、padding、margin。
特別注意的是，如果有多個相同的元件或組件， Make 可能會自行做成 Component，所以一旦調整其中一個元件或組件，其他相同的元件或組件也會同步更新。
最後，如果你不知道什麼是 div 和 p，那是工程師在寫 HTML 時，很常會使用的容器。
AI 模式：
直接和 AI 說這個部分你想要怎麼修改。這裡沒辦法直接貼上參考圖，但你可以到左下角比較大的對話框去上傳參考圖 (對話框內會顯示你要修改的範圍)。
不管是哪個模式，最右的 icon 點下去，都會自動開啟「程式碼模式」，並告訴你「指定範圍」的程式碼在哪裡！
手動更新 / 自動更新
生成之後，一定會持續修改，但修改途中，也有可能改到之前的設計，或是 Make 寫的程式碼。但 Make 很聰明，透過我們的指令進行修改後，會自行判斷程式碼中需要調整的部分，並自動修改。
且整個過程，都會顯示在左側面板讓使用者知道。
程式碼模式
可以隨時切換成「程式碼模式」，而且「真的可以編輯」！！
如果你是有學過簡單程式的設計師，可以直接在這裡改程式碼，然後切回「預覽模式」就可以看到改的成果了！ 但如果你不會寫程式，建議不要隨便改喔。
Figma 官方示範
用 Make 做出的 prototype，最終應該可以匯入 Site 裡，變成真實的網站。
以下是 Figma 官方釋出幾個他們內部設計師做的網站 (應該是內部測試 make 和 site 組合技)，大家可以來玩玩看，真的蠻酷炫的！
2025 其他更新
Dev mode
自從我前年寫了 Dev mode 的分享後，就沒有怎麼關注了，畢竟我是設計師嘛 (欸
久違打開 Dev mode 後，發現的確增加了新功能！(雖然我不確定是不是今年加的)
滴管工具
下方工具列增加了「滴管工具」，可以快速知道每個區塊的顏色，且點擊一下就能複製色碼。
測量工具
下方工具列增加了「測量工具」，可以直接標註出每個間距數值。
(這個好像更新一陣子了…)
註解工具
下方工具列增加了「註解工具」，可以選擇/新增分類、自行輸入註解文字、加入該物件的各項參數。
也許你會想問這跟原本就有的「Comment」有什麼不同？我想應該就是多了分類和可以快速新增參數吧～
以上都是主功能列裡的功能，其他據說還有色彩對比度、CSS grid 之類的更新，請有興趣的強者工程師們自行研究。
結論
終於把這篇文章寫完了！
整體來說，Figma 今年的更新就像是給設計師和開發團隊灌了一瓶超能量飲料！不只讓畫圖更自由、網站更快上線，連原本最容易卡關的設計交付，也變得更順利。
從 Draw 到 Site、Make、Buzz，再到 Dev Mode 的細節優化，整個流程真的有種「以前要三套工具搞定，現在一個平台就包辦」的感覺。 對我們這些同時要顧視覺、顧邏輯、顧進度的設計師來說，Figma 正在悄悄把設計工作變得更聰明、更流暢，也更有影響力。 如果你還沒試試這波更新，真的值得撥個週末摸一輪，會發現它離「設計全端工具」真的不遠了。
拍拍設計有著多年設計實戰經驗
從 0 到 1 的產品上市開發，或是從 1 到 100 分的產品迭代過程，讓我們助你一臂之力！！
