教學|Figma怎麼用?要付費嗎?八大模組功能完整教學:如何用它做出美麗簡報與網站?
教學|Figma怎麼用?要付費嗎?八大模組功能完整教學:如何用它做出美麗簡報與網站?

當遠距工作成為越來越多工作者的日常,設計與行銷團隊常面臨同樣的挑戰:如何在同一份設計檔案上及時協作、修改、回饋與產出成果?傳統設計軟體不僅有安裝、授權的繁瑣步驟,版本若有更新可能也會有不相容的問題,更無法實現多人同時協作。

Figma 的出現改變了這一切。不論是設計師、產品經理還是內容行銷人,只要打開瀏覽器,就能即時共編及協作,甚至直接演示設計成果。因此,本次《未來商務》將帶讀者從基礎入門開始,了解 Figma 的核心特色、免費版功能、費用方案與實際操作步驟。

Figma:可多人協作的雲端設計平台,打破部門界線

Figma 是一款基於雲端設計與原型製作的平台,涵蓋了從構思、設計到原型製作,到最終與開發者交接的完整流程。它與一般繪圖軟體最大的不同在於「共編與雲端化」的特性,透過瀏覽器即可使用,可支援團隊共同設計及即時協作。

Figma 介面
圖/ Figma

此外,Figma 具有強大的協作環境,使用者可以將想法轉換成響應式、互動式的設計。使用者可以在一個設計檔案中建立多個頁面,每個頁面是一個獨立的畫布,可任意進行編輯。它的應用範圍廣泛,不只是界面設計,更涵蓋所有數位產品與視覺作品,舉凡:網站設計、手機 App、行銷與社群素材、互動原型設計…等。

Figma 畫布
使用者可以在 Figma 的一個設計檔案中建立多個頁面,每個頁面是一個獨立的畫布,因此可在上面任意編輯。
圖/ Figma

Figma 方案比較:免費版、專業版、組織版、企業版差在哪?

方案 Free(免費版) Professional(專業版) Organization(組織版) Enterprise(企業版)
年繳價格 $0 $36-192美元;$60-240美元(月繳) $60-660美元*無提供月繳方案 $60-1080美元*無提供月繳方案
Collab seat - $36美元;$60美元(月繳) $60美元 $60美元
Dev seat - $144美元;$180美元(月繳) $300美元 $420美元
Full seat - $192美元;$240美元(月繳) $660美元 $1080美元
適合對象 個人 專業人士、小型團隊 中小型企業、需管理多個設計產品的企業 大型企業、為多種產品或品牌設計的企業
主要功能 • 除了 Dev Mode,其餘 7 個模組都可有限度使用
• 無限草稿
• UI 套件和範本
• 基本設計檔案檢查
• 無

席位(Seat)功能說明:

● Collab seat 可使用功能包括:FigJam 及 Figma Slides。

● Dev seat 可使用功能包括:FigJam、Figma Slides、Dev Mode、Figma 及 Buzz。

● Full seat 可使用功能包括:FigJam、Figma Slides、Dev Mode, Figma Draw、Figma Design、Figma Buzz、Figma Sites 及 Figma Make

Figma 八大模組功能及使用教學

Figma 的強大,來自於其多個模組的整合,讓整個產品生命週期的工作都能在同一平台完成:

1. FigJam:線上協作白板,加速創意發想

是一款線上協作白板工具,適合團隊進行腦力激盪、工作坊、流程圖、旅程圖與策略規劃。在同一畫布上,團隊可即時拖曳便利貼、畫圖、註記、投票。而在進入畫布後,使用者可在右側窗格中輸入中/英文提示詞,若無設計想法的話,也可點擊下方的「Start with a template(從模板開始)」,可從 Figma 提供的眾多模板中挑選符合自身使用需求的項目。

#1 Figjam
圖/ Figma

舉例來說,當輸入「我想要製作一個時程表」並點擊「Make(製作)」後,下圖即為 Figma 自動生成的模板。之後,便可根據自身需求做細微調整,除了內容可進行客製化的調整外,連方格大小、線段長度也可調整或增減,整體編輯的自由度相當高。

