Figma 原型設計:UX/UI 設計師的深入研究

初級到高級:Figma 中的基本原型、* 新變數! *、智慧動畫、互動元件、文檔

從這 3 小時的課程,你會學到

  • 設定基本的可點擊原型以進行展示和測試
  • 使用 Figma 進行智慧動畫
  • 互動元件
  • 記錄和分享 Figma 原型
  • 很多提示和技巧和隱藏的寶藏

要求

  • Figma基礎知識
  • 免費 Figma 帳戶

課程說明

透過 Figma 原型設計讓你的設計充滿活力。 在本次深入研究中,我們將學習有關創建基本原型、Figma 中的智慧動畫可重複使用的互動元件、與變數表達式條件語句的令人驚嘆的互動以及如何共享記錄的所有內容。

我們將從基礎知識開始,學習如何連接螢幕、添加不同的滾動( scrolling )行為預覽我們的設計,以及展示原型的一些提示和技巧。

我們將探索不同的觸發器動畫類型以及如何藉助 Figma 部分創建有狀態的設計。

我們將繼續在 Figma 中對神奇部件原型進行智慧動畫處理。 我將向你展示所有智慧動畫的超能力,我們還將討論它們的局限性並進行一些故障排除。

然後我們將學習如何使用 Figma 中的互動元件來設定微互動。 當你在設計中為實例添加標準行為時,這將為你節省大量時間。 這也是 Figma 釋放其真正令人印象深刻的潛力的地方,即在結合自動佈局智慧動畫互動式元件時。

最後,我將向你展示記錄和共享原型以進行移交的提示和技巧,並且我們將了解 Figma 中的互動式元件文件以及外部設計系統

我將提供一個 Figma 檔案,讓你可以在觀看影片時跟隨我,或者讓你依自己的時程返回觀看詳細說明的練習。

如果你具有 Figma 的基本知識,或者你是 Figma 的高級用戶並希望提高原型設計技能,那麼本課程適合你。

原型製作基礎知識

  1. 自 Config 2023 更新以來的新增內容
  2. Figma 原型工作區
  3. 我的原型該放在哪裡?
  4. 螢幕裝置預覽
  5. 固定和可滾動元素(新 Figma 4 月 23 日發布!)
  6. 固定標題(新 Figma 4 月 23 日發布!)
  7. 簡報的嵌套框架
  8. 水平和垂直滾動( scroll )
  9. 連結螢幕
  10. 背部動作
  11. 捲動到( Scroll to )
  12. 疊加層( Overlays )
  13. 連結到外部頁面
  14. 動作觸發器
  15. Figma 動畫選項
  16. 緩動和彈簧動畫
  17. 部分和狀態設計
  18. Figma 中的流程
  19. 將影片加入原型
  20. 在手機上預覽

使用 Figma 進行智慧動畫

  1. Figma 中的智慧動畫
  2. 智慧動畫和移動動畫
  3. 智慧動畫的局限性
  4. 讓我們建立一個智慧動畫應用程式
  5. 請記住:製作動畫時要牢記目的和程式碼

互動元件

  1. 互動組件
  2. 嵌套互動組件
  3. 簡單的懸停和縮放動畫
  4. 視訊互動
  5. 互動式元件和自動佈局
  6. 漏斗組件

使用變數進行原型設計

  1. 使用變數進行原型設計✨
  2. 與變數的變體交換✨
  3. 表達式✨
  4. 互動鏈✨
  5. 條件語句✨
  6. 條件語句和布林值( booleans )✨

記錄和分享 Figma 原型

  1. 用流程記錄原型
  2. 共享原型鏈接
  3. 記錄互動組件以進行切換
  4. 嵌入外部文檔

目標受眾

如果你具有 Figma 的基本知識,或者你是 Figma 的進階用戶並希望提高原型設計技能,那麼本課程適合你。

講師簡介

Christine moonlearning moonlearning

大家好,我是 moonlearning 的創始人 Christine Vallaure,moonlearning 是一個 UX/UI 設計 + Figma 學習中心。

moonlearning 是我的寵物專家,它已經變成了一份全職工作,對此我感到非常高興。 我喜歡談論、教授和撰寫關於 UX/UI 設計和 Figma 的文章,總是鼓勵 UI 設計師和開發人員對彼此的工作保持好奇。

除了視訊教程,我還提供現場和線上研討會,並在會議和聚會上發言。 在 Twitter、LinkedIn、YouTube 上和通過我的時事通訊與我聯繫,這樣我可以讓你了解未來月球學習冒險的最新資訊。

你會在 Udemy 上找到我最初的一些 moonlearning 課程的一小部分。 內容被縮短並調整為 Udemy 格式。 享受!

字幕:英文

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

  • Udemy 永久擁有課程 NT310 起特價中(點擊連結看更多)
  • 年訂閱每月 NT350( 限時優惠價NT245/月) 🌈 悠遊 Udemy 的 26000+ 門課,最大化學習 ( 原價 NT635/月 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Sponsored by Udemy


也許你會有興趣

不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

由 WordPress.com 建置.

Up ↑

探索更多來自 Soft & Share 的內容

立即訂閱即可持續閱讀,還能取得所有封存文章。

Continue reading