這門課程將用系統化的方式,從觀念到實作幫助你掌握 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 的創辦人。目前有 7 年產品設計經驗,過去曾經歷新創公司、自由接案和自組團隊開發產品,因此熟悉不同團隊的設計流程。我熱愛分享與教學、希望透過分享知識的分享幫助設計師們成長。
Medium 人氣作者 | 超過 6k 追蹤者
我從 2017 開始在 Medium 上寫作分享設計經驗與工作心得,之後也成立了 AAPD 讓更多設計作者有機會分享自己的知識,讓更多高品質的內容可以被看見。
UI 設計入門課程 | 1000+人購課 & 4.8 星評價
我在 2016 年在 Hahow 開設了一堂 UI 設計入門課程,累積至今已經超過千人購課,許多上過課程的學生在後來也成功轉職為 UI/UX 設計師。
在海內外超過 10 場設計社群分享
這幾年我也積極參與設計相關的設計活動,並擔任講者分享自己的設計歷程與工作實戰經驗,累積參與人數超過千人。(分享簡報)
你可以用以下方式找到我:
我了解學習 UI/UX 設計是一趟漫長的旅程,為了讓學員不只是單打獨鬥的上完課程而已,我將會開設學員專屬 Slack 頻道與 Facebook 社團,讓老師與同學可以即時討論與交流,互相討論並解決你學習上的疑難雜症。未來也計劃舉辦學員限定的線上講座,透過 AMA 的方式來回答大家的各種問題(工具技巧、職涯、面試、作品集等)。
※ Slack 交流群組僅限購課學生參與,加入連結將於課程公告發布
來自超過 300+ 參與課程學員的真實回饋
謝謝 Simon 提供一個這麼完整關於這個領域的內容,對於轉職的我來說,非常有脈絡的去了解、認識,進而規劃自己的自學計畫。 對我來說最受用的是觀念上的學習,觀念上的學習資源過於龐大,學習的過程無法有計畫性的歸納,所以這門課程真心推薦超過五顆心~
大推!!謝謝 Simon 老師開設了這堂好課程,在有系統的教學方式下,很快速地就掌握到了UI設計和使用Figma的訣竅,課程音質清晰,畫面精煉,不廢話,滿滿乾貨,而且課堂外還可以在社群中提問討論,幫助很大!
課程架構規劃精細且完整,教學方式親民及易上手,過程中帶出許多實務上的眉角及提供許多輔助資源,收穫豐富。教案內容設計脈絡清晰,且講師以自然與專業的口條進行授課,整體課程品質超讚!用心程度滿滿的一門課!
不僅 Figma 軟體本身,前後章節特別針對 UI 與 UX 做分析拆解相當有趣, 循序漸進的 Figma 課程設計,初次看或遇到問題時回頭看都很實用, 喜歡老師講話的步調節奏,不拖泥帶水,讓人不會想打瞌睡 XD,常常聽的意猶未竟章節就結束了(咦), 推薦!
「 Simon 大大的準備內容就有如產品規格書一樣仔細和清楚, 讓我原本對 Figma 有一些卡在一些操作邏輯上的問題,獲得很清楚的答案」 「課程中不只是講述 Figma 的工具操作,還包含設計流程和知識庫的建立方法, 這一部分也非常實用。 」
課程內容很豐富實用,章節跟單元安排得很好,老師講解很詳細。對Figma這個軟件的特點跟操作解說得尤為仔細,中間也安排了蠻多作業讓我們練習,令我漸漸熟悉Figma的操作~老師讓我知道了Figma的特點跟優點,相信之後Figma也會成為我的主要UI/Prototype工具。也謝謝老師在不同單元的分享,在學會Figma之外,還得到了一些啟發。看完全部單元後,真的覺得這個課程沒買錯,很值得!
這是這幾年上,講解設計工具操作最仔細的課程, Simon 大大的準備內容就有如產品規格書一樣仔細和清楚, 讓我原本對 Figma 有一些卡在一些操作邏輯上的問題,獲得很清楚的答案, 自己單看官方文件,對於 Figma 特色功能 Auto layout,看得一知半解, 但是 Simon 的課程講的非常清楚,設定Auto layout時,也清楚先後順序, 應在用工作上建立Design system上很方便!
「課程內容非常豐富,講義上還有連結可以延伸閱讀,而且不用載PDF閱讀也很方便,講義很精美。」 「老師講解清晰,課程難易度適中、由淺入深,可以滿足初學者以及進階技巧的人。 」 「整體上課體驗非常好,也感受得到老師很用心的準備,是非常有誠意而且超值的課程!」
本身是設計系畢業,PS AI都頗熟練,也簡短碰過Sketch,因此有些課程會覺得會過於簡單,但Simon的完全不會, 第一二章適合完全沒有基礎的同學,而已經有設計經驗的人也可以當作熟悉FImga介面,第三章開始就是Figma比起其他軟體更強大的地方,尤其是Auto Layout還有Variants真的是非常的好用。而這堂課不僅只是軟體技術的學習,也包含很多UIUX產業實際會遇到的問題、流程...等等。
Q: 這門課程要花多久的時間才能上完呢?
這門課程目前規劃的影片總時數為 15 小時左右,如果每天投入約 1-2 小時的時間學習,加上課後的作業的練習與產出作品,大約 2 個月的左右時間應該能夠完整掌握工具以及做出自己的延伸作品。不過如果目標是要面試找工作,會需要額外花至少 1-2 個月來作出更完整個設計案例和作品集。
Q:上完這個課程就能找到 UI/UX 設計相關工作嗎?
A: 這堂課程並不能保證你一定會找到工作,但可以確定的是,如果有跟著課程的進度,並完成作業的繳交,相信你已經具備「找工作」的能力,但會需要你投入更多時間累積自己的作品來將自己的能力呈現得更好,課程中也會教你該如何準備作品集、培養正確的觀念與學習的方法。
Q:現在學習 Figma 是對的選擇嗎?是否是產業趨勢?
A: 正如前面提到的,Fimga 在這兩年的快速崛起,讓許多大企業的設計團隊都紛紛投入 Figma 的懷抱,相信我們每天日常工作就已經使用許多雲端文件與檔案存放,而Figma 雲端的特性讓設計流程變得更透明與流暢,我已經看到許多台灣企業導入 Figma 作為主力設計工具,我相信 Figma 會是下一個世代的主流設計軟體,所以在現在這個時候學起來絕對是能幫助自己提升更多競爭力。
Q: Figma 會很難嗎?完全沒設計基礎可以學得會嗎?
A: 完全不難!Figma 相比其他設計軟體已經簡單許多,只要掌握其中技巧也可以做出讓人驚艷的設計與原型。課程中也會盡可能把所有操作細節與背後的邏輯解釋得很清楚,讓你一步步掌握工具並做出有業界水準的作品。
Q: 比起實體課程,線上課程會不會缺乏跟老師和同學的互動?
A: 也許會。但線上課程最大的好處是空間彈性、時間自由,你可以選擇最舒適的方式學習。但同樣的你需要有更多的自制力來督促自己學習。 由於線上課程的特性,課程提供的將會是最精煉的內容,讓你用最有效率的方式吸收知識。課程後續也會透過線上直播、討論社團的交流的活動等,讓參與的同學可以保持交流管道的暢通,我也會盡可能的在作業上給予最實質的反饋,讓你能持續修改、進步。
Q: 目前的公司是使用 Sketch 或 Adobe XD 怎麼辦?
A: 這是個好問題。公司採用不同的工具可能有其當初的考量,但不代表現狀不能被改變,我建議其實可以慢慢跟團隊討論、並試著推動使用 Figma。因為就許多層面來看, Figma 能為團隊帶來的價值利大於弊,目前台灣也越來越多公司採用 Figma ,這也是最好的證明,相信不久後也會成為業界主流工具。 而介面設計工具操作上都大同小異,如果熟悉其他介面設計工具 ,要轉換到 Figma 也非常容易,許多操作概念上都是相通的。
我會不定時分享 UI/UX 產品設計相關新知以及課程相關公告,如果不想錯過最新消息,歡迎訂閱電子報!
💡 如果對以上課程內容有任何疑問或建議,歡迎隨時來信與我聯絡 linsimon.design@gmail.com