使用 Figma 進行動態設計：動畫、動態圖形、UX/UI

Contents

學會 Figma 像專業人士！使用頂級設計師使用的現代實踐+構建專案來學習行動和網路上的運動設計！

從這 12.5 小時的課程，你會學到

像專業人士一樣使用 Figma，並在用戶界面設計、用戶體驗設計 (UX/UI)、網頁設計或行動應用程式設計方面找到工作
學習使用 Figma 構建動態設計原型並將動畫和動態圖形添加到您的專案中
在課程結束時定制並專業完成令人驚嘆的設計作品集（我們為您提供！）
構建這些專案：1. Photo Inspiration App, 2. Nat Geo Carousel,… 5. Smart Home Mobile App, 6. Home Reno Web Landing Page and Form + 更多！
學習在 Figma 中使用 Smart Animate
學習使用行業最新趨勢的 UI/UX 最佳實踐
了解運動設計的原理、運動設計過程、最佳實踐以及為您的客戶和客戶製作專案原型

要求

沒有要求。我們從頭開始教你，向你展示一切！從零到精通
我們使用 Figma，這是一個免費的基於網路的應用程式。這意味著世界上任何擁有電腦的人都可以學習本課程(Mac/Linux/Windows)

課程說明

剛剛推出了所有現代運動設計原則和 2022 年的最佳實踐！這是一門基於專案的課程，我們將一起通過構建許多設計專案來學習，增進您的作品集組合！加入由超過 600,000 名學生組成的實時線上社區，以及由在矽谷和多倫多為頂級公司實際工作過的行業專家教授的課程。 Andrei 課程的畢業生現在在谷歌、特斯拉、亞馬遜、蘋果、IBM、摩根大通、Facebook 等頂級科技公司工作。

本課程使用動態設計以及用戶界面和用戶體驗設計 (UI/UX) 中的最新最佳實踐，重點是有效地教您如何為您未來的所有 Web 和行動應用程式專案構建互動、動畫和動態圖形。我們將使用 Figma 來實現這一點，它現在是現代設計師使用的第一大工具，正在取代過去所有過時的設計工具。

我們將為您提供本課程中的所有 Figma 檔案、高級設計模板和資產，以便您在與所有未來客戶合作時保留和使用它們！我們向您保證，這是關於運動設計、微互動、動畫和創建精美 UX/UI 的最全面的線上資源！

當我們引導您從頭到尾作為運動設計師工作時，課程將非常實用……

課程涵蓋的主題有：

為什麼運動很重要？ – 了解運動如何在構建可用產品中發揮重要作用，以及它如何幫助創建敘事和強化心智模型。

運動設計的常見誤解
運動有助於創造可用性
敘事和心理模型

Figma 簡介 – 了解 Figma 的不同部分以及入門所需的內容。我們深入研究重要細節，讓您啟動並運行，因此不會造成混淆。

Figma 入門
介紹 Figma
Figma 儀表板
Figma 工具
圖層和頁面
頂欄
設計屬性
使用 Figma 進行原型設計
練習：創建響應式佈局

智能動畫簡介 – Figma 的智能動畫改變了遊戲規則。您將學習如何修改它支持的所有不同屬性，然後在我們構建和解釋一些簡單原型時使用這些知識。

規模
位置
不透明度
迴轉
充滿
練習：創建一個簡單的互動
練習：動畫導航項
練習：創建更大的原型

專案：引發照片靈感的應用程式 – 我們將隆重開始課程！您將進入您的第一個專案，在該專案中您可以利用給定的資源和您之前學到的知識將您自己的引發照片靈感的行動應用程式原型鏈接在一起。

設計資產
通過類別過濾
螢幕轉換和拖移互動
簡單的微互動

運動設計原則 – 您還將學習運動設計的原則以及使它們成為任何設計成功不可或缺的因素。

介紹
緩和
偏移和延遲
孕育引導
轉型
價值變化
遮罩
覆蓋
克隆
隱藏
視差
維度
變位放大縮小( dolly )和變焦放大縮小( zoom )

在 Figma 中創建運動 – 將您學到的理論和實踐知識直接跳回 Figma 以構建一些較小的原型。使用給定的設計資源，您可以跟隨或觀看 Daniel 如何解釋如何創建各種互動。