#2 Figjam
圖/ Figma

而在 Figma 提供的眾多模板中,也可參考預設的分類,根據活動類型(如會議、圖表、想法激盪)及使用者角色(如設計師、開發者、學生或教育者…等)去做挑選。有了內建版型的加持,整體而言,使用上非常流暢及方便,也大幅減少需手動拖拉設計的時間。

#0 Figjam
圖/ Figma

2. Figma Slides:協作簡報工具,設計稿一鍵納入

設計團隊與協作團隊可用來製作簡報的工具,甚至可直接將設計稿/原型納入簡報頁面,並支援共同創作與呈現。所有在投影片上的內容更動都會被即時更新,所有使用者都能同步查看,減少儲存、下載或來回傳遞文件的時間。

進入 Figma Slides 後,首先會跳出如下圖的視窗,可選擇從頭開始製作簡報,或從現有模板中選擇,模板中包含各式擁有專業設計的頁面。此外,使用者可以混合搭配不同範本的頁面版面配置,而不用拘泥於同一種風格的模板,適合對於頁面設計有一定追求的使用者。

#0 Figma slides
圖/ Figma

選定好要編輯的模板後,同樣可針對內容進行客製化的編輯。選定好編輯標的後,可於右側的工作窗格中進行字級、字型、字距…等一系列的調整。

#1 Figma slides
圖/ Figma

如需將簡報共享給其他人進行編輯,可於右上角點擊「Share」,調整權限設定(僅供檢視、可編輯)後,再點擊「Copy link」取得分享連結;也可直接輸入共同使用者的信箱。

#0 Figma slide
圖/ Figma

當簡報內容完成後,可透過右上角的「 ▷(Present)」進行投影。或是也可將投影片依照下圖路徑,將其輸出成 PPTX 或是 PDF 檔。

#1 Figma slide
圖/ Figma

3. Dev Mode:開發者模式,縮短設計到實作的鴻溝

此模組為針對「開發者」與「設計交接流程」所設計的模式。需為付費用戶才可使用

開發者可在這模式下檢視設計檔中標記為「Ready for Dev」的元件、取得尺寸、程式碼片段、版本變更歷史等,縮短從設計到程式碼實作的時間。

Figma
圖中的鼠標會標示該名使用者的名稱。而除了支援多人協作,從構思、設計到原型並最終與開發者交接流程,都可在 Figma 中完成。
圖/ Figma

4. Figma Draw:專業插畫與視覺設計

著重於插畫與視覺設計的工具模式。提供更豐富向量繪圖、筆刷、紋理、文字沿路徑等功能,使設計師能在 Figma 平台內直接做插畫創作。

Figma draw
圖/ Figma

5. Figma Design:核心界面設計模組

這是 Figma 的核心設計模組,用於建立網站、手機 App 等數位產品的界面原型。使用者可在此模組中進行畫布設計、元件庫管理、互動原型等工作。

Figma design
圖中的藍色箭頭即是要讓原型進行互動的設定前置步驟,它可以讓使用者在進行點擊後,連結到藍色箭頭指向的下一個步驟。
圖/ Figma

最中央是設計工作區,使用者可在此進行任何的編輯及設計;最左側窗格則可看到所有元素,並可調整元素的群組、顯示名稱及於圖層中的位置;最底部則是功能區,可執行拉出群組(frame)、畫圖形、使用畫筆、輸入文字…等功能;最右側是樣式調整區,可針對元素進行客製化的調整,包含字級、顏色、字體、圖片…等。

Figma 介面
圖/ Figma

6. Figma Buzz:品牌與行銷素材的快速生產平台

主要針對行銷與品牌資產製作的平台。它支援品牌範本、社群貼圖、廣告素材、影片剪輯、AI 生成圖像等,讓非設計師也能快速生產品牌規範內的視覺作品。除了多款模板供選擇外,Figma 內建好發佈在不同社群管道中的宣傳素材尺寸,因此使用者可「一鍵任意切換」尺寸,毋須花費時間查找該管道的建議文宣尺寸。大幅省下素材製作的時間成本。

