dramaling-vocab-learning/docs/02_design/design-links/FIGMA_LINKS.md

# 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](../component-library/pages/login-page.html) | |
| 儀表板 | [Figma](#) | ✅ 完成 | [HTML](../component-library/pages/dashboard.html) | |
| 學習頁面 | [Figma](#) | ✅ 完成 | [HTML](../component-library/pages/learning-page.html) | |
| 詞彙學習 | [Figma](#) | 🔄 進行中 | - | 預計9/20完成 |
| 口說練習 | [Figma](#) | 📋 規劃中 | - | |
| 情境對話 | [Figma](#) | 📋 規劃中 | - | |
| 成就系統 | [Figma](#) | 📋 規劃中 | - | |
| 商店頁面 | [Figma](#) | 📋 規劃中 | - | |

### 移動端設計
| 頁面名稱 | 連結 | 狀態 | 備註 |
|---------|------|------|------|
| iOS 設計稿 | [Figma](#) | 📋 規劃中 | |
| Android 設計稿 | [Figma](#) | 📋 規劃中 | |
| 響應式斷點 | [Figma](#) | ✅ 完成 | |

### 原型和流程
| 名稱 | 連結 | 類型 | 備註 |
|------|------|------|------|
| 用戶流程圖 | [Figma](#) | Flow | |
| 互動原型 | [Figma](#) | Prototype | |
| 線框圖 | [Figma](#) | Wireframe | |

## 🔗 快速連結

### 常用頁面
- 🎯 [最新設計系統](#)
- 📚 [元件庫](#)
- 🎨 [色彩系統](#)
- 📝 [字體規範](#)
- 📐 [間距系統](#)

### 開發者資源
- 💻 [HTML/CSS 元件庫](../component-library/index.html)
- 📖 [設計規範文檔](../design-system/README.md)
- 🛠️ [開發者交接文件](#)

## 📝 使用指南

### 查看設計稿
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-*](../component-library/index.html#buttons) | ✅ | |
| Input Field | [input-field](../component-library/index.html#inputs) | ✅ | |
| Card | [card-*](../component-library/index.html#cards) | ✅ | |
| Modal | [modal-*](../component-library/components/01-interactive/modals.html) | ✅ | |
| Navigation | [navbar, sidebar](../component-library/components/05-navigation/navigation.html) | ✅ | |
| Form Elements | [forms](../component-library/components/02-input/forms.html) | ✅ | |
| Data Display | [table, list](../component-library/components/03-display/data-display.html) | ✅ | |
| Gamification | [achievements, levels](../component-library/components/06-gamification/game-elements.html) | ✅ | |

## 🚀 工作流程

### 設計到開發流程
```mermaid
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**: 填充真實數據

### 開發工具
- [設計系統同步工具](../design-system/automation/design-sync.sh)
- [元件驗證工具](../design-system/automation/component-validator.js)
- [HTML/CSS 元件庫](../component-library/index.html)

---

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