在 Figma 中建立設計系統後，如何與前端開發無縫對接，是設計與工程最常遇到的落差點之一。這時候「Design Token 設計代碼命名策略」就變得非常關鍵，它能讓 Figma 中的色彩、字型、間距等樣式，直接對應到程式碼中變數名稱，達到真正的設計－代碼同步。
🧠 Design Token 是什麼？
🎯 Design Token 是一組以命名方式儲存的樣式值，代表設計系統中「可重複用的設計決策」。
它們可以轉成 CSS 變數、SCSS、JSON、TypeScript、iOS/Android 樣式值等。
🔧 1. Design Token 對應範例
| 類型 | Figma 中命名 | 對應開發命名 |
|---|---|---|
| 顏色 | Color / Primary / 500 | color-primary-500 or --color-primary-500 |
| 字體 | Text / Heading / H1 | font-heading-h1 or --font-heading-h1 |
| 間距 | Spacing / SM | spacing-sm or --spacing-sm |
| Radius | Radius / Small | radius-sm |
| 陰影 | Shadow / Card | shadow-card |
✅ 開發常見格式有：CSS 變數、SCSS map、JSON Token、iOS Swift、Android XML。
📁 2. 建議命名規則與語法對應表
📘 設計命名策略（Design → Dev）
| 屬性類型 | 命名結構 | 範例 |
|---|---|---|
| 色彩 | color-[category]-[shade] | color-primary-500 |
| 字型大小 | font-size-[scale] | font-size-h1 |
| 行高 | line-height-[scale] | line-height-body |
| 間距 | spacing-[size] | spacing-md |
| 邊角 | radius-[size] | radius-lg |
| 陰影 | shadow-[level] | shadow-md |
| 邊框 | border-[side]-[width] | border-top-1 |
🚀 3. 工具推薦：如何從 Figma 匯出 Design Token？
| 工具 | 功能說明 |
|---|---|
| Figma Tokens Plugin | 🔥 最強大，支援同步樣式、變體屬性、主題（light/dark） |
| Design Tokens by Figma | 官方試驗工具，可導出樣式為 JSON |
| Style Dictionary | 將 Figma token 匯出後，轉成 SCSS / iOS / Android 格式 |
| Tokens Studio | 支援版本控制、多主題、Team 對接 |
✅ 推薦工作流程：
- 在 Figma 設好命名規則
- 使用 Tokens Studio 匯出為 JSON
- 由前端導入 Style Dictionary → 自動轉成程式碼變數
🧱 4. Design Token 實作對應（以 SCSS / CSS / JS 為例）
🎨 色彩對應
:root {
--color-primary-500: #0052CC;
--color-gray-100: #F5F5F5;
}
🧾 字體
:root {
--font-heading-h1-size: 32px;
--font-heading-h1-weight: 700;
}
📦 間距與邊角
:root {
--spacing-md: 16px;
--radius-sm: 4px;
}
✅ 元件使用範例
.button {
background-color: var(--color-primary-500);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-sm);
font-size: var(--font-heading-h1-size);
}
✍️ 5. 建議命名策略指南（統一好維護）
| 屬性 | 建議命名格式（統一命名） |
|---|---|
| 色彩 | color-[用途]-[強度] |
| 字體 | font-[用途] or text-[用途] |
| 間距 | spacing-[尺寸] |
| 邊角 | radius-[size] |
| 陰影 | shadow-[用途或層級] |
| 主題 | `theme-[light |
例如：
color-primary-500
text-body
spacing-md
radius-md
theme-dark-color-primary-500
🧪 6. 建議測試流程（設計端 → 開發端）
- 設計在 Figma 中建立 Tokens 命名（顏色、字體、間距）
- 使用 Tokens Studio Plugin 將其導出為 JSON
- 前端工程導入 Style Dictionary 轉成 SCSS / CSS / JS 變數
- 雙方測試樣式是否一致
- 將 Tokens 存放在 Git Repo 並版本控制
🎁 範例 JSON（Design Token 原始格式）
{
"color": {
"primary": {
"500": { "value": "#0052CC" },
"600": { "value": "#003F9E" }
}
},
"font": {
"heading": {
"h1": {
"size": { "value": "32px" },
"weight": { "value": "700" }
}
}
},
"spacing": {
"md": { "value": "16px" }
}
}