Figma 是什麼?深入解析設計協作工具的強大功能與優勢

更新 發佈閱讀 5 分鐘

Figma 是什麼?

向量圖形編輯器:放大、縮小都不會失真。
原型設計工具:模擬 「操作行為」與「流程」。

Figma 大事件!

2016年09月27日:首次公開 !
2022年09月15日:美國軟體公司 Adobe 宣布以約200億美元收購 Figma !
2023年12月18日:英國和歐盟監管機構的反壟斷調查,Adobe 宣布放棄收購合併 !

Figma 競品 !

raw-image

Sketch

首次發布:2010年09月7日。
2022 年線上設計與協作工具全球調查:市占率 5.6%。
持續開發:2024 新增網頁模式。
作業系統:Mac OS。
作業平台:桌機、筆電、網頁。
費用:付費。
插件(開源外掛):中量。
雲端空間:付費後無上限。
協作性:中。

Adobe XD

首次發布:2015年10月7日。
2022 年線上設計與協作工具全球調查:市占率 6%。
持續開發:2024年1月 將進入維護模式不再更新。
作業系統:Mac OS / Windows。
作業平台:桌機、筆電。
費用:付費。
插件(開源外掛):顯少。
雲端空間:2GB。
協作性:低。

Figma

首次發布:2016年09月27日。
2022 年線上設計與協作工具全球調查:市占率 72%。
持續開發:每年的6月發表會,2024年新增 AI、簡報功能,2025年全面導入大量 AI。
作業系統:Mac OS / Windows。
作業平台:桌機、筆電、平板、手機、網頁。
費用:免費/付費。
插件(開源外掛):巨多。
雲端空間:無上限。
協作性:高(無論是雲端同時編輯或是轉出本地端 fig 檔都可以)。

應用(免費)

Autolayout(自動佈局)

物件與物件自動排列,用數值精準控制間距。

Component(元件化)

母元件一改,子元件同步調整!
當你元件應用在一百個地方,你想改一百次還是只想改一次就好?

Prototype(原型)

能做出很多前端效果。

泡泡標記

人員協作精準標記出哪邊需要優化。

應用(付費)

變數設定

可以透過 jason 格式,轉入和轉出素質都非常便利。

raw-image

開發者模式

支援多種語法。

raw-image

版本控管

與 git 一樣的功能,隨時回復節點。

元件庫

加入Google Material3 、Apple UIkit、Figma素材庫。
或是自己想要建立團隊的素材庫共同維護也可以。

AI 功能

  • AI 生成圖片。
  • AI 生成UI。
  • AI 搜尋圖示配對素材。
  • AI 命名圖層。
  • AI Prototype 連結。
  • AI 自動多國語系翻譯。
  • AI 去背。
  • AI 精緻化圖面。
  • AI 擴圖。
  • Nano Banana 模型。
  • Nano Banana 2 模型。
  • 新增 Buzz(社群小編做圖神器)。
  • 新增 Site(直接架網站)。
  • 新增 Make(Vibe code)。

結語

raw-image

我自己從 Photoshop、Adobe XD 用了七年,最近兩年才開始用 Figma,體感上覺得非常優質。

  • 多人協作不卡頓。
  • 更新功能非常迅速,語法產出也都是最新的。
  • 做圖的精準度非常高。
  • UI/UX 與開發團隊能透過工具快速溝通。
  • 轉出連結和關閉都很迅速。
  • 原型體驗也能符合很多效果。

只能說用過 Figma 以後,黏著度非常高,插件更是不斷出新,有廣大的討論群,資源滿滿!加上現在 MCP 普及,很多軟體也都和 Figma 能無痛串接,真的是無懈可擊。

