- PM 使用 Figma 之目的
- Figma 介面簡易導覽
- Figma 介面簡易導覽 − 全站左上角功能列表
- Figma 介面簡易導覽 − 全站右上角功能列表
- Figma 介面簡易導覽 − 全站左側邊欄
- Figma 介面簡易導覽 − 全站右側邊欄
- 繪製 Wireframe 的基本流程
- Figma 付費版本與免費版本差異
在先前文章:[PM工作]原型設計工具(Wireframe)的選擇 有提到我目前所屬團隊在產品視覺化所採用的協作工具為 Figma,使用期間也 2 年多了,使用情境也從免費版升級為付費版,整體來說我認為 Figma 是一款很棒的工具,本文將以產品經理 PM 的實作經驗與各位分享。
我使用 Figma 目的:繪製產品原型圖 Wireframe 並與團隊溝通產品雛形
在一個產品從產品設計初期到順利上線後的功能優化,會分成幾個階段來看,而每個階段 Figma 扮演的角色佔比不同,對 PM 來說在初期繪製原型圖完整佔據 100%,當 Wireframe 完成且大致的架構出來,開始與團隊(利害關係人)溝通產品需求時,後續的 Wireframe 大部分都是僅微調的狀況;除非 Wireframe 繪製的架構是非常致命的錯誤,整份才會打掉重練。
Figma 之於視覺設計師來說,PM 首先提供 Wireframe 後,設計師會從原型架構再移轉至設計師自己的 Figma 工作區,開始進行產品視覺設計階段(Mockup),通常在這階段會決定這個產品的視覺定調(Tone and Manner),整體的 UI 與 UX 也會在這個階段處理,屆時最終段會由設計師的 Figma 檔案再交付給前端工程師(Front-end engineer)進行程式開發作業。
Figma 介面簡易導覽
讓我們來一探 Figma 的介面,中間為主要的工作區,從上至下分別為「新增」、「使用 Figma 官方建議的範本(Template)」及下方為每一個「專案」(Design File);左側導覽列則為基本功能展示,如近期資料、草稿資料與 Figma 社群,Community 有許多其他設計創作者的作品分享,有空可以參考逛逛看。接下來則是所屬團隊,想像成資料夾收合的概念,若有跨團隊或跨專案需要瀏覽不同的團隊資料,那左下角的團隊(Teams)應該會很常使用到。

以下為 Figma 官方提供的範本之一:Wireframe
若新手 PM 仍對於繪製 Wireframe 尚未有概念或是想參考架構,可以直接參考這一份

進入 Figma 單一份專案開始進行製圖工作時,必須先瞭解全站的功能,若可以進階得知一些小技巧相信有助於提升工作效率!另外特別提醒 Figma 目前尚未有中文版,全站皆為英文版。
全站左上角功能列表
這邊的功能列只要當下點擊到哪一個,該按鈕則會顯示為藍色
F – icon
第一個 F 型態的按鈕為切換專案、檢視不同瀏覽視角用,如希望可以看到格線、關閉 Comment 文字等。Figma 亦支援插件工具(plugins) ,皆可以從這邊調整。

Move / Scale
箭頭為基本的在工作區可以讓所見的圖層元件移動,及調整大小狀態之工具,亦可切換為縮放工具的狀態。應用情境為假設匯入一個 Logo,這時我會選擇 Scale 調整 Logo 大小及擺放位置,因為使用預設的 Move 可能會讓 Logo 原始比例跑掉,必須使用 Scale 才能確保等比例調整。

Frame / Slice
第三個井字號的按鈕為最常使用的框架(frame)亦可稱為畫板或畫布,是支撐整個 Wireframe 繪製的基底結構;這個按鈕另一個切換之功能為切片、切圖(slice),通常用以在某一個圖層中需要擷取出特定的區塊。

Rectangle / Line / Arrow / Ellipse / Polygon / Star / Place image
正方形按鈕為用來繪製各種形狀的工具,如矩形、線條、箭頭圖示等,在此最後一個項目也可以上傳圖片。

Pen / Pencil
如果不想用上述的線條元件也可以使用筆或鉛筆進行繪製,形成手繪風格,或者是只是想初步大概畫一下架構圖,希望先簡單溝通,待需求被收納到一定程度且產品越來越明確,才進到使用框線圖層元件進行繪製也是可以的。

Text
用以輸入文字使用,點擊後即可在畫面上進行輸入。

Hand tool
拖曳圖層,有別於上述的 Move 功能無法將元件進行縮放。

