Figma: 一款UIUX設計師跟PM都必用的工具

今天要來整理 Figma的免費課程！傳送門

Figma 是個很好用的製圖工具，

但在真正用 Figma 畫 UIUX時，最重要的第一步是「知道這個專案的目的」。

A figure showing the design process steps

Wireframes 產品框線圖

Figma 可以用來畫 Wireframes

就像在寫文章一樣先有大鋼，再填內容。在做產品設計的時候，也會先要有一個骨架，讓團隊中各個角色的人知道「產品大概會長甚麼樣子」。

An illustration of a wireframe showing a basic sketch of a website

依據 Wireframe的精細程度，有可以分成三種：

An illustration showing three versions of the same design ranging from low to high fidelity.

依據時間發展會從低精細度→中精細度→高精細度，低精細度讓產品有個初步的概念，易於讓思考具象化且即時修改。到高精細度時，產品的樣子可以說非常具體了，而且可以進一步到 prototype 的階段。

在進入 Prototype 之前，想邀請想學 Figma 但遲遲沒有動作的人，趕快去申請一個帳號！頭就給他洗下去，從做中學！

分享另一個 Youtube 頻道，雖然是英文，但跟著他一起就可以學起來那些基礎功能了！

Prototype 產品原型

基本上就是真正能用的產品的不能用版本（好饒口XD），
就像一個記帳軟體，要"真正"能點選類別（交通費？餐費？），以及能加總金額（我今天總共吃了多少錢？），是需要經過工程團隊打 code 的！因此 Figma 能做的就是把跳轉頁面（user flow）的流程做好，讓使用者知道產品原來是這樣運作的。

所以 Figma 是怎麼串接不同頁面的呢？非常簡單！請看這支影片↓

Share Designs 共享產品成果

the location of the share button

牛刀小試！

步驟 1：打開你的手機，選擇你最喜歡的應用程式進行重建。

步驟 2：打開你選擇的應用程式，並在其中進行操作，確保你熟悉所有流程。選擇3個在使用者流程中相互關聯的頁面，成為你挑戰的目標。

步驟 3：記錄你選擇的3個頁面之間的使用者流程。

步驟 4：在 Figma 中為你選擇的3個屏幕創建線框圖（從低精細度開始即可）。

步驟 5：在線框圖中添加內容，包括標誌、圖片和文字，提高設計的精細度。

步驟 6：根據之前記錄的使用者流程，在設計中添加頁面間的互動流程。

這只是最最最簡單的功能，許多進階的就等你自己玩玩看囉！