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

更新於 發佈於 閱讀時間約 2 分鐘

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

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

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

A figure showing the design process steps

A figure showing the design process steps


Wireframes 產品框線圖

Figma 可以用來畫 Wireframes

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

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

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.

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

the location of the share button


牛刀小試!

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

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

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

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

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

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


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







avatar-img
60會員
38內容數
台大心理系學生,在腦神經文獻、fMRI影像中心流轉後,覺得離「人」越來越疏遠。從新定位自己喜歡心理的原因後,以更貼近人性的UX為自學目標,此專題整理我在YouTube、edX、coursera上的課程,以及過去大學課堂上的內容,希望透過輸出,更進一步參透這個結合設計、心理學、美學、統計學(?) 的神祕領域。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Ruby Cheng的沙龍 的其他內容
設計思考的流程很多人都聽過,這個方法可以被用在許多地方,但說到底內容包含甚麼?怎麼用在 UX 設計,或是人生設計中?讓我們來一探究竟! 設計思考的大原則 提倡瘋狂且跳脫常規的想法。 沒有壞點子。你永遠不知道一個好點子會從哪裡冒出來。 確保每個人都感到舒適、自由發表自己的想法。 依靠彼此
本篇內容整理至edX UX Design 免費線上課程。 我們在這個免費線上課程的第三章囉!沒有看過第二章的話,請見之前發布過的文章: Innovations 三種不同形式的創新 在UX領域研究中,會碰到這三種不同形式的創新 Incremental Innovation 漸進式創新 隨著
若還沒有看過上篇(講Secondary Data)的話,請見這裡。 延續分析方法,這次要講的是Primary Data。 Primary Data Qualitative Data Collection Interviews and Focus Groups 訪談及焦點團體 相比於量化研究,
這篇要整理 UX領域中常見的研究方法。 方法很多,寫太長易獨性低,使用者體驗會很差XD, 所以分成上下兩篇,請見下回分解~ 本篇內容整理至edX UX Research 免費線上課程,
本篇整理至 edX UX Research 線上免費課程。 UX (user experience),也有人稱 UE,指的是一個產品所帶給使用者的感受。在這個「以人為本」的時代,機器是用來服務人類,因此要創造宜人的產品便是首要目標。 UX writing 是 UX writer 使用語言達到提升
設計思考的流程很多人都聽過,這個方法可以被用在許多地方,但說到底內容包含甚麼?怎麼用在 UX 設計,或是人生設計中?讓我們來一探究竟! 設計思考的大原則 提倡瘋狂且跳脫常規的想法。 沒有壞點子。你永遠不知道一個好點子會從哪裡冒出來。 確保每個人都感到舒適、自由發表自己的想法。 依靠彼此
本篇內容整理至edX UX Design 免費線上課程。 我們在這個免費線上課程的第三章囉!沒有看過第二章的話,請見之前發布過的文章: Innovations 三種不同形式的創新 在UX領域研究中,會碰到這三種不同形式的創新 Incremental Innovation 漸進式創新 隨著
若還沒有看過上篇(講Secondary Data)的話,請見這裡。 延續分析方法,這次要講的是Primary Data。 Primary Data Qualitative Data Collection Interviews and Focus Groups 訪談及焦點團體 相比於量化研究,
這篇要整理 UX領域中常見的研究方法。 方法很多,寫太長易獨性低,使用者體驗會很差XD, 所以分成上下兩篇,請見下回分解~ 本篇內容整理至edX UX Research 免費線上課程,
本篇整理至 edX UX Research 線上免費課程。 UX (user experience),也有人稱 UE,指的是一個產品所帶給使用者的感受。在這個「以人為本」的時代,機器是用來服務人類,因此要創造宜人的產品便是首要目標。 UX writing 是 UX writer 使用語言達到提升
你可能也想看
Google News 追蹤
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
在設計有四年快五年的時間,大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來,在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派,只是根據我本人的經驗摸索出來的設計方法,也不會用太多高深的詞彙說明。 以前搜尋怎麼做產品設計?究竟是要從什麼步驟開始的這件事情,大部分看到的
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
B 文組女生 如何善用 figma 和 GitHub 幸福課程 幸福教練黃老師 潮資訊媒體 文組女生可以透過以下方式善用 Figma 和 GitHub: #Figma Figma 是一款線上設計工具, 可用於製作網頁、應用程式、介面設計等。 文組女生可以使用 F
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
在設計有四年快五年的時間,大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來,在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派,只是根據我本人的經驗摸索出來的設計方法,也不會用太多高深的詞彙說明。 以前搜尋怎麼做產品設計?究竟是要從什麼步驟開始的這件事情,大部分看到的
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
B 文組女生 如何善用 figma 和 GitHub 幸福課程 幸福教練黃老師 潮資訊媒體 文組女生可以透過以下方式善用 Figma 和 GitHub: #Figma Figma 是一款線上設計工具, 可用於製作網頁、應用程式、介面設計等。 文組女生可以使用 F