#1 Figma buzz
圖/ Figma

使用者也可設計整個團隊都可以使用的行銷模板,並設定哪些部分可編輯,哪些部分不可編輯,如此可確保所有內容都符合品牌要求。最後,當要輸出成品時,Figma 提供 JPG、PNG、PDF 的輸出選項,並可調整輸出成品的尺寸大小(Size)及色彩描述檔(Color profile,可使影像在不同設備間保持色彩一致性的文件)。

#0 Figma buzz
圖/ Figma

7. Figma Sites:設計即網站,一站式建站工具

一款從設計到製作、直接在 Figma 平台上輸出網站的工具。設計師可在同一平台設計、製作響應式網站並發布,不需切換到其他建站工具。當進入 Figma Sites 的模組後,首先使用者可以選擇從頭開始設計網頁,或是選用 Figma 現有的模板後再進行調整。

#1 Figma site
圖/ Figma

對於初用 Figma 的使用者,建議可直接選擇一款喜歡的模板開始,會大大降低試錯的時間。如選用系統提供的模板,內建有多個頁面,如首頁、計畫介紹頁、關於我們。而在每個介面中,Figma 也預先做好了在桌電、平板、手機三種不同介面上的響應式設計。令人驚喜的是,無論是圖片還是文字,只要在桌面板的介面上進行修改,Figma 便會自動同步修改到其他兩個介面。

#0 Figma site
圖/ Figma

延伸閱讀:Notion教學|Notion是什麼?如何用它做筆記、管理專案?中文版設定、安裝方式一次看

8. Figma Make:AI 驅動,快速打造可執行原型

Figma 的 AI 驅動工具,使用者可從文字提示詞(prompt)或現有設計稿出發,快速生成可互動的原型或網頁/App 應用,甚至連接真實資料庫/API,快速打造可執行的原型,下圖即為供使用者輸入文字提示詞的頁面。舉例來說,可以輸入「我想要製作一個一頁式的《未來商務》品牌介紹網頁」。

#3 Figma make
圖/ Figma

輸入提示詞後,Figma 會依據使用者的需求去延伸出更多需要呈現在網頁的內容。而在左側的窗格中,點開「Reasoning」,可以看到 AI 工具協助補全的內容,包含:「用戶想要製作一個一頁式的《未來商務》品牌介紹網頁。這是一個繁體中文的請求。」、「我應該創建一個包含以下部分的頁面:主視覺和標題、關於/簡介、聯絡方式…等」。

Figma make
圖/ Figma

等候約 5 分鐘的時間,Figma 製作的成品便會出現在右側的窗格中。實際操作後,該成品仍保留手動調整的空間,如字級、顏色、字體…等,但卻無法隨意拖動元素擺放的位置及文字內容。需藉由左下角的對話窗格輸入修改需求後,AI 才可協助使用者調整。

#0 Figma make
圖/ Figma

除了文字內容,也可將圖檔作為附件上傳,並請 AI 替換掉原本的文字,再者也可以請 AI 修改網頁的文字排版方式,如下圖即是輸入:「1. 請將左上方『未來商務』的文字替換成附件的圖檔。2. 『引領...脫穎而出。』的文字請改成置左排列。」後,AI 自動修改網頁的成果。

Figma make
圖/ Figma

延伸閱讀:超好用!Perplexity Finance幫你解讀財報、追蹤美股,免費版就能開啟!完整教學一次看

誰適合用 Figma?

無論是初次接觸設計的行銷企劃,或想優化產品體驗的 PM,抑或是需要把想法視覺化的使用者,Figma 都是個能讓使用者「無痛參與設計流程」的工具,從而大幅提升跨部門溝通效率。此外,內建多種專業且具設計感的可編輯模板,其 Figma Make 也具有 AI 功能,可以讓使用者用對話的方式來完成自己獨一無二的設計,因此入門門檻很低。

