從設計走向開發:Figma 為何成為開發者的新寵?

更新於 發佈於 閱讀時間約 4 分鐘

Figma 試圖跨越設計與開發之間的鴻溝

在產品開發流程中,設計與工程常被視為兩座孤島。設計圖再精美,若無法精準傳達給開發者,最終產品仍可能偏離原意。過去的流程倚賴繁複的交接文件與一層又一層的溝通,常導致效率低落與誤解。而如今,一款源於設計圈的工具,卻悄悄在工程師圈子中擴張版圖--Figma。

2025 的 Figma,不只是設計工具

2025 年的 Figma,已遠非單一 UI/UX 設計平台。8 月 IPO 成功上市、市值曾達 560 億美元,雖股價震盪,但其對產品開發流程的顛覆性創新,仍令人難以忽視。Figma Sites、Figma Make、Grid 等新功能的釋出,讓設計稿不再只是靜態圖片,而是一腳踏進程式碼世界的動態文件。

對於開發者而言,不只是效率提升,更是一種「語言共通化」的轉變。當設計稿可以即時轉為 HTML 架構、甚至一鍵轉換為響應式網站,開發人員就不再只是設計的翻譯器,而是真正與設計並肩作戰的共創者。

從工具到舞台:開發者的 Figma 體驗

Jason 是一名前端工程師,過去每接到 UI 設計圖,總要靠 Zeplin 或是 Sketch 的標註,手動重構前端頁面。與設計師來回確認間距、色碼,浪費大量時間。自從團隊轉向 Figma,不僅能直接導出 SVG、PNG、PDF 等資產,更能即時在 Figma 介面中檢查 spacing、font size、層級結構,減少反覆溝通。

今年 Config 大會後,他開始試用 Figma Sites——將某個設計提案,直接輸出為基本的 HTML 架構。雖然還稱不上完美的前端成品,但作為早期驗證或 wireframe demo,速度快得驚人。Figma Make 則讓他更進一步能透過自然語言提示生成互動效果,大幅減輕 prototype 的工作量。

從 Sketch 競爭者走向開發者的橋梁

Figma 原以「協作設計」為賣點,在 Google Docs 的靈感下做出即時多人編輯。如今,它將這種「即時」擴展至跨職能團隊,特別是設計與開發之間的動態溝通。當設計可以是可運行的雛形,當代碼不再從零開始,開發者的角色也從「還原」走向「共構」。

這不僅僅是技術演進,更是協作文化的質變:開發者有更高的設計參與感,設計師也更能理解開發限制與彈性。雙方少了指責,多了信任。

raw-image

Figma 的具體優勢

Figma 在 2025 年的進化對開發者來說具備以下關鍵優勢:

  • 資產導出便利:SVG、PNG、JPG、PDF 一鍵匯出,內建切割標註。
  • 代碼生成加速:透過插件如 Figma to HTML,自動生成語意化 HTML 架構。
  • 響應式網站轉換:Figma Sites 支援 CMS 架構,快速部署 demo 或微型網站。
  • 互動原型生成:Figma Make 利用 AI 提示製作互動體驗,減少寫 prototype code 時間。
  • 版本歷史與雲端同步:無論團隊身在何處,都可隨時協作與追溯。

開發者視角下的設計革命

Figma 近年來以功能強大的協作設計平台,積極推動設計與開發無縫協作,不僅提供資產導出、代碼生成、新功能(如 Figma Sites)等開發友善工具,也透過 IPO 和大型產品發表持續展現領先地位。Figma 已從單純的設計師工具轉變為產品團隊共同創作的平台,提升了效率與開發驗證速度,促進團隊共創。設計工具朝「開發友善」方向演進,開發者也應採更開放態度,善用這類工具提升工作模式。Figma 的目標,是讓設計直接成為產品雛形,而不僅止於靜態圖檔。


