課程內容更新 (2024)
購買課程前請同學先了解以下課程內容更新資訊 (2024)
☞ 為什麼我們要更新課程內容呢?
我們知道自從課程推出後 Figma 經歷了幾次的更新和改版,因此有些現行的功能介面已經跟和課程錄製時的稍有不同,因此我們希望透過更新課程影片與補充教材的方式,來幫助同學能夠順利學習。
除了最新的課程內容更新之外,加入課程後也能透過專屬的校友社群頻道來向助教發問,來及時得到解答,因此完全不需要擔心學習卡關哦!
☞ 開始上課後,我要如何找到課程更新影片呢?
購買課程後前往第 1 章節的的第 1 單元 - 【2024更新】課前學習手冊:如何最有效的學習此課程,並找到「老師的話」 中的「更新影片」區塊即可看到課程更新內容囉!
☞ 課程更新的內容有哪些呢?
主要分為 2 個更新影片:
第一個為 2024 輔助學習影片,影片約莫 30 分鐘,分為三個部分:
- 第一部分:簡單介紹 Figma 近期新加入的功能
- 第二部分:講解主要功能 Auto Layout 的更新細節(可對照章節 3-1:掌握 Figma 神器: Auto layout)
- 第三部分:分享 Plug-in 和 Community 的操作方式(可對照章節 3-15:Figma 實用 Plugins 與 Community)
第二個為 Figma UI3 全新介面講解,影片約莫 40 分鐘,影片分為三個部分
- 第一部分:UI3 整體介面差異
- 第二部分:重點功能新舊對比
- 第三部分:核心功能示範 + AI 新功能快速展示
產品設計實戰:用 Figma 打造絕佳 UI/UX 產品體驗
你想要學習 UI/UX 設計嗎?想知道如何打造好看又好用的產品嗎?一起來學習使用 Figma 這個火紅全球的介面設計工具,並學習將 UX 設計思維帶入你的設計中,做出令人驚艷的設計作品吧!這門課程中,你將會掌握扎實的 UI 設計技巧與 UX 設計思維,並建立正確的設計觀念與學習心態。
並且,透過課程中的作業練習與專案實作,你將會累積理論與實務兼具的的設計經驗,加上課程結束後的持續練習,你將有機會成為軟硬實力兼具的產品 (UX/UI) 設計師,拿到進入業界的第一把鑰匙!
想要設計出一個好看又好用的產品,需要有成熟的 UX 設計思維以及靈活的 UI 設計方法來達成
身為一名產品 (UI/UX) 設計師,我們常常會需要去解決複雜且抽象的問題。要能夠將從使用者研究或數據中得到的洞察轉換成真實的設計解法,往往需要大量的設計經驗、對產品的知識、對使用者的理解才能達成。 而熟悉介面工具的使用以及 UX/UI 設計方法是幫助我們通往解決方法道路的第一步。
在數位產品設計的世界裡,常常是需要團隊合作的,我們需要清楚知道用什麼樣的介面設計模式來解決什麼樣的問題、如何有效的向團隊溝通你的解決方案,而這堂課程就是要帶你掌握產品 (UI/UX) 設計師所需要具備的軟硬知識!
Figma 是什麼呢?為什麼要選擇 Figma?它的優勢跟未來在哪裡?
Figma 是一個跨時代的 UI 設計的工具,特色是所有的設計檔案都會儲存在雲端,並且能夠用網頁瀏覽器讓多人即時協作、編輯同一份設計檔案。這解決了長期以來設計流程在溝通與檔案管理上面的一些缺陷,讓設計師可以更專注在用設計解決問題。 而這兩年 Figma 在 Sketch 之外也有擁有非常高的聲量,可以參考國外平台 2019 年對於 UI 設計工具的調查,Figma 已經在這兩年衝至整體第二名,未來也將會持續看漲,而因它基於瀏覽器並跨平台的特性,在 Window 上更是穩居第一名的寶座,相信不久後 Figma 將成為全球主流的介面設計工具。
關於 Figma 的特色與優勢
- 網頁瀏覽器就能用:所有的設計檔案都會即時儲存在雲端,完全不需要擔心有沒有存到檔案。這也代表就是不管在哪裡,只要能連上網路就能打開檔案,當然也就跨裝置與平台 (Mac/Window) 都能使用,甚至用 iPad 也能操作,不管你用什麼電腦通通沒問題,就像是設計界的 Google Docs 一樣!
- 即時協作與同步編輯:擁有線上即時多人協作的功能,讓設計的溝通交流與檔案分享變得超級簡單,再也不需要互傳檔案了!
- 雲端共享連結:每個設計檔案 (甚至小至畫板、元件) 都能產生共享連結,並且可以設定共享權限,要和團隊分享與討論設計毫不費力!
- 廣大的社群與插件生態系:Figma 擁有強大的線上社群與插件,讓你可以找到許多有用的輔助工具與設計資源 (也可以複製其他設計師的檔案來練習),加快自己的設計效率!
- 新手友善,免費就能用到飽:Figma 對新手很友善,免費方案就能體驗到飽!免費方案就能擁有 3 個專案加上一個協作者共同編輯,可以不需要花錢就充分探索這個軟體的主要功能。
- 國際大公司都在用:許多國際一流公司像是 Uber, Twitter, Airbnb, Google, Spotify, Dropbox 等等都已經因為 Figma 強大的協作功能而將主要設計工具轉換至 Figma,所以可以預見的是學會 Figma 將很有機會成為下一個 UI/UX 設計師需具備的標準能力。
- 前有未有的流暢設計流程:設計是一個需要不斷溝通討論、持續打磨細節的過程,Figma 將所有工作流程從設計、溝通、協作、原型、工程交付都整合在一個工具中,大大提升了設計師和團隊成員的工作效率。
- 對未來的超前部署:我們看到遠端工作的趨勢逐年提升,近年來越來越多公司開始開放遠端工作的機會,我們相信在未來遠端協作會變成一種主流,而 Figma 線上即時的協作優勢就會變成一個很棒的武器,學會它,也代表你可以更快融入主流公司工作流程中。
如果有上過我前一堂的同學就會知道,其實我以前是以使用 Sketch 為主,如果想知道為什麼我開始轉換到 Figma ,我也寫過一篇關於我為什麼從 Sketch 轉換到 Figma 的文章,歡迎參考看看!
這邊也分享一些 Figma 的相關的網站與文章給大家參考:
- Figma 官網
- Figma 官方部落格
- Figma — 異軍突起的設計協作神器
- Figma-初學者的入門心得
- A Sketch user’s perspective on switching to Figma
這門課程將著重在觀念與實務並進,總共規劃有 6 大章節、超過 70 個單元及預計 10 個小時以上的課程內容,幫助你完整吸收 UI/UX 產品設計師所需具備的知識與能力。
章節 1 | 產品設計的核心觀念:UX 設計思維與產品開發流程 (8個單元)
這個章節的重點會帶大家了解 UI/UX 設計的核心觀念、介紹常見的產品開發流程與 UI/UX 設計師的工作內容,也會介紹關於設計上需要了解的設計原則、設計模式以及常見的設計元件等等,幫助你之後在設計執行時能有一定的脈絡可循,不會陷入不知道如何開始設計的狀態。
最後則會帶大家熟悉 UX 設計會使用到的工具像是流程圖與線框圖,並建立起 UI 設計的基礎美感,之後也會透過課程中的實作練習工具與專案來慢慢補強這裡所提到的所有觀念。
⚡️ 單元 1-4:UI/UX 核心基礎觀念、產品開發流程、產品 (UI/UX) 設計師工作內容與流程
⚡️ 單元 5-7:設計原則與設計規範、設計系統與常見設計元件介紹、設計美感基礎
⚡️ 單元 8:UX 設計工具基礎:使用者故事、線框稿、流程圖與資訊架構
超過 200+ 頁以上的資訊簡報,讓你有效率地吸收複雜的知識!
章節 2 | Figma 快速上手:核心操作基礎 (10 個單元)

這個章節的重點會帶大家掌握 Figma 最核心的功能與操作技巧,以及熟悉最常用、最實用快捷鍵和繪圖方式,過程中也會分享許多人不知道的操作小技巧,讓你用有最有效率的方式做出好看、好懂、好維護的 UI 設計稿。 學完這個單元之後,你會對 Figma 這個工具的操作細節非常熟悉,會知道在什麼情境下應該用什麼方式來處理你的文字設定、圖層結構、樣式管理等等。也會介紹基本的檔案管理方式以及命名規則。
⚡️ 單元 1-3:Figma 環境建置與基本檔案管理觀念
⚡️ 單元 4-7:上手 Figma 所有核心工具,打好正確的製圖基礎觀念
⚡️ 單元 8:不可不知的響應式設計方法:內容定位 Constraint 介紹
⚡️ 單元 9:Figma 常用操作技巧、學會老手都會用來提高效率的各種快捷鍵
⚡️ 單元 10:控管設計版本與找回失去的檔案
章節 3 | Figma 進階技巧:打造可擴展的設計稿、精通常見 UI 元件設計 (15 個單元)
⚡️ 單元 1-3:Figma 進階操作:自動排版 (Auto Layout) 與元件 (Component) 介紹用法
⚡️ 單元 4:熟悉網格系統 (Grid System) 與排版技巧
⚡️ 單元 5:打造設計系統:建立產品基礎架構—顏色、空間、字體
⚡️ 單元 6-11:設計常用 UI 元件 - 按鈕、表單、列表、彈窗、導航、回饋通知等等
⚡️ 單元 12:設計練習作業 (1):透過臨摹好的作品來打磨設計細節
⚡️ 單元 13:設計練習作業 (2):用鋼筆工具畫一組自己的 icon 圖標
⚡️ 單元 14:交付設計稿:正確的輸出設計素材給工程團隊
⚡️ 單元 15:效率再加倍:Figma 超實用插件 (Plugins) 分享
章節 4 | 讓你的設計動起來:基礎與進階原型設計 (Prototyping) (10 個單元)
⚡️ 單元 1-3:Prototype 工具基本設定,包含頁面連結以及基本轉場介紹
⚡️ 單元 4-5:覆蓋層 Overlay 基礎與進階用法
⚡️ 單元 6:滾動 (Scrollable) 內容設定、固定選單與浮動按鈕
⚡️ 單元 7:在原型中加入 Gif 檔案讓你的設計更真實
⚡️ 單元 8-9:用 Smart Animation 製作令人驚豔的原型、分享原型設計上的各種小技巧
⚡️ 單元 10:分享原型:在行動裝置上瀏覽你的設計成果
章節 5 | 產品設計實戰:從 0 到 1 設計實際的產品 (App&Web) (10 個單元)

⚡️ 單元 1:iOS App:專案設定與設計系統說明
⚡️ 單元 2:iOS App:產品架構設計與規劃
⚡️ 單元 3-6: iOS App 介面設計 - 註冊與登入流程、課程列表與課程內容、課程發問與聊天室、個人設定頁面與原型製作
⚡️ 單元7:響應式網頁設計:頁面架構規劃(Wireframe)
⚡️ 單元 8-9: 響應式網頁設計:設計元件、與網站內容細節
⚡️ 單元 10:響應式網頁設計:調整設計適應各個尺寸
備註:此 Hahow iOS App 為課堂練習專案,非未來正式上線產品。
章節 6 | 準備進入業界:成為產品 (UI/UX) 設計師的最後一哩路 (6 個單元)
在最後一個章節中,我將會幫助你將課程中所學到的東西做一個總整理,並且以找到理想工作為目標來做準備。這個章節所要帶給大家的內容都是我從過去求職、面試、團隊合作所累積的經驗與心法,從累積相關作品開始、培養設計敏銳度、學習如何呈現作品、到準備作品集與面試,以及學習能幫助自己長期成長的方法。
我希望在你上完整個課程之後,不僅僅是學會了工具,做出好看的介面而已,而是真正的去思考你的設計在解決什麼問題,如何透過你的設計為產品帶來好的影響。最後能透過正確的方式不斷練習讓自己成長,找到屬於自己的理想 UI/UX 設計工作。
⚡️ 單元 1:我該如何累積 UI/UX 設計作品?
⚡️ 單元 2:要如何訓練自己的設計敏銳度與設計思維?
⚡️ 單元 3:要如何更好的展示自己的設計作品?
⚡️ 單元 4:該如何準備 UI/UX 作品集?設計師作品集案例分析
⚡️ 單元 5:如何找到一份適合自己的工作?如何開始海外求職?
⚡️ 單元 6:長期職涯發展:持續自我成長的方法,如何成為資深設計師?
課程內容搶先看!
這裡也提供一些課程試看的單元,可以讓同學更了解實際的授課狀況來判斷是否符合需求。(內容在正式上線前可能會做調整/修改)