練習：導航轉換（導航設計）
練習：導航轉換（心）
練習：導航轉換（購物車）
練習：導航轉換（主頁）
練習：滾動（登陸頁面）
練習：滾動（錨鏈接）
練習：滾動（視差）
練習：分頁（簡單的輪播點）
練習：分頁（輪播動畫）
練習：拖動（列表卡）
練習：拖動（圖像拖動）
練習：拖動（拖動內容）
練習：拖動（拖放）
練習：微互動（檔案上傳器第 1 部分）
練習：微交互（檔案上傳器第 2 部分）
練習：微交互（暫停和播放）
練習：微交互（Like 按鈕）
練習：微交互（如動畫）
練習：喜悅（成功模式）
練習：喜悅（五彩紙屑流行音樂）
練習：喜悅（清單第 1 部分）
練習：喜悅（檢查清單第 2 部分）
練習：喜悅（購物車按鈕第 1 部分）
練習：喜悅（購物車按鈕第 2 部分）

運動設計過程 – 運動設計如何融入“正常設計過程”？別擔心，我們為您提供保障。 Daniel 將解釋他確定滿足用戶需求的正確運動解決方案的過程。

發現與研究第 1 部分
發現與研究第 2 部分
設計和故事板
原型
測試
有用的提示

專案：國家地理輪播 – 了解如何在 Figma 中創建簡單和復雜版本的輪播效果。

SimpleLanding 頁面輪播
複雜視差和 3D 圖像效果

微交互——深入挖掘為什麼微互動如此重要。然後，您將直接進入 Figma，使用 Figmotion 插件與 Daniel 創建您自己的動畫。

什麼是微互動？
為什麼微交動很重要
Figmotion：第 1 部分
Figmotion：第 2 部分

專案：智能家居行動應用 – 智能家居應用正變得越來越流行。了解如何設計一個簡單的主屏幕，然後使用 Figma 對其進行動畫處理。跟隨 Daniel 解釋他如何創建複雜的溫度調節交互。

設計行動主螢幕
創建切換互動
溫度調節相互作用

反饋 – 了解為您的設計提供便利和收集建設性反饋的正確方法。

為什麼反饋很重要？
建設性的反饋意見

專案：家居裝修登陸頁面 – 曾經想設計一個帶有動畫元素的大型登陸頁面？不用擔心，跟隨 Daniel 的腳步，他將帶您完成將登錄頁面分解為多個原型的過程。

設計登陸頁面
為著陸頁製作原型
視差效果：第 1 部分
輪播
視差效果：第 2 部分
畫廊

專案：家庭裝修的裝修表格 – 人們在表格下經常健忘，但運用動作來幫助您的用戶完成一項一項非常重要的任務是其中關鍵。 Daniel 將教您如何將一些微妙的動畫應用到您的表單中做互動，這將幫助您創建更多好用的產品。

表單元素中的運動
表格進度
動畫表單內容
輸入和按鈕：第 1 部分
輸入和按鈕：第 2 部分
輸入和按鈕：第 3 部分
輸入和按鈕：第 4 部分
工具提示
輪播輸入

專案：送餐行動應用程式 – 學習如何使用遮罩技術創建一些華麗的互動效果，然後跟隨 Daniel 解釋如何創建複雜的訂單進度原型。

介紹
使用視差來吸引註意力
列出轉換
替代疊加
遮罩和疊加
微互動和浮動操作按鈕
訂單進度：第 1 部分
訂單進度：第 2 部分

展示你的原型——你擁有所有這些原型，但你如何在你的作品集中展示它們？我們將向您介紹如何記錄您的原型並將其輸出為您喜歡的格式的多個 Mac 和 Windows 選項。

Mac 上的 Kap
如何使用 Kap
在 Figma 中使用你的 Kap GIF
Chrome 和 Windows 的螢幕顯示
如何使用篩選
在 Figma 中使用 Screenity GIF

