基本概念

本課程將使用Figma開發雛型，Figjam是Figma開發的線上數位白板，我們會利用Figjam畫相關的圖

https://drive.google.com/file/d/14Ob4KtBvLmPu2TJ4lSDkF1FSIKoMbewb/view?usp=drive_web

• 請先申請教育帳號，使用教育帳號可以免費升級到Professional
• 先申請一個帳號
  • 利用學校電子郵件信箱驗證學生身分
  • 設定team
  • 新增檔案 (在draft裡)
  • FIGMA註冊與基本認識 / 基本功能介紹 (使用者介面設計講義)
• 團隊
  • 一個團隊可以有多個專案
  • 在專案下可以有多個檔案
• FIGMA註冊與基本認識 / 基本功能介紹 (使用者介面設計講義)
  • Explore design files
  • Access design tools from the toolbar
  • View layers and pages in the left sidebar
  • Design, prototype, and explore layer properties in the right sidebar
  • Frame
    • Frames in Figma
  • Layer / 圖層
    • Shape tools
    • Vector networks (Pen)
    • Sketch on the canvas with the pencil tool
• Section
  • Figma Section
    • Organize your canvas with sections
• Wireframe
  • Wireframe Designer
  • WireGen - AI GPT wireframe generation (最近好像有問題，無法產生wireframe)

練習1

• 申請教育帳號 、新增團隊 (Team)
  • 新增 Frame
  • 每位同學利用WireGen產生一個頁面

元件

• Component / 元件
  • FIGMA小教室｜提升設計效率！不可不知的神功能COMPONENT
  • Guide to Components in Figma
  • 【Day16】Figma篇 : Components
• Best practices: components, styles, and shared libraries
  • 元件是可重複使用的物件，複製貼上元件時，預設從元件產生實例(Instance)，原始元件被更動時，所有的實例會跟著變動
    • Guide to components in Figma
    • When to start creating components for design systems
    • Component best practices
    • FIGMA小教室｜提升設計效率！不可不知的神功能COMPONENT
    • 【Day16】Figma篇 : Components
  • 樣式是可重複利用的屬性組合 (如:顏色、文字大小)，當樣式被更動時，所有套用的樣式會跟著更動
    • Styles in Figma
    • Styles and style tips
    • Manage and share styles
  • 元件庫、樣式庫 (Library)
    • 將檔案轉成Library之後，就可以在多個檔案間共用元件及樣式
    • Guide to libraries in Figma
    • Organizing and creating libraries

https://drive.google.com/file/d/1R5RIi7q9oyKlimeraXZ0GeAl_vznFytD/view?usp=drive_web

Variant

Variant原本只是方便管理不同樣式的元件，現在可以用在互動元件

• Figma Variants 的架構與用法 / Creating and organizing Variants
• Create and use variants