留言
avatar-img
水日常
14會員
25內容數
自我覺察與成長 / UIUX / AI 應用 / 手沖咖啡 / 蔬食
水日常的其他內容
2026/03/01
強調各階段培養的核心能力,並探討了UI/UX在不同團隊協作中的關鍵角色。面對AI浪潮,反而能帶來更多可能性,鼓勵學習者成為「AI指揮家」,並指出溝通、同理心等人性特質是AI難以取代的優勢。
Thumbnail
2026/03/01
強調各階段培養的核心能力,並探討了UI/UX在不同團隊協作中的關鍵角色。面對AI浪潮,反而能帶來更多可能性,鼓勵學習者成為「AI指揮家」,並指出溝通、同理心等人性特質是AI難以取代的優勢。
Thumbnail
2025/07/15
「使用情境的連結」、「共感」、「解決問題」這三個關鍵,或許有時候賣的不只是產品和服務,而是與人之間的連結性。
Thumbnail
2025/07/15
「使用情境的連結」、「共感」、「解決問題」這三個關鍵,或許有時候賣的不只是產品和服務,而是與人之間的連結性。
Thumbnail
2025/07/06
做網站眉眉角角很多,需要繳的費用有哪些? 主機空間、網域、SSL...等等,一堆專有名詞,這篇對於要製作網站的您,一定是最基本的認識,相信和廠商溝通起來,肯定會流暢很多。
Thumbnail
2025/07/06
做網站眉眉角角很多,需要繳的費用有哪些? 主機空間、網域、SSL...等等,一堆專有名詞,這篇對於要製作網站的您,一定是最基本的認識,相信和廠商溝通起來,肯定會流暢很多。
Thumbnail
看更多
你可能也想看
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
本文詳細教學如何利用 Figma Make 這款 AI 協作設計工具,結合 ChatGPT 優化提示詞,快速生成可互動原型與程式碼。從準備、操作步驟、錯誤排除,到最後的發佈設定,提供給設計師能無需編程即可製作出可運作產品畫面的完整指南。
Thumbnail
本文詳細教學如何利用 Figma Make 這款 AI 協作設計工具,結合 ChatGPT 優化提示詞,快速生成可互動原型與程式碼。從準備、操作步驟、錯誤排除,到最後的發佈設定,提供給設計師能無需編程即可製作出可運作產品畫面的完整指南。
Thumbnail
Figma 試圖跨越設計與開發之間的鴻溝 在產品開發流程中,設計與工程常被視為兩座孤島。設計圖再精美,若無法精準傳達給開發者,最終產品仍可能偏離原意。過去的流程倚賴繁複的交接文件與一層又一層的溝通,常導致效率低落與誤解。而如今,一款源於設計圈的工具,卻悄悄在工程師圈子中擴張版圖--Figma。
Thumbnail
Figma 試圖跨越設計與開發之間的鴻溝 在產品開發流程中,設計與工程常被視為兩座孤島。設計圖再精美,若無法精準傳達給開發者,最終產品仍可能偏離原意。過去的流程倚賴繁複的交接文件與一層又一層的溝通,常導致效率低落與誤解。而如今,一款源於設計圈的工具,卻悄悄在工程師圈子中擴張版圖--Figma。
Thumbnail
「達譽設計開發有限公司」專注於「人」與「家」的需求,認為設計應融合功能性與情感價值。因此,在設計過程中,不僅要符合居住者的需求,還需考量如何以設計實現空間的舒適與心靈的共鳴。對雅梅來說,家不僅是一個建築空間,更是傳遞幸福的媒介,是承載家人彼此支持與成長的重要場所。
Thumbnail
「達譽設計開發有限公司」專注於「人」與「家」的需求,認為設計應融合功能性與情感價值。因此,在設計過程中,不僅要符合居住者的需求,還需考量如何以設計實現空間的舒適與心靈的共鳴。對雅梅來說,家不僅是一個建築空間,更是傳遞幸福的媒介,是承載家人彼此支持與成長的重要場所。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
在現代工作環境中,團隊之間的協作和討論變得越來越重要,FigJam 作為熱門的數位白板工具,專為團隊理清思維過程和協作而設計。無論你是設計師、產品經理、市場營銷人員還是任何需要集思廣益的團隊成員,都能通過 FigJam 在線上共同創造、共享想法並討論流程圖。
Thumbnail
在現代工作環境中,團隊之間的協作和討論變得越來越重要,FigJam 作為熱門的數位白板工具,專為團隊理清思維過程和協作而設計。無論你是設計師、產品經理、市場營銷人員還是任何需要集思廣益的團隊成員,都能通過 FigJam 在線上共同創造、共享想法並討論流程圖。
Thumbnail
我覺得這個顏色太淺了,可能需要調整一下~ 好的,沒問題! 於是你在設計系統中開始尋找使用到這個顏色的所有元件,然後一個一個修改,改完一個檔案還有另一個,好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿~瘋掉!!! 這樣令人抓狂的場景不只有在設計的時候會發生,當我們交付設計稿之後的開發階段
Thumbnail
我覺得這個顏色太淺了,可能需要調整一下~ 好的,沒問題! 於是你在設計系統中開始尋找使用到這個顏色的所有元件,然後一個一個修改,改完一個檔案還有另一個,好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿~瘋掉!!! 這樣令人抓狂的場景不只有在設計的時候會發生,當我們交付設計稿之後的開發階段
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
Thumbnail
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News