我們將教您一些技能，讓您可以為您的時間收取大量費用。不要在一些隨機的自由職業者網站上為每小時幾美元而競爭。我們的目標是為您提供頂級設計師的技能，並且在此過程中，我們將設計多種產品和專案，您將能夠將它們添加到您的作品集組合中。

課程內見！

目標受眾

任何對 Motion Design 感興趣並想了解更多關於 Figma 的強大功能以及您可以使用這個驚人的工具創造什麼的人
任何想以自由職業者的身份開始 Web 或行動設計業務或在公司擔任設計師的人
Web 開發人員和行動開發人員希望在他們的工具帶中添加另一項有價值的技能
任何想被聘為網頁設計師、行動設計師、UI/UX 設計師的人
任何想了解最新運動設計實踐以構建現代和漂亮應用程式的人

講師簡介

Andrei Neagoie zerotomastery.io 創始人 / 高級軟體開發人員 ( 更多講師主講課程介紹 )

Andrei 是一些線上評價最高的程式設計和技術課程的講師，並且是 ZTM 學院的創始人。

他的畢業生已經進入世界上一些最大的科技公司工作，比如蘋果、谷歌、摩根大通、 IBM 等等。 . 多年來，他一直在矽谷和多倫多擔任高階軟體開發人員，現在正在利用他所學到的一切，來教授程式設計技能，並幫助你發現作為一名開發人員在生活中所能提供的驚人的就業機會。

作為一個自學的程式設計師，他知道有大量的線上課程、教程和書籍過於冗長，不足以教授正確的技能。大多數人在學習一個複雜的主題時會感到麻痺，不知道從哪裡開始，或者更糟糕的是，大多數人沒有20,000美元用於程式設計訓練營。 程式設計技能學習應該是所有人可以負擔的起，並且對所有人開放。教材應該教授現代生活技能，不應該浪費學生寶貴的時間。 Andrei 從為財富500強企業、科技創業公司工作中學到了重要的經驗，甚至開創了自己的事業，他現在 100% 地投入時間教授其他人有價值的軟體開發技能，以便掌控他們的生活，在一個充滿無限可能性且激動人心的行業中工作。

Andrei 向你保證，沒有其它課程有這麼全面和詳細的解釋。他認為，為了學習任何有價值的東西，你需要從基礎開始，發展樹的根本。只有從那裡你才能學到與基礎相關的概念和具體技能(葉子)。當以這種方式建立時，學習將會呈現指數級的成長。

以他的教育心理學和程式設計經驗，Andrei 的課程將帶你瞭解複雜的主題，你從來沒有想過是可能的。

課程中見！

Daniel Schifano 產品設計總監 @ Up&Up

Daniel 是技術領域的設計領導者，在幫助新創公司構建和迭代產品方面擁有豐富的經驗。 Daniel 熱衷於教授和賦予設計師權力，並與其他學科合作以構建滿足用戶和商業目標的有目的的產品。

他的設計方法總是深思熟慮和迭代。 Daniel 經常發現自己與他的團隊合作，無論是草擬概念和流程，還是與團隊主管和外部利益相關者一起領導設計策略。

Daniel 是一位多面手的設計師，他的專長跨越多個設計學科。這包括用戶體驗和視覺設計、用戶研究、產品策略、精益和敏捷設計方法等等。他的工作幫助為住房、區塊鍊和健康等各種行業製定了不同的解決方案。

當他不建構產品時，Daniel 在不同的聚會和活動中發言和指導。他的目標是回饋他所學習並繼續從中學到很多東西的設計社區。 Daniel 的目標是在他們的職業生涯中始終幫助、教授和支持其他設計師。

Zero To Mastery 學習市場需求的技術－讓自己獲得僱用

無論您是剛剛開始學習還是想要提升自己的技能，從零到精通都會教您 React、JavaScript、Python、CSS 和其他更多熱門技能，幫助您獲得錄用、提升您的職業生涯並取得成功世界各地的公司。

按照您的日程安排學習。我們的綜合課程 24/7 提供 600 多個小時（而且還在增加！）的課程。您將學習從初學者程式設計基礎到最先進概念的所有內容。

建立你的投資組合。與大多數線上課程和免費教程不同，您將使用所學的一切來構建複雜、專業、真實的專案和您自己的專業作品集。