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 或 Adobe XD 等其他設計軟體切換到 Figma 的人。
入門
- 取得 Figma – 註冊流程
- 瀏覽器中的 Figma 與 Figma 應用程式
- Figma 檔案瀏覽器 – Figma 的首頁
- 在 Figma 中建立設計檔
Figma 基礎
- 將框架添加到我們的檔案中
- 一些方便的快捷方式
- 設計檔案概述
- 新增形狀和顏色
- 尺寸選單 – 操縱形狀和框架
- 對齊、整理和測量
- 新增和處理文字
- 嵌套框架 – Figma 的超能力
- 框架( Frames ) vs 群組( Groups )
- 使用嵌套框架( nested frames )進行設計
- 可重複使用的有樣式的網格( grids )
- Figma 社群與外掛
- 新增影像( images )
- Figma 繪圖
- Figma 中的縮放
- 選修課程專案第 1 部分:建立線框( wireframe )與設計
組件介紹
- 透過組件和實例重複使用元素
- 覆蓋實例
- 哪些內容應該覆蓋,哪些內容不應該覆蓋
- 恢復組件和覆蓋( overrides )
- 嵌套組件
- 具有變體的組件集
- 將元件移到自己的頁面
- 保持組件井井有條
- 進階組件功能介紹
- 選修課程專案第 2 部分:將我們的設計轉變為基於組件的設計
變數和樣式
- 變數介紹
- 使用顏色變數
- 使用變數集合和群組進行組織
- 尺寸和間距變數
- 那麼樣式又如何呢?
- 版式和樣式
- 記錄變數和樣式
- 可選課程專案第 3 部分:為我們的應用程式新增變數和樣式
響應式設計
- 什麼是自動佈局?
- 新增自動佈局
- 自動佈局元件和變數
- 調整設定大小
- 自動或之間有空格
- 與系統嵌套自動佈局
- 絕對定位
- 自動佈局頁面
- Figma 中的約束
- 約束和網格
- 我應該使用哪種尺寸的框架?
- 可選課程專案第 4 部分:使我們的應用程式具有響應能力
基本原型製作
- Figma 中的原型設計
- 設定滾動( scroll )行為
- 連接螢幕
- 帶有覆蓋層的下拉式選單
- 動畫類型
- 互動組件
- Figma Mirror – 在你的裝置上預覽
- 選修課程專案第 5 部分:透過原型製作讓我們的設計充滿活力
與其他設計師和開發人員分享
- 分享和邀請他人
- 設定縮圖
- Figma 中的共享團隊庫
- 設定共享團隊庫
- 連接到共享團隊庫
- 更新共享團隊庫
- 共享設計、元件、樣式和變數
- 開發模式:與開發部分享
利用 Figma 增強您在 UI 設計、使用者介面、使用者體驗設計、UX 設計和網頁設計方面的前景,幫助你獲得在 Figma 中進行 UX/UI 設計的工作
這是moonlearning的原創課程
目標受眾
- 完全初學者!
- 從其他設計軟體切換到 Figma(例如 Sketch 或 Adobe 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 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- UX/UI 相關線上課程
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
- 從 Soft & Share 各種社團頻道挑選你喜歡的加入
發表迴響