若你正想嘗試用 AI 或新工具來提升工作效率,不妨試試 Figma,整體使用感受相當流暢且好上手,絕對會讓你大吃一驚。

本文授權轉載自《FC未來商務》

延伸閱讀:免費線上伴讀神器!Gemini Live可以「共享螢幕+中英文語音互動」,4步驟完整教學

關鍵字: #AI工具
往下滑看下一篇文章
從第一天就走向全球!MOOIMOM、大研生醫、特力集團借力亞馬遜出海,以創新、信任打造品牌護城河
從第一天就走向全球!MOOIMOM、大研生醫、特力集團借力亞馬遜出海,以創新、信任打造品牌護城河

在全球「消費升級」的時代,現今消費者要找的,不是最便宜、CP 值最高的產品,而是更安全、更值得信任、更符合需求的商品。在此趨勢下,台灣品牌的優勢反而被放大。

事實上,憑藉著深厚的製造底蘊、對品質的堅持,許多來自台灣的品牌,正透過精準的「價值創新」研發,以及「安全信任」的品牌經營,在亞馬遜上,擄獲各國消費者的青睞。

拒絕等待完美,MOOIMOM 透過出海、迭代快速進化

新創母嬰品牌 MOOIMOM 自 2016 年創立起,便瞄準全球市場,MOOIMOM 創辦人周靖棠指出,近年來,台灣新生兒人數持續下滑,若一開始就只做台灣市場,花去的時間、開發成本都無法撐起未來的成長性,「所以我們第一天就決定『Go Gloabl』,這對新創非常重要。」

AWS-2.png
新創品牌MOOIMOM瞄準母嬰市場,有鑒於台灣新生人口持續負成長,從2016年創立的第一天,創辦人周靖棠就決定Go Gloabl,決心用優質產品,挑戰更大的市場。
圖/ MOOIMOM

MOOIMOM 是從印尼市場起家,再逐步拓展回台灣,但周靖棠隨即又意識到,若「Go Global」僅在東南亞、台灣,仍然有侷限,於是 MOOIMOM 決定加入亞馬遜,跨出亞洲、進軍澳洲等市場,「MOOIMOM 需要一個已經有高信賴度、強大物流、精準數據的夥伴,協助我們降低跨足北美、澳洲等市場的門檻。」

AWS-3
MOOIMOM創辦人周靖棠、共同創辦人李沆澎及團隊,透過運用亞馬遜數據與工具,以最真實的消費者反饋,反覆打磨產品。
圖/ MOOIMOM

為了找到市場缺口、實踐價值創新,MOOIMOM 積極運用亞馬遜上的數據與賣家工具。相較於其他品牌可能會注意自家產品有多少五顆星的評價,周靖棠尤其重視「四顆星」的留言,「因為那往往是能不能從『好』做到『更好』的關鍵。」以 MOOIMOM 的「涼感產後束腹帶」為例,團隊透過評論,發現邊緣縫線會造成皮膚的些微摩擦,加上產婦穿不住悶熱的材質,於是,MOOIMOM 花了近兩年時間,參考亞馬遜後台數據,包括消費者留言、競品的包裝顏色、排名落差等資訊,將產品從 1.0 迭代至 3.0 版本,不僅改採涼感透氣材質,更做到無縫線的舒適感。周靖棠透露,1.0 版的束腹帶,原先一週賣不到 1000 美元,但發展至 3.0 時,除了評價穩定保持在 4.3 顆星以上,一週甚至可以達到1萬美元的營業額,等於成長十倍。

AWS-4.png
圖/ MOOIMOM
AWS-5.png
產後束腹帶三代迭代圖,不僅涼感透氣,更做到無縫線的舒適體驗,讓產後媽媽可以穿得住,真正達到束腹的效果。
圖/ MOOIMOM