留言
avatar-img
留言分享你的想法!
avatar-img
Emerson 的沙龍
0會員
63內容數
一個分享國內外新知與有趣科技資訊的紀錄平台
Emerson 的沙龍的其他內容
2025/07/31
Google 想要的 PM,不只會寫需求 Google PM 面試出現「vibe coding」:透過 AI 工具,用自然語言快速打造原型。這不考程式能力,而是測試面試者是否具備把想法轉化為產品的行動力與技術直覺。本文分享原理與實戰準備方法。
Thumbnail
2025/07/31
Google 想要的 PM,不只會寫需求 Google PM 面試出現「vibe coding」:透過 AI 工具,用自然語言快速打造原型。這不考程式能力,而是測試面試者是否具備把想法轉化為產品的行動力與技術直覺。本文分享原理與實戰準備方法。
Thumbnail
2025/07/20
2025 年上半年全球科技業裁員潮,科技巨頭以「AI 轉型」為名裁員,但實際上裁員人數與 AI 相關性低,且缺乏數據支持。文章分析裁員潮背後真正原因:疫情後的盲目擴張、經濟下滑、成本考量及 AI 投資壓力等,並探討裁員對企業與社會帶來的負面影響,最後強調需培養混合型能力才能在未來職場保有競爭力。
Thumbnail
2025/07/20
2025 年上半年全球科技業裁員潮,科技巨頭以「AI 轉型」為名裁員,但實際上裁員人數與 AI 相關性低,且缺乏數據支持。文章分析裁員潮背後真正原因:疫情後的盲目擴張、經濟下滑、成本考量及 AI 投資壓力等,並探討裁員對企業與社會帶來的負面影響,最後強調需培養混合型能力才能在未來職場保有競爭力。
Thumbnail
2025/07/18
以台灣電力燃料消耗分析舉例,使用AI軟體為perplexity、claude進行AI協作分析數據,並找出數據關鍵指標與意義的資料分析,最後再讓AI進行數據分析並進行視覺化呈現
Thumbnail
2025/07/18
以台灣電力燃料消耗分析舉例,使用AI軟體為perplexity、claude進行AI協作分析數據,並找出數據關鍵指標與意義的資料分析,最後再讓AI進行數據分析並進行視覺化呈現
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
實際就業後,會發現收集與分析需求,通常都不是工程師在做,會有另一群人,以非工程的角度收集及分析需求,然後在開發過程中蹦出不同的火花,於是很好奇另一群人的想法是什麼?我不敢說這本書能完全代表另一群人的想法,但確實能夠得到很多有用的思維。推薦給所有的軟體工程師。
Thumbnail
實際就業後,會發現收集與分析需求,通常都不是工程師在做,會有另一群人,以非工程的角度收集及分析需求,然後在開發過程中蹦出不同的火花,於是很好奇另一群人的想法是什麼?我不敢說這本書能完全代表另一群人的想法,但確實能夠得到很多有用的思維。推薦給所有的軟體工程師。
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
在設計有四年快五年的時間,大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來,在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派,只是根據我本人的經驗摸索出來的設計方法,也不會用太多高深的詞彙說明。 以前搜尋怎麼做產品設計?究竟是要從什麼步驟開始的這件事情,大部分看到的
Thumbnail
在設計有四年快五年的時間,大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來,在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派,只是根據我本人的經驗摸索出來的設計方法,也不會用太多高深的詞彙說明。 以前搜尋怎麼做產品設計?究竟是要從什麼步驟開始的這件事情,大部分看到的
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
c文組女生 如何善用 figma 和 GitHub 幸福課程 幸福教練黃老師 潮資訊媒體 社群編輯 文組女生可以善用 Figma 和 GitHub 來提升團隊協作和專案管理的效率。以下是一些建議: #Figma: 設計協作: Figma 是一個協作性極強的設
Thumbnail
c文組女生 如何善用 figma 和 GitHub 幸福課程 幸福教練黃老師 潮資訊媒體 社群編輯 文組女生可以善用 Figma 和 GitHub 來提升團隊協作和專案管理的效率。以下是一些建議: #Figma: 設計協作: Figma 是一個協作性極強的設
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News