產品經理 作者: calamucho

［PM工作］原型設計工具(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 的基本流程

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

參考示意圖：製作 Login 頁面

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

Figma for design + prototyping：Figma 設計軟體平台本身的服務，我和團隊是選擇此方案

FigJam for whiteboarding：Figma 延伸的 FigJam 為線上協作的白板繪圖功能

目前我們選擇的為 “Figma Professional” 中間這個方案，要留意是每一位要在這個 Team 團隊進行協作，擁有「編輯」權限者，是「一個人 x 一個月 $12 美金（換算新台幣 $357）」，若在每月中途新增使用者，則會在下個月收費；或是不小心開啟了 FigJam 功能也會扣款，使用付費版本要多留意是否有加開某些功能。

– – – – – – – – – – – – – – – – – – – – – – – –

以上從 Figma 用途、平台介紹至實際運用的做法，都是很基礎的功能，歡迎回饋交流意見！

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *