這門課程將用系統化的方式,從觀念到實作幫助你掌握 UI/UX 設計師所需具備的軟硬技能,也會透過實際案例練習讓你累積作品,並且開設學習交流群組,讓你問到飽、學到會為止!
Figma 是一個專注在介面(UI)設計的工具,特色是設計檔案都儲存在雲端,並且用網頁瀏覽器就能實現多人即時協作、共同編輯同一個設計檔案,這解決了長期以來設計流程在溝通與檔案管理上面的痛點,讓設計師可以更專注在用設計解決問題。
從設計到原型全部包辦
讓你專注在解決問題
支援雲端即時多人協作
團隊溝通超順暢!
免費方案就能用到爽
跨平台 Mac/Windows 都可用
產品設計從來都不只是設計師一個人的事,要成就一個好的產品體驗往往需要團隊大量的溝通與合作,而 Figma 讓設計協作這件時變得更流暢與美好,只要一個連結就能開始討論設計、分享檔案也更容易,就是像設計界的 Google 文件般輕巧!
還有許多團隊協作的例子不勝枚舉,只要分享 Figma 連結,就能到達指定設計頁面,團隊溝通毫不費力!
只要你能連上網路、打開瀏覽器,無論你在哪裡、用誰的電腦,都能馬上開始你的設計工作。
Figma 已經將所有設計檔案儲存在雲端隨開隨用,並且使用上的效能調校的非常好,處理複雜的圖層與檔案都不是問題!
透過 Figma 的協作功能讓團隊成員都能參與設計流程,大大的提升設計效率與品質。目前在國外也是非常熱門的介面設計工具,許多大公司的設計團隊皆已正式採用 Figma 為主力設計工具,現在正是時候跟上國際設計工具趨勢!
Slack
Microsoft
Dropbox
Zoom
Uber
在繼續了解課程內容前,我想與你分享
購課後可無限重複觀看,讓你看到飽、學到會為止
預計超過 10 小時的課程,打通你的產品設計任督二脈
扎實的 UI 設計能力以及 UX/產品設計思維
這門課程基本上適合所有對 UI/UX 設計有興趣的人!
你對 UI/UX 設計完全沒經驗,但對這塊領域充滿好奇與熱情,並且未來想轉職成為 UI/UX 設計師。
你對 UI/UX 設計有基本的認識,想要更進一步學習產品設計概念與精進設計工具的操作技巧,並追尋更好的職涯發展。
你是視覺設計師或 UI 設計師,想要更了解在設計上所要注意的細節與設計脈絡,並掌握最新的工具趨勢。
你是 UX 設計師,想要更精進 UI 設計能力與美感,讓產出的設計細節更完整,幫助你和 UI / 視覺設計師的溝通更順暢。
你是使用者研究員、工程師、產品經理,或是團隊任何角色,想要更進一步了解產品設計思維與細節,以及加強與設計師的合作關係。
這堂課程將著重在觀念與實務並進,從介紹產品設計的核心觀念、設計流程與設計師的工作內容、了解設計原則與設計模式等。也會帶著大家全面掌握 Figma 的操作技巧,來規劃美觀且有邏輯的介面 。同時也會有實際的產品案例解析與作業練習來了解設計背後的脈絡。課程的目標是讓上完課的同學能透過課程所學,做出自己的設計作品,並找到理想的 UI/UX 設計工作。
6
大章節
60+
個單元
15+
個小時
章節 1
產品設計的核心觀念:UX 設計思維與產品開發流程
8 個單元
💡 這個章節的重點會帶大家了解 UI/UX 設計的核心觀念、介紹常見的產品開發流程與 UI/UX 設計師的工作內容,也會介紹關於設計上需要了解的設計原則、設計模式以及常見的設計元件等等,幫助你之後在設計執行時能有一定的脈絡可循,不會陷入不知道如何開始設計的狀態。最後則會帶大家熟悉 UX 設計會使用到的工具像是流程圖與線框圖,並建立起 UI 設計的基礎美感,之後也會透過課程中的實作練習工具與專案來慢慢補強這裡所提到的所有觀念。
單元 1
UI/UX 設計簡介與核心觀念
單元 2
熟悉常見的產品開發流程
單元 3
產品(UI/UX)設計師需要具備的能力
單元 4
產品(UI/UX)設計師的設計流程與內容
單元 5
熟悉設計原則與設計模式
單元 6
了解設計系統與常見 UI 元件
單元 7
UI 設計基礎:視覺設計與美感
單元 8
UX 設計基礎:資訊架構、線框稿、使用者流程圖
章節 2
Figma 快速上手:核心操作基礎
12 個單元
💡 這個章節的重點會帶大家掌握 Figma 最核心的功能與操作技巧,以及熟悉最常用、最實用快捷鍵和繪圖方式,過程中也會分享許多人不知道的操作小技巧,讓你用有最有效率的方式做出好看、好懂、好維護的 UI 設計稿。
學完這個單元之後,你會對 Figma 這個工具的操作細節非常熟悉,會知道在什麼情境下應該用什麼方式來處理你的文字設定、圖層結構、樣式管理等等。也會介紹基本的檔案管理方式以及命名規則。
單元 1
課程概覽:開始第一個 Figma 專案
單元 2
熟悉 Figma 工作區域與畫板
單元 3
了解框架(Frame)與群組的差別與用法
單元 4
了解形狀、布林群組與鋼筆工具
單元 5
掌握文字的各種設定與操作技巧
單元 6
快速置入圖片、調整與編輯屬性
單元 7
管理顏色樣式與套用各種效果
單元 8
不可不知的響應式設計:Constraint 介紹
單元 9
成為 Figma 專家:掌握常見操作技巧與快捷鍵
單元 10
學習控管設計版本與找回失去的檔案
單元 11
不可不知的響應式設計:內容定位 Constraint 介紹
單元 12
淺談控管設計版本與找回失去的檔案
章節 3
Figma 進階技巧:打造可擴展的設計、設計常見 UI 元件
15 個單元
💡 這個章節的會延伸上個章節所學到的基本操作,並介紹更多進階的設計技巧像是自動排版(Auto Layout)、元件(Component)設計與格線系統(Grid System)等等。我也會帶大家實際練習製作常見的 UI 元件,並從中學習這些元件的設計原理、特性與使用方法與時機。
這個章節會也有 2 個實作練習作業,首先帶大家了解如何透過臨摹一個好的 UI 作品作品,來提升自己的設計技巧與美感,以及用 Figma 的鋼筆工具設計一組屬於自己的圖標(icon)。最後會教大家如何交付設計稿、正確輸出你的設計素材給工程團隊來開發以及介紹一些好用的 Figma 插件幫助你提高設計效率。
單元 1
掌握 Figma 神器:Auto Layout
單元 2
讓設計更一致與整潔:熟悉元件Component
單元 3
元件進階技巧:變體 Variants
單元 4
掌握網格系統 Grid System
單元 5
打造設計系統:建立產品核心樣式
單元 6
設計常用 UI 元件: 按鈕
單元 7
設計常用 UI 元件:表單
單元 8
設計常見 UI 元件:回饋通知
單元 9
設計常見 UI 元件:列表
單元 10
設計常見 UI 元件:彈跳視窗
單元 11
設計常見 UI 元件:導航選單
單元 12
設計練習:臨摹優秀作品來打磨設計細節 (作業練習)
單元 13
設計練習:創造自己 icon 系統 (作業練習)
單元 14
交付設計(Handoff):如何與工程師合作
單元 15
Figma 實用 Plugins 與 Community 介紹
章節 4
讓你的設計動起來:基礎與進階原型設計(Prototyping)
11 個單元
💡 這個章節將會教大家如何把靜態的設計稿轉換成可互動的原型,讓你更好的展示你的設計想法。除了基本的設定之外,也會詳細解釋所有的觸發事件、轉場效果以及許多原型設計上的進階用法像是 Overlay 、Smart Animation 、插入 Gif 檔案等等。
我也會帶大家了解如何去分享、預覽自己的原型,甚至可以在自己的手機上操作 Figma 的原型,以及如何同步更新設計到原型上。
單元 1
Prototype 工具基本設定
單元 2
基本觸發事件(Event)與頁面連結設定
單元 3
常見動畫轉場效果介紹
單元 4
遮罩 Overlay 基礎與進階用法
單元 5
替換元件(Swap)與搭配 Overlay 用法
單元 6
用 Smart Animation 製作令人驚豔的原型
單元 7
滾動(Scrollable)內容設定、固定選單與浮動按鈕
單元 8
在原型中加入 Gif 檔案讓你的設計更真實
單元 9
利用 Component 來快速建立頁面流程
單元 10
預覽與分享你的原型:讓使用者可以立即看到設計改動
單元 11
Figma Mirror:在手機上預覽你的設計與原型
章節 5
產品設計實戰:從 0 到 1 設計實際的產品 (App&Web)
10 個單元
💡 掌握了 Figma 的核心基礎和進階技巧,是時候開始真正將所學到的知識與技術投入到產品設計中。這個章節我會帶大家執行兩個專案,一個是 iOS App 的設計,從規劃到設計交付,含完整的功能與流程,最後做出一個可以 Demo 的原型。
另一個專案將會是 RWD 響應式網頁的設計,包含桌面版與手機版。這兩個專案都會提到不同的設計方法與與設計模式,在針對不同的平台上做設計應該要注意什麼樣的細節,同時也會帶大家一起建立起產品的基礎設計規範方便之後的設計上的調整與修改,完成所有設計之後,也會教大家如何交付設計稿與註釋給工程團隊接手。
單元 1
iOS App:專案設定與設計系統說明
單元 2
iOS App:產品架構設計與規劃
單元 3
iOS App:註冊與登入流程
單元 4
iOS App:課程列表與課程內容
單元 5
iOS App:課程發問與聊天室
單元 6
iOS App:個人設定頁面與原型製作
單元 7
響應式網頁設計:頁面架構規劃(Wireframe)
單元 8
響應式網頁設計:設計元件、與網站內容細節 Part 1
單元 9
響應式網頁設計:設計元件、與網站內容細節 Part 2
單元 10
響應式網頁設計:調整設計適應各個尺寸
章節 6
準備進入業界:成為產品(UI/UX)設計師的最後一哩路
6 個單元
💡 在最後一個章節中,我將會幫助你將課程中所學到的東西做一個總整理,並且以找到理想工作為目標來做準備。這個章節所要帶給大家的內容都是我從過去求職、面試、團隊合作所累積的經驗與心法,從累積相關作品開始、培養設計敏銳度、學習如何呈現作品、到準備作品集與面試,以及學習能幫助自己長期成長的方法。
我希望在你上完整個課程之後,不僅僅是學會了工具,做出好看的介面而已,而是真正的去思考你的設計在解決什麼問題,如何透過你的設計為產品帶來好的影響。最後能透過正確的方式不斷練習讓自己成長,找到屬於自己的理想 UI/UX 設計工作。
單元 1
如何累積 UI/UX 設計作品?
單元 2
如何訓練自己的設計敏銳度與設計思維?
單元 3
該如何準備 UI/UX 設計作品集?
單元 4
設計師要如何更好的展示自己的設計作品?作品集案例分析
單元 5
如何評估與找到適合自己的工作?
單元 6
長期職涯發展:持續自我成長的方法,如何成為資深設計師?
為了讓同學可以在購買課程之前,更了解實際上課的內容與我的教學風格,因此這裡也提供幾個課程單元的試看內容,希望可以透過真實的課堂影片,讓你對課程成果有比較清楚的期待。(備註:試看單元在課程正式上線前有修改調整的可能)
UX/產品設計師
5 年以上業界經驗
線上課程講師
AAPD 創辦人
Medium 人氣作者
目前旅居東京中
目前在東京的跨國企業擔任 UX 設計師,也是產品(UI/UX)設計內容網站 AAPD 的創辦人。目前有 5 年產品設計經驗,過去曾經歷新創公司、自由接案和自組團隊開發產品,因此熟悉不同團隊的設計流程。我熱愛分享與教學、希望透過分享知識的分享幫助設計師們成長。
Medium 人氣作者 | 超過 5k 追蹤者
我從 2017 開始在 Medium 上寫作分享設計經驗與工作心得,之後也成立了 AAPD 讓更多設計作者有機會分享自己的知識,讓更多高品質的內容可以被看見。
UI 設計入門課程 | 1000+人購課 & 4.8 星評價
我在 2016 年在 Hahow 開設了一堂 UI 設計入門課程,累積至今已經超過千人購課,許多上過課程的學生在後來也成功轉職為 UI/UX 設計師。
在海內外超過 10 場設計社群分享
這幾年我也積極參與設計相關的設計活動,並擔任講者分享自己的設計歷程與工作實戰經驗,累積參與人數超過千人。(分享簡報)
你可以用以下方式找到我:
我了解學習 UI/UX 設計是一趟漫長的旅程,為了讓學員不只是單打獨鬥的上完課程而已,我將會開設學員專屬 Slack 頻道與 Facebook 社團,讓老師與同學可以即時討論與交流,互相討論並解決你學習上的疑難雜症。未來也計劃舉辦學員限定的線上講座,透過 AMA 的方式來回答大家的各種問題(工具技巧、職涯、面試、作品集等)。
※ Slack 交流群組僅限購課學生參與,加入連結將於課程公告發布
Yuxl
2020.12.31
這是這幾年上,講解設計工具操作最仔細的課程, Simon 大大的準備內容就有如產品規格書一樣仔細和清楚, 讓我原本對 Figma 有一些卡在一些操作邏輯上的問題,獲得很清楚的答案, 自己單看官方文件,對於 Figma 特色功能 Auto layout,看得一知半解, 但是 Simon 的課程講的非常清楚,設定Auto layout時,也清楚先後順序, 應在用工作上建立Design system上很方便! 課程中不只是講述 Figma 的工具操作,還包含設計流程和知識庫的建立方法, 這一部分也非常實用。 還有對於初接觸UI/UX的朋友,在課程中也講了如何入門的知識,且購買課程後,還有 Slack 群組,Simon會親自詳細解答所有問題。 這課程必須說是自己買到覺得CP值最高的課程,大推!~
李承勳
2020.12.31
課程內容非常豐富,講義上還有連結可以延伸閱讀,而且不用載PDF閱讀也很方便,講義很精美。 課程難易度適中、由淺入深,可以滿足初學者以及進階技巧的人。 老師講解清晰,抑揚頓挫以及背景音樂讓人上課時可以持續專注,影片的片頭動畫以及內容等也做得非常細緻。 每節課程時間長度拿捏也適中,不管是通勤還是長時間在電腦前上課都很方便。 整體上課體驗非常好,也感受得到老師很用心的準備,是非常有誠意而且超值的課程!
UX三刀流
2021.01.03
從事 UX 工作,常常需要用 Wireframe 和客戶討論設計方案,看了 Medium 上的很多介紹文章,一直想要投入學習。自己上網看教學文,缺少了系統化的架構。 感謝 Simon 老師這門課,用非常清楚的課程安排、以及操作的講解、案例實作。一步一步帶著了解 Figma。Simon 老師對課程的要求很高,軟體改版他也製作了新的影片,讓人很有信任感,我會很希望可以跟著 Simon 老師一起學習這門課。
3drens
2021.01.04
推薦原因 | 1. 影片講解用心且仔細: Simon老師講解得非常詳細,身為一個已經在職場上工作的UI/UX,覺得不但可以幫助公司,更可以提升自我實力。透過一個已經在職場尚有經驗的老師帶領之下,補足了許多介面相關的知識。 2. Figma教材免費提供給我們: 除了課程影片之外,Simon老師還提供免費的教材讓我們學習,讓我們的學習更完整有效率。 3. Slack社團可以後續跟老師討論: 在老師創建的Slack社團裡,可以和很多設計師們交流,也可以詢問老師有關於更多UI/UX相關的問題,老師都會耐心且仔細回答,非常超值。
Ting-En Wei
2021.01.05
本身是設計系畢業,PS 和 AI 都頗熟練,也簡短碰過 Sketch,因此有些課程會覺得會過於簡單,但 Simon 的完全不會,第一、二章適合完全沒有基礎的同學,而已經有設計經驗的人也可以當作熟悉 Figma 介面,第三章開始就是 Figma 比起其他軟體更強大的地方,尤其是 Auto Layout 還有 Variants 真的是非常的好用。而這堂課不僅只是軟體技術的學習,也包含很多UIUX產業實際會遇到的問題、流程...等等,Simon也有很系統化的把相關知識告訴大家,同時也補充了很多文章、連結,而上課講義是可以直接複製到自己的Figma隨時可以看的,如果好奇老師整理圖層、或是各式元件的作法,也可以透過Figma直接開啟老師的實作檔案,從中也可以學到很多。
而加入課程Slack,Simon也會很耐心的回覆大家,很多人都踴躍地發問,包含平常工作中會於到的實際狀況也會提出分享交流。
最後,最最重要的,我自己覺得看課程只是一個開始,搭配作業的實際練習,才是真的能學到東西的關鍵。
Q: 上完課程就一定能找到 UI/UX 相關設計工作嗎?
A: 這堂課程並不能保證你一定會找到工作,但可以確定的是,如果有跟著課程的進度,並完成作業的繳交,你已經具備「找工作」的能力,但會需要你投入更多時間累積自己的作品來將自己的能力呈現得更好,課程中也會教你該如何準備作品集、培養正確的觀念與學習的方法。
Q: Figma 會很難嗎?完全沒設計基礎可以學得會嗎?
A: 完全不難!Figma 相比其他設計軟體已經簡單許多,只要掌握其中技巧也可以做出讓人驚艷的設計與原型。課程中也會盡可能把所有操作細節與背後的邏輯解釋得很清楚,讓你一步步掌握工具並做出有業界水準的作品。
Q: 現在學習 Figma 在未來有潛力嗎?
A: 正如前面提到的,Fimga 在這兩年的快速崛起,讓許多大企業的設計團隊都紛紛投入 Figma 的懷抱,相信我們每天日常工作就已經使用許多雲端文件與檔案存放,而Figma 雲端的特性讓設計流程變得更透明與流暢,我已經看到許多台灣企業導入 Figma 作為主力設計工具,我相信 Figma 會是下一個世代的主流設計軟體,所以在現在這個時候學起來絕對是能幫助自己提升更多競爭力。
Q: 比起實體課程,線上課程會不會缺乏跟老師和同學的互動?
A: 也許會。但線上課程最大的好處是空間彈性、時間自由,你可以選擇最舒適的方式學習。但同樣的你需要有更多的自制力來督促自己學習。
由於線上課程的特性,課程提供的將會是最精煉的內容,讓你用最有效率的方式吸收知識。課程後續也會透過線上直播、討論社團的交流的活動等,讓參與的同學可以保持交流管道的暢通,我也會盡可能的在作業上給予最實質的反饋,讓你能持續修改、進步。
Q: 目前的公司是使用 Sketch 或 Adobe XD 怎麼辦?
A: 這是個好問題。公司採用不同的工具可能有其當初的考量,但不代表現狀不能被改變,我建議其實可以慢慢跟團隊討論、並試著推動使用 Figma。因為就許多層面來看, Figma 能為團隊帶來的價值利大於弊,目前台灣也越來越多公司採用 Figma ,這也是最好的證明,相信不久後也會成為業界主流工具。
而介面設計工具操作上都大同小異,如果熟悉其他介面設計工具 ,要轉換到 Figma 也非常容易,許多操作概念上都是相通的。
課程準備期間我也會不定時分享 UI/UX 產品設計相關新知以及課程相關公告,如果不想錯過最新消息,歡迎訂閱電子報!
💡 如果對以上課程內容有任何疑問或建議,歡迎隨時來信與我聯絡 linsimon.design@gmail.com