當遠距工作成為越來越多工作者的日常,設計與行銷團隊常面臨同樣的挑戰:如何在同一份設計檔案上及時協作、修改、回饋與產出成果?傳統設計軟體不僅有安裝、授權的繁瑣步驟,版本若有更新可能也會有不相容的問題,更無法實現多人同時協作。
Figma 的出現改變了這一切。不論是設計師、產品經理還是內容行銷人,只要打開瀏覽器,就能即時共編及協作,甚至直接演示設計成果。因此,本次《未來商務》將帶讀者從基礎入門開始,了解 Figma 的核心特色、免費版功能、費用方案與實際操作步驟。
Figma:可多人協作的雲端設計平台,打破部門界線
Figma 是一款基於雲端設計與原型製作的平台,涵蓋了從構思、設計到原型製作,到最終與開發者交接的完整流程。它與一般繪圖軟體最大的不同在於「共編與雲端化」的特性,透過瀏覽器即可使用,可支援團隊共同設計及即時協作。
此外,Figma 具有強大的協作環境,使用者可以將想法轉換成響應式、互動式的設計。使用者可以在一個設計檔案中建立多個頁面,每個頁面是一個獨立的畫布,可任意進行編輯。它的應用範圍廣泛,不只是界面設計,更涵蓋所有數位產品與視覺作品,舉凡:網站設計、手機 App、行銷與社群素材、互動原型設計…等。
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 提供的眾多模板中挑選符合自身使用需求的項目。
舉例來說,當輸入「我想要製作一個時程表」並點擊「Make(製作)」後,下圖即為 Figma 自動生成的模板。之後,便可根據自身需求做細微調整,除了內容可進行客製化的調整外,連方格大小、線段長度也可調整或增減,整體編輯的自由度相當高。
而在 Figma 提供的眾多模板中,也可參考預設的分類,根據活動類型(如會議、圖表、想法激盪)及使用者角色(如設計師、開發者、學生或教育者…等)去做挑選。有了內建版型的加持,整體而言,使用上非常流暢及方便,也大幅減少需手動拖拉設計的時間。
2. Figma Slides:協作簡報工具,設計稿一鍵納入
設計團隊與協作團隊可用來製作簡報的工具,甚至可直接將設計稿/原型納入簡報頁面,並支援共同創作與呈現。所有在投影片上的內容更動都會被即時更新,所有使用者都能同步查看,減少儲存、下載或來回傳遞文件的時間。
進入 Figma Slides 後,首先會跳出如下圖的視窗,可選擇從頭開始製作簡報,或從現有模板中選擇,模板中包含各式擁有專業設計的頁面。此外,使用者可以混合搭配不同範本的頁面版面配置,而不用拘泥於同一種風格的模板,適合對於頁面設計有一定追求的使用者。
選定好要編輯的模板後,同樣可針對內容進行客製化的編輯。選定好編輯標的後,可於右側的工作窗格中進行字級、字型、字距…等一系列的調整。
如需將簡報共享給其他人進行編輯,可於右上角點擊「Share」,調整權限設定(僅供檢視、可編輯)後,再點擊「Copy link」取得分享連結;也可直接輸入共同使用者的信箱。
當簡報內容完成後,可透過右上角的「 ▷(Present)」進行投影。或是也可將投影片依照下圖路徑,將其輸出成 PPTX 或是 PDF 檔。
3. Dev Mode:開發者模式,縮短設計到實作的鴻溝
此模組為針對「開發者」與「設計交接流程」所設計的模式。需為付費用戶才可使用
開發者可在這模式下檢視設計檔中標記為「Ready for Dev」的元件、取得尺寸、程式碼片段、版本變更歷史等,縮短從設計到程式碼實作的時間。
4. Figma Draw:專業插畫與視覺設計
著重於插畫與視覺設計的工具模式。提供更豐富向量繪圖、筆刷、紋理、文字沿路徑等功能,使設計師能在 Figma 平台內直接做插畫創作。
5. Figma Design:核心界面設計模組
這是 Figma 的核心設計模組,用於建立網站、手機 App 等數位產品的界面原型。使用者可在此模組中進行畫布設計、元件庫管理、互動原型等工作。
最中央是設計工作區,使用者可在此進行任何的編輯及設計;最左側窗格則可看到所有元素,並可調整元素的群組、顯示名稱及於圖層中的位置;最底部則是功能區,可執行拉出群組(frame)、畫圖形、使用畫筆、輸入文字…等功能;最右側是樣式調整區,可針對元素進行客製化的調整,包含字級、顏色、字體、圖片…等。
6. Figma Buzz:品牌與行銷素材的快速生產平台
主要針對行銷與品牌資產製作的平台。它支援品牌範本、社群貼圖、廣告素材、影片剪輯、AI 生成圖像等,讓非設計師也能快速生產品牌規範內的視覺作品。除了多款模板供選擇外,Figma 內建好發佈在不同社群管道中的宣傳素材尺寸,因此使用者可「一鍵任意切換」尺寸,毋須花費時間查找該管道的建議文宣尺寸。大幅省下素材製作的時間成本。
使用者也可設計整個團隊都可以使用的行銷模板,並設定哪些部分可編輯,哪些部分不可編輯,如此可確保所有內容都符合品牌要求。最後,當要輸出成品時,Figma 提供 JPG、PNG、PDF 的輸出選項,並可調整輸出成品的尺寸大小(Size)及色彩描述檔(Color profile,可使影像在不同設備間保持色彩一致性的文件)。
7. Figma Sites:設計即網站,一站式建站工具
一款從設計到製作、直接在 Figma 平台上輸出網站的工具。設計師可在同一平台設計、製作響應式網站並發布,不需切換到其他建站工具。當進入 Figma Sites 的模組後,首先使用者可以選擇從頭開始設計網頁,或是選用 Figma 現有的模板後再進行調整。
對於初用 Figma 的使用者,建議可直接選擇一款喜歡的模板開始,會大大降低試錯的時間。如選用系統提供的模板,內建有多個頁面,如首頁、計畫介紹頁、關於我們。而在每個介面中,Figma 也預先做好了在桌電、平板、手機三種不同介面上的響應式設計。令人驚喜的是,無論是圖片還是文字,只要在桌面板的介面上進行修改,Figma 便會自動同步修改到其他兩個介面。
8. Figma Make:AI 驅動,快速打造可執行原型
Figma 的 AI 驅動工具,使用者可從文字提示詞(prompt)或現有設計稿出發,快速生成可互動的原型或網頁/App 應用,甚至連接真實資料庫/API,快速打造可執行的原型,下圖即為供使用者輸入文字提示詞的頁面。舉例來說,可以輸入「我想要製作一個一頁式的《未來商務》品牌介紹網頁」。
輸入提示詞後,Figma 會依據使用者的需求去延伸出更多需要呈現在網頁的內容。而在左側的窗格中,點開「Reasoning」,可以看到 AI 工具協助補全的內容,包含:「用戶想要製作一個一頁式的《未來商務》品牌介紹網頁。這是一個繁體中文的請求。」、「我應該創建一個包含以下部分的頁面:主視覺和標題、關於/簡介、聯絡方式…等」。
等候約 5 分鐘的時間,Figma 製作的成品便會出現在右側的窗格中。實際操作後,該成品仍保留手動調整的空間,如字級、顏色、字體…等,但卻無法隨意拖動元素擺放的位置及文字內容。需藉由左下角的對話窗格輸入修改需求後,AI 才可協助使用者調整。
除了文字內容,也可將圖檔作為附件上傳,並請 AI 替換掉原本的文字,再者也可以請 AI 修改網頁的文字排版方式,如下圖即是輸入:「1. 請將左上方『未來商務』的文字替換成附件的圖檔。2. 『引領...脫穎而出。』的文字請改成置左排列。」後,AI 自動修改網頁的成果。
誰適合用 Figma?
無論是初次接觸設計的行銷企劃,或想優化產品體驗的 PM,抑或是需要把想法視覺化的使用者,Figma 都是個能讓使用者「無痛參與設計流程」的工具,從而大幅提升跨部門溝通效率。此外,內建多種專業且具設計感的可編輯模板,其 Figma Make 也具有 AI 功能,可以讓使用者用對話的方式來完成自己獨一無二的設計,因此入門門檻很低。
若你正想嘗試用 AI 或新工具來提升工作效率,不妨試試 Figma,整體使用感受相當流暢且好上手,絕對會讓你大吃一驚。
本文授權轉載自《FC未來商務》
