Figma Learn

關於 Figma Learn

Figma Learn 的課程、教學與專案分類頁，將官方學習內容依技能與工作任務整理成系列。頁面列出初學者課程、元件、設計系統、網站製作、動態設計及外掛開發等主題，讓使用者從入門操作逐步接觸可重複使用的元件與團隊流程。

各系列提供概覽與分章入口，例如元件系列包含巢狀實例、按鈕建立與屬性基礎，設計系統系列則從定義、建立延伸到文件與管理。除了閱讀課程，也可進入實作專案或影片教學，依目前要完成的設計工作選擇教材。這個入口適合用來安排學習順序，並查找官方提供的練習內容。

功能特色

主要功能

• 初學者課程：提供建立帳號、認識檔案瀏覽器與建立第一份設計檔案等入門章節。
• 元件學習系列：整理元件基礎、巢狀實例、按鈕元件與元件屬性的教材入口。
• 設計系統課程：從定義與建立系統，延伸到系統文件撰寫與管理方式。
• 動態設計基礎：收錄動態用途、時間、順序與緩動等分章學習內容。
• 網站與實作專案：提供網站斷點與預覽等教材，以及可重複使用清單元件的實作入口。
• 人工智慧工作流系列：整理 Figma agent 入門、探索方向、減少重複工作與取得回饋等官方教材。
• 模型工具協定系列：介紹 Figma MCP 伺服器、遠端設定、外掛建立及從程式碼回到設計畫布的學習內容。
• 外掛開發課程：涵蓋外掛介面、環境設定、建立外掛與發布到社群的分章入口。
• 專家影片教學：可依工具與功能選擇影片教學，搭配完整課程或短篇實作專案學習。

使用情境

• 剛開始使用 Figma 的設計者，依初學者課程熟悉帳號、檔案與基本設計工作環境。
• 團隊準備建立設計系統時，搭配元件系列與設計系統課程整理元件、文件及管理方法。

相似工具

• Adobe Color — 學習網站
• Adobe Learn — After Effects — 學習網站
• Apple Human Interface Guidelines — 學習網站
• Baymard Institute UX Knowledge Hub — 學習網站
• BP&O — 學習網站
• Brand New — 學習網站
• Butterick’s Practical Typography — 學習網站
• Color（Method of Action） — 學習網站
• DesignSystems.com — 學習網站
• Fonts In Use — 學習網站
• GoodUI — 學習網站
• Google Fonts Knowledge — 學習網站

加入創作邦會員

收藏實用內容、下載免費模板，訂閱電子報。

精選工具

• Comet — Comet 是 Perplexity 的 AI 瀏覽器，整合搜尋與助理功能，可協助閱讀、比較網頁內容、準備郵件草稿與整理學習計畫。
• Lovable — Lovable 可透過對話介面建立軟體產品，協助把想法製作為網頁應用程式。
• Pexels — Pexels 是照片與影片素材資源平臺。
• DOTOWN — DOTOWN 提供像素插畫下載，官方標示可商用，可用於圖示、文件與其他創作。

新工具

• justfont blog — 分享中文字體基礎、字型排版應用與字體設計入門的繁中文章及教案。
• LottieFiles Tips and Tutorials — LottieFiles 官方教學文章，分享設計系統、狀態機、介面動畫與 Lottie 流程。
• Adobe Learn — After Effects — Adobe 官方 After Effects 教學，涵蓋文字動畫、視覺效果與動態模糊。
• Pentagram Work — Pentagram 官方作品集，分享品牌識別、策略、包裝與動態等專案案例。