Add comment
這也是我經常使用的功能,有時候每個人在看畫面時不見得可以立刻討論,因此可以先在畫面上加註個人對於某個畫面或功能的意見,且對方也可以知道你是在哪個時間點寫下摘要並能夠予以回覆。

全站右上角功能列表

- 紅色圓圈的部分預設為使用者帳號之縮寫大頭貼(範例為被我馬賽克起來😂),也可以上傳自訂圖片。
- 藍色[Share] 表示設定分享的權限,可以針對不同 E-mail 帳號設定唯讀或編輯權限,也可以設定只要有權限讀取此網址都可以看到檔案內容。

- 第三個三角形 ▷ 則是展示(Present)的功能,當產品要對外進行展示說明時,不適用於將繪製原稿的 Wireframe 工作區供大家檢視,一方面為觀眾容易在多個圖之間切換時注意力發散、另一方面為通常工作區的元件們很多(也可能很凌亂),因此使用展示的功能則會「另開分頁」,也可以套用 Figma 內建的裝置示意,例如將繪製好的畫面與 iPhone 13 的畫面合在一起,讓觀眾更容易想像屆時完成時的狀態。
- 最後一個顯示的比例為 Zoom/view options 即縮放工具,可以直接點擊下拉選單的比例,此時畫面中的工作區就會連動調整了。但我自己比較常使用的方式為直接在工作區使用 Mac 鍵盤[command] +[+]或[-],就能進行縮放。

全站左側邊欄
圖層與分頁劃分明確,頁面命名建議具有規則性,查找資料較為便利
以 Figma 官方提供的 Wireframe Template 為範例:

- Layers:官方的說明文件提到:”Any Frames, Groups or Objects you add to the canvas will be visible in the Layers panel.” 表示任何的框架、群組及元件都可以在這個圖層單元處理。
- Assets:當有更複雜的元件且需要重複使用的話則可以在此找到。
- Pages:在每一個文件可以有多個頁面,例如分為:首頁、說明頁面 P.1,2,3…
全站右側邊欄
編輯單一元件之顏色、精細程度、角度等

- Design:官方的說明文件提到:”The Design tab allows you to view, add, remove or change the properties of objects within your design.” 可以精細到針對單一元件進行設計,也允許一次多選多個元件的情況下進行設計編輯。
- Prototype:當製作的畫布及架構大致底定後,可以使用此功能將每個頁面及功能串連起來,屆時觀眾或潛在用戶可以看到的畫面不見得是全靜態的狀態,可以看到功能之間的互動狀態。
- Inspect:利用代碼實踐設計稿創意,像我們團隊的前端工程師最常使用的即為 CSS (Web Development)。
PM 必備技能:繪製 Wireframe 的基本流程

- 首先我會建立預備要製作幾個分頁的頁數(Page),並且逐一標註每個頁數代表的編號,如 1.0.0, 2.0.0… 代號會影響這個頁數中各畫布畫面連帶所對應的代號,我認為好用的點在於當今天我要與團隊溝通「No. 2.3.8」的這個功能時,所有人可以快速的找到。
- 接著會開始製作每一頁的內容,從大的框架開始進行設計,以及全站通用的如導覽列、必要出現的元件或是警語,初期可能會先以 Header, Footer, Navigation 基本框架為主。
- 根據預想的畫面上要呈現的功能,盡可能從畫面上的圖示就能夠看得出意涵,但有些細節會需要用文字描述,舉例如畫面上可能有「表格」,表格的欄位需要有排序的功能嗎?且排序的依據是什麼?
- 透過每一個頁面的製作,最後套用實際的情境順過流程,很容易在過程中發現有遺漏、沒有考量到的點,這時就可以進行補充。
參考示意圖:製作 Login 頁面

Figma 付費版本與免費版本差異

Figma for design + prototyping:Figma 設計軟體平台本身的服務,我和團隊是選擇此方案
FigJam for whiteboarding:Figma 延伸的 FigJam 為線上協作的白板繪圖功能
目前我們選擇的為 “Figma Professional” 中間這個方案,要留意是每一位要在這個 Team 團隊進行協作,擁有「編輯」權限者,是「一個人 x 一個月 $12 美金(換算新台幣 $357)」,若在每月中途新增使用者,則會在下個月收費;或是不小心開啟了 FigJam 功能也會扣款,使用付費版本要多留意是否有加開某些功能。
– – – – – – – – – – – – – – – – – – – – – – – –
以上從 Figma 用途、平台介紹至實際運用的做法,都是很基礎的功能,歡迎回饋交流意見!