掌握 Figma:入門級到專業級

4 小時課程 + 專案,用簡潔明了的方式教你 Figma。

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

  • 設定你自己的免費 Figma 帳戶!
  • 使用 Figma 設定 UI 設計
  • 使用 Figma 設定完整的使用者介面設計
  • 與其他設計師和開發人員分享你的作品
  • 讓你的設計在示範模式中大放異彩
  • 使用 Figma 進行基本原型設計
  • 使用元件建立可重複使用元素
  • 具有變體的高級組件集
  • 了解變數( variables )和樣式( styles )
  • 隨時了解最新版本
  • 與開發人員分享並記錄你的設計
  • 建立共享團隊庫
  • 為顏色、排版和間距創建簡單的樣式指南( style guides )
  • 為按鈕和懸停創建簡單的微互動
  • 以團隊的方式合作
  • Freebees 立即在你的設計中使用
  • Figma 練習檔,以便你可以跟著我一起做

要求

  • 個人電腦或筆記型電腦

課程說明

Figma 入門 + 可選課程專案和 Figma 檔案

Figma UX/UI 設計初學者課程

本課程全面介紹 Figma,從 Figma 的絕對初學者到高級功能。 簡短且確中要裡,給你解決任何設計所需的所有知識。

我們將從頭開始設定你的 Figma 帳戶並熟悉其檔案結構。 然後,我們將深入了解 Figma 的基礎知識,例如設定框架並嵌套它們,添加形狀、文字、顏色和網格,以及創建可靠的 UI 設計。 一旦你熟悉了基礎知識,我們就會深入研究更進階的主題,例如建立可靠的 UI 設計和使用可重複使用元素的元件。

我們將添加樣式和變數以保持一致性,使用自動佈局創建響應式設計,並添加基本原型以使我們的設計充滿活力,始終牢記與開發的協作。

透過逐步練習以及寶貴的提示和技巧,您將在 4 小時內精通 Figma。 它非常適合初學者或從 Sketch 或 Adob​​e XD 等其他設計軟體切換到 Figma 的人。

入門

  1. 取得 Figma – 註冊流程
  2. 瀏覽器中的 Figma 與 Figma 應用程式
  3. Figma 檔案瀏覽器 – Figma 的首頁
  4. 在 Figma 中建立設計檔

Figma 基礎

  1. 將框架添加到我們的檔案中
  2. 一些方便的快捷方式
  3. 設計檔案概述
  4. 新增形狀和顏色
  5. 尺寸選單 – 操縱形狀和框架
  6. 對齊、整理和測量
  7. 新增和處理文字
  8. 嵌套框架 – Figma 的超能力
  9. 框架( Frames ) vs 群組( Groups )
  10. 使用嵌套框架( nested frames )進行設計
  11. 可重複使用的有樣式的網格( grids )
  12. Figma 社群與外掛
  13. 新增影像( images )
  14. Figma 繪圖
  15. Figma 中的縮放
  16. 選修課程專案第 1 部分:建立線框(  wireframe )與設計

組件介紹

  1. 透過組件和實例重複使用元素
  2. 覆蓋實例
  3. 哪些內容應該覆蓋,哪些內容不應該覆蓋
  4. 恢復組件和覆蓋( overrides )
  5. 嵌套組件
  6. 具有變體的組件集
  7. 將元件移到自己的頁面
  8. 保持組件井井有條
  9. 進階組件功能介紹
  10. 選修課程專案第 2 部分:將我們的設計轉變為基於組件的設計

變數和樣式

  1. 變數介紹
  2. 使用顏色變數
  3. 使用變數集合和群組進行組織
  4. 尺寸和間距變數
  5. 那麼樣式又如何呢?
  6. 版式和樣式
  7. 記錄變數和樣式
  8. 可選課程專案第 3 部分:為我們的應用程式新增變數和樣式

響應式設計

  1. 什麼是自動佈局?
  2. 新增自動佈局
  3. 自動佈局元件和變數
  4. 調整設定大小
  5. 自動或之間有空格
  6. 與系統嵌套自動佈局
  7. 絕對定位
  8. 自動佈局頁面
  9. Figma 中的約束
  10. 約束和網格
  11. 我應該使用哪種尺寸的框架?
  12. 可選課程專案第 4 部分:使我們的應用程式具有響應能力

基本原型製作

  1. Figma 中的原型設計
  2. 設定滾動( scroll  )行為
  3. 連接螢幕
  4. 帶有覆蓋層的下拉式選單
  5. 動畫類型
  6. 互動組件
  7. Figma Mirror – 在你的裝置上預覽
  8. 選修課程專案第 5 部分:透過原型製作讓我們的設計充滿活力

與其他設計師和開發人員分享

  1. 分享和邀請他人
  2. 設定縮圖
  3. Figma 中的共享團隊庫
  4. 設定共享團隊庫
  5. 連接到共享團隊庫
  6. 更新共享團隊庫
  7. 共享設計、元件、樣式和變數
  8. 開發模式:與開發部分享

利用 Figma 增強您在 UI 設計、使用者介面、使用者體驗設計、UX 設計和網頁設計方面的前景,幫助你獲得在 Figma 中進行 UX/UI 設計的工作

這是moonlearning的原創課程

目標受眾

  • 完全初學者!
  • 從其他設計軟體切換到 Figma(例如 Sketch 或 Adob​​e XD)

講師簡介

Christine moonlearning moonlearning

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

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

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

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

英文字幕:有

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

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

報名參加課程

Sponsored by Udemy


也許你會有興趣

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

發表迴響

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

由 WordPress.com 建置.

Up ↑

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

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

Continue reading