另外,周靖棠也善用亞馬遜的「A+ Content」等工具,將「永續」元素植入 MOOIMOM。由於澳洲對環保、安全規範的要求,向來以嚴格聞名,對於跨境電商無法「觸摸實品」的鴻溝,團隊便運用 A+ Content,在產品頁面中將小麥桿融合PP材質等無毒認證和安全細節,讓消費者一目瞭然。針對各國嚴格的母嬰用品法規,團隊也在亞馬遜協助下,一一完成合規程序,把出海阻礙轉化為讓消費者安心買單的保證。

科學實證敲開日本大門,大研生醫靠極致細節贏得信任

以德國頂級魚油、視易適葉黃素等產品聞名的大研生醫,起初是為了自己和家人的保健需求創立,在台灣取得佳績後,大研決定將這份堅持帶向世界。而出海的首站,是保健食品發展逾百年、相當競爭的日本市場。

AWS-6.jpg
大研生醫出海首站就挑戰保健食品發展逾百年、相當競爭的日本市場,大研生醫董事長林東慶表示,進入日本市場真的很辛苦,但當收到日本消費者正向的回饋時,對團隊帶來很大的鼓舞。
圖/ 數位時代

大研生醫董事長林東慶解釋,先選擇日本,是因為當地消費者偏好網購、多居住於公寓,購物習慣、商業環境和台灣相近。至於決定透過亞馬遜進軍日本,一方面出於亞馬遜是日本使用率最高的電商網站之一。其次,在日本市場想「從 0 到 1」發展不易,溝通成本高,「但亞馬遜上的消費者,都很願意接受新東西。代表我們更容易在上面找到對的人。」

林東慶特別提到,日本保健食品市場歷史悠久,卻並非完全沒有切入機會。例如:日本延續過往經驗,原料進展未必跟上時代需求,市面的魚油濃度普遍都不足。除了端出創新的產品之外,想進入相對成熟的日本保健品市場,安全有效、建立信任是唯一真理,「大研經營的正是『信任』,信任背後代表了你的產品、服務和品牌。而亞馬遜就是過程中的最強後盾。」

大研透過亞馬遜的後台數據,從消費習慣與市場需求兩個面向,深入了解日本市場。例如,日本消費者偏好小顆粒、一天可服用多顆保健品;另一方面,日本社會因工作壓力大,助眠、舒緩情緒等產品需求也持續成長。團隊再搭配「在地製造、世界原料」的策略,讓「Made in Japan」成為敲門磚,「就和在台灣帶起『高濃度魚油』的風潮一樣,我們以國際頂級專利原料、強大的科學實證及嚴格的產品檢驗,帶起新趨勢。」

大研甚至將細節延伸至包裝、服務。比方說,日本家戶的信箱尺寸偏小,大研的包裝設計,便要確保能順利投遞進信箱;消費者認為用紙盒包裝更安全,大研也從善如流,採精緻紙盒而非美國市場的簡約瓶裝。由於在每個環節都做到極致,大研才進軍日本亞馬遜半年,就奪下 Omega-3 魚油類目排名第一,整體 BSR 也達到 1000 至 1200 名以內。

接下來,大研計劃進軍極度重視天然與健康的澳洲市場,以及競爭激烈的美國市場,林東慶強調,大研期望透過亞馬遜,將對品質的堅持帶出台灣,成為具影響力的全球品牌。

AWS-7.jpg
大研生醫因應不同市場消費習慣,推出日本、美國、台灣三種版本魚油產品,同樣訴求高濃度、高品質。不僅在生產上呼應其「在地製造、世界原料」的全球化策略,更配合當地市場習慣,量身定做外包裝規劃,左:日本版、中:美國版、右:台灣版德國頂級魚油)
圖/ 數位時代

跳脫傳統代工宿命,特力集團用數據算出市場需求

擁有 30 年歷史的特力集團,從傳統 B2B 貿易起家,如今再下一城、攻入跨境電商市場,在亞馬遜上的營收,每月穩定達到美元六位數。這背後,是一場為了解決傳統代工痛點發起的 DNA 轉型。

