Figma 自動佈局、約束和斷點：響應式設定、測試和設計文件、最小/最大寬度、換行
從這 2 小時的課程，你會學到
- 自動佈局
- 約束條件( constraints )
- 使用斷點測試響應式元件
- 記錄響應式元件和頁面
- 絕對定位
- 修復縱橫比
- 自動調整佈局大小
- 如何找到正確的斷點並將其轉換為 Figma
- 媒體查詢如何在 CSS 中運作
- 斷點外掛
- 注意：我們不會處理響應式網頁編碼！
- Figma 工作材料檔案，包含大量練習
- 造訪 Moonlearning 學生檔案庫
要求
- 我們從 0 開始進行響應式設計，但你應該具備基本的 Figma 知識
- 你需要存取（免費）Figma 帳戶
課程說明
深入探討：Figma 自動佈局、限制、斷點和模式（1.5 小時） 新的！完整配置 2024 更新採用全新 Figma UI 設計！
自動佈局讓你抓狂嗎？害怕你的設計在瀏覽器中會發生什麼事？那麼這門課就適合你！我們將學習有關如何在 Figma 中設定響應式設計的所有內容。
這將是對自動佈局、約束的真正深入探討，以及最重要但很少討論的如何處理 UI 設計的斷點，範圍從簡單的設定到帶有變數和模式的更高級方法。
理解和組合這些工具將幫助您設定與程式碼設定一致的元件、設計模式和整個頁面。
藉助 Figma 課程材料文件，您可以與我一起工作，或者在您自己的時間返回帶有詳細說明的練習。
如果你具備 Figma 的基本知識，或者你是 Figma 的高級用戶並想提高自己的技能，那麼本課程非常適合您。
自動佈局深入研究
- 什麼是自動佈局？
- 設定自動佈局框架
- 自動佈局選單
- 自動設定
- 進階自動佈局選單
- 調整設定大小
- 垂直調整大小技巧
- 忽略自動佈局
- 自動佈局元件和變數
- 設定最小值和最大值
- 自動佈局換行
- 固定縱橫比影像（駭客）
- 了解嵌套：親子關係
- 建議自動佈局
- 表格的一些魔力：自動佈局和人工智慧
- 更進階的設定（範例）
- 自動佈局頁面
- 自動佈局和 CSS flexbox
- 具有自動佈局的插槽組件
約束( constraints )：
- Figma 中的約束是什麼？
- 約束和網格
- Figma 網格快速介紹
斷點和模式( Breakpoints & Modes )：
- 引入 CSS 斷點
- Figma 中的斷點
- 模式和螢幕尺寸：快速介紹
- 將變體綁定到模式
- 使用布林值隱藏和顯示
- 具有模式的響應式排版
目標受眾
- 我們從 0 開始進行響應式設計，但你應該具備基本的 Figma 知識
- 想要提升技能的高階 UI 設計師
- 平面設計師跨界 UX/UI
- 任何想學習一些好東西的人！
- 想要了解如何設定響應式 UI 元件以改善與設計對話的開發人員（請注意，這是 UI 設計課程，而不是程式設計課程！）
講師簡介
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 相關線上課程
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣！
- 從 Soft & Share 各種社團頻道挑選你喜歡的加入
發表迴響