jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-vocab-learning/docs/02_design/design-links/FIGMA_LINKS.md

5.2 KiB
Raw Blame History

Figma 設計稿連結管理

📋 概述

本文件集中管理所有 Figma 設計稿連結，確保團隊成員能快速找到最新的設計資源。

注意: Drama Ling 主要使用 HTML/CSS 元件庫作為設計系統，Figma 用於高階概念設計和協作討論。

🎨 設計檔案結構

主設計系統

檔案名稱 連結 最後更新 負責人 狀態
Drama Ling Design System Figma Link 2025-09-15 設計團隊 🟢 最新
Component Library Figma Link 2025-09-15 設計團隊 🟢 最新
Design Tokens Figma Link 2025-09-15 設計團隊 🟢 最新

Web 端設計

頁面名稱 連結 狀態 HTML原型 備註
登入/註冊 Figma ✅ 完成 HTML
儀表板 Figma ✅ 完成 HTML
學習頁面 Figma ✅ 完成 HTML
詞彙學習 Figma 🔄 進行中 - 預計9/20完成
口說練習 Figma 📋 規劃中 -
情境對話 Figma 📋 規劃中 -
成就系統 Figma 📋 規劃中 -
商店頁面 Figma 📋 規劃中 -

移動端設計

頁面名稱 連結 狀態 備註
iOS 設計稿 Figma 📋 規劃中
Android 設計稿 Figma 📋 規劃中
響應式斷點 Figma ✅ 完成

原型和流程

名稱 連結 類型 備註
用戶流程圖 Figma Flow
互動原型 Figma Prototype
線框圖 Figma Wireframe

🔗 快速連結

常用頁面

開發者資源

📝 使用指南

查看設計稿

  1. 點擊上方表格中的 Figma 連結
  2. 使用公司帳號登入 Figma
  3. 查看最新版本（檢查右上角版本標記）

導出資源

  1. 在 Figma 中選擇需要的元素
  2. 右側面板選擇 "Export"
  3. 選擇格式：
    • 圖標: SVG
    • 圖片: PNG 2x
    • 插圖: SVG 或 PNG

提供反饋

  1. 在 Figma 中使用評論功能
  2. 標記 @設計師名稱
  3. 描述具體問題或建議

🔄 版本管理

命名規範

[項目名稱]_[版本]_[日期]
範例: DramaLing_Dashboard_v2.1_20250915

版本標記

  • 🟢 最新: 生產環境使用
  • 🟡 審核中: 等待確認
  • 🔴 過時: 僅供參考

👥 團隊協作

設計師職責

  • 維護 Figma 設計稿
  • 更新此文件連結
  • 導出設計資源
  • 與開發團隊溝通

開發者職責

  • 實現 HTML/CSS 元件
  • 提供技術反饋
  • 更新實現狀態
  • 維護元件庫

產品經理職責

  • 審核設計方案
  • 確認用戶流程
  • 管理設計優先級
  • 協調資源

📊 設計系統映射

Figma 元件 HTML/CSS 元件 狀態 備註
Button btn-* ✅
Input Field input-field ✅
Card card-* ✅
Modal modal-* ✅
Navigation navbar, sidebar ✅
Form Elements forms ✅
Data Display table, list ✅
Gamification achievements, levels ✅

🚀 工作流程

設計到開發流程

graph LR
    A[Figma 設計] --> B[設計審核]
    B --> C[導出資源]
    C --> D[HTML/CSS 實現]
    D --> E[元件庫更新]
    E --> F[開發使用]

設計更新流程

  1. 設計師 更新 Figma 設計稿
  2. 設計師 更新此文件連結和狀態
  3. 開發者 查看變更並評估影響
  4. 開發者 更新 HTML/CSS 元件
  5. QA 驗證實現符合設計

📅 更新記錄

2025-09-15

  • 建立 Figma 連結管理系統
  • 整合 HTML/CSS 元件庫映射
  • 添加團隊協作指南

待更新項目

  • 補充實際 Figma 連結
  • 添加設計審核流程
  • 建立自動同步機制

🔧 工具和插件

推薦 Figma 插件

  • Figma Tokens: 管理設計代幣
  • Able: 無障礙性檢查
  • Figma to HTML: 代碼導出輔助
  • Content Reel: 填充真實數據

開發工具

維護者: Drama Ling 設計團隊 最後更新: 2025-09-15 聯絡方式: design@dramaling.com