特力集團業務總監 Isaac Liao 指出,傳統 B2B 貿易是特力深厚且穩固的根基,但為了在全球供應鏈重組的變局中更具敏捷度,特力必須打破過去與終端市場之間的隔紗。但中上游企業打下游 B2C 戰局,最怕盲目下注或因為怕虧損而不敢試錯。特力的心法,是建立一個「基於數據的科學容錯機制」,把亞馬遜當成全球導航儀,大膽做小規模的市場實驗,算準了、看清了再重注出擊。

AWS-8.jpg
特力集團出席亞馬遜新銳品牌加速器活動,分享如何運用數據工具找出消費者痛點,推動企業從製造思維轉向市場思維。
圖/ 數位時代

Isaac 透露,特力在歐美家居市場突圍的關鍵,在於用「數據」找出消費者的痛點,再據此創新產品,「中上游企業常覺得自家產品無敵,怎麼會賣不好?但在電商戰場,消費者沒搜那個關鍵字,產品再好都等於不存在。」特力是用亞馬遜的商機探測器、品牌分析工具,抓出高需求、低競爭的藍海市場,並將自家產品、競品的負評,作為研發參考。例如團隊抽絲剝繭後,發現消費者通常在購買資源回收桶時,最痛恨「異味洩漏」和「腳踏板易壞」;買烤肉推車時,則有「說明書看不懂」、「組裝太複雜」等痛點。團隊會再據此回頭改良製程、產品,並將行銷時,將這些痛點的「解方」直接放大在亞馬遜的產品頁面 A+ Content 和主圖影片中。

AWS-9.jpg
Isaac分享,透過數據發現消費者通常在購買資源回收桶時,最痛恨「異味洩漏」和「腳踏板易壞」,團隊會再據此回頭改良製程、產品,並將行銷時,將這些痛點的「解方」直接放大在亞馬遜的產品頁面A+ Content和主圖影片中,讓消費者一目瞭然,加速決策。
圖/ Amazon

Isaac 特別提到,近期特力導入了亞馬遜行銷雲(Amazon Marketing Cloud, AMC),拆解完整的消費旅程。以特力在亞馬遜熱銷的烤肉推車為例,透過 AMC 的底層數據藍圖,團隊發現歐洲消費者從心動到行動平均需要三週。消費者可能在第一週看球賽時,先被特力的品牌影片廣告(DSP)吸引;第二週滑亞馬遜時,看到展示型廣告(SD)被再次提醒;直到第三週週末要辦派對了,才在搜尋框輸入關鍵字並透過商品廣告(SP)下單結帳,「AMC 讓我們看清這條跨渠道的『消費旅程藍圖』,把過去盲目砸廣告的焦慮,變成每分錢都能精算回報率的高精準 ROI 投資。」

特力已立下月營收達七位數美元的新目標。Isaac 透露,團隊正積極布局生成式引擎優化(GEO)等最新 AI 搜尋趨勢,並根據亞馬遜的後台數據,延伸家居周邊產品線,期望推動內部從「製造思維」進化為「市場和品牌思維」,讓台灣深厚的製造底蘊,能在國際零售舞台上走得更深、更遠。

在迎戰「消費升級」的此刻,台灣企業從來不缺好技術,缺的是直面終端市場的勇氣與機會。而亞馬遜提供的,不只是一套銷售工具,而是一套完整的「持續創新」能力——從全球物流、在地合規,到消費者洞察與數據分析,讓品牌得以直接理解世界各地消費者的真實需求。透過這套基礎設施,品牌能在國際市場中「快速測試、快速修正、快速成長」,把每一次迭代都變成站穩腳步的養分。台灣品牌只要願意邁出第一步,再借力亞馬遜的全球能力,勢必能在世界舞台走得更穩、更遠,實踐「Go Global From Day One」的布局。

想要挑戰跨境,讓更多人認識你的產品嗎?
立即報名 Taiwan Select Day

圖/ Amazon

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
代理式商務連動百兆商機
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