Figma 設計系統
如何在 Figma 中為 iOS/iPadOS/macOS、Android 與 Web 建構設計系統，並以官方 Figma MCP 伺服器為基礎。每一個數值都是一個變數。樣式則是用於由變數組合而成的複合元件：文字樣式、效果樣式、漸層填色樣式。純色樣式屬於舊式寫法。
MCP 工具呼叫屬於 Figma 外掛所附帶的技能（figma:figma-use、figma:figma-generate-library、figma:figma-generate-design 等）。Figma 會維護它們。將這些技能與此技能一同載入。關於實作細節以外掛技能為準；關於流程與完整性則以此技能為準。
快速參考
| 主題 | 參考文件 |
|---|---|
| 所有技能的代號命名：層級、家族、各平台轉換規則、程式碼語法；變數集合、模式、排版、間距、圓角 | reference/token-architecture.md |
| 元件與狀態列表、Auto Layout、屬性、Slots、強制互動狀態接線 | reference/component-architecture.md |
| 在 Figma 中建構 Liquid Glass：Apple 的套件、參數、玻璃代號、API 限制 | reference/liquid-glass.md |
| 將視覺風格套用至現有設計（重構結構，而非代號替換） | reference/applying-styles.md |
| 從零建構與複製應用程式的操作順序、檔案結構、Dev Mode 交接、無障礙設計、反模式 | reference/workflows-and-handoff.md |
| 四個關卡的完整說明、如何隨任務擴展、各平台的最低螢幕組 | reference/gates.md |
| Figma 中會變動的事實：方案限制、限額、Beta 狀態、MCP 工具與技能名稱、套件連結（具時效性） | reference/platform-status.md |
關卡
四條規則，由本技能制定，在工作階段開始時及過程中持續檢查。它們會默默地失敗，而代價在交接時最高。
- 深色畫布優先。 每個頁面的畫布在有任何內容之前必須是
#1E1E1E。如果是白色，停下來修正它。 - 沒有空白頁面或框架。 建立它，完整填入內容，然後繼續。一個平台若沒有最低螢幕組就不算完整。
- 代號名稱必須與程式碼庫完全一致。 使用已存在的名稱。不要發明新名稱。
- 亮色與暗色，兩者都要。 每個語意色彩都必須有兩個值，且每個畫面在完成前都必須在兩種模式下建構與審查。
完整的建構會完整通過四個關卡。對現有檔案的小編輯則不能讓檔案變得更糟，任何已存在的問題都要回報，而不是默默地修復。reference/gates.md 提供了原因、擴展規則以及最低螢幕組。
在 Figma 中：
深色畫布：
figma.currentPage.backgrounds = [{
type: 'SOLID',
color: { r: 0.118, g: 0.118, b: 0.118 }, // #1E1E1E
opacity: 1
}];
figma.currentPage 是一個頁面。使用 figma:figma-use 中的頁面切換規則對每個頁面重複執行，並在建立每個新頁面時立即設定。手動方式：在空白畫布上按右鍵 → 背景顏色。截圖並檢查。
沒有空白頁面。 在建立頁面的同一個步驟中填入內容。如果存在 🎨 Tokens 頁面，則在觸碰 🎛 Components 頁面之前，變數集合必須已經放在該頁面上。
代號名稱。 變數路徑與每個變數的程式碼語法遵循 reference/token-architecture.md。如果程式碼庫中已有某個代號的名稱，則以該名稱為準。
亮色與暗色。 語意色彩集合上的亮色與暗色模式。將每個畫面的頂層框架分別設為兩種模式進行審查。
專業分工
此技能負責 Figma 流程與代號名稱。數值與平台規則則來自擁有它們的技能。
| 需求 | 負責技能 |
|---|---|
| 四個關卡與最低螢幕組 | 本技能 (reference/gates.md) |
| 調色盤數值以及每個語意角色別名對應的原始色 | color-system |
| Apple 字級大小、系統色彩、Liquid Glass 規則與外觀、OS 版本 | apple-platform |
| Material 色彩角色、形狀比例、視窗尺寸等級、程式庫版本 | android-platform |
| CSS 中的 Web 代號、程式碼中的斷點 | web-platform |
| 動態代號名稱與數值 | motion-design |
| 樣式目錄 | visual-styles |
工作階段啟動
- 載入
figma:figma-use以及任務所需的外掛技能：代號與元件使用figma-generate-library、畫面使用figma-generate-design、在閱讀設計以進行實作前使用figma-design-to-code。 - 開啟工作階段。在使用任何其他檔案工具（包括唯讀工作）之前，先以檔案金鑰和一行任務描述呼叫
create_session。新檔案：先使用create_new_file，然後再create_session。 - 先讀再寫。現有檔案已有頁面、集合與慣例。在新增內容之前先找到它們。
- 檢查關卡，並根據任務規模調整。
設計風格
在建立任何代號或元件之前，先與 visual-styles 技能確認視覺風格。若未指定風格，則以平台本身的設計語言為預設值。代號層級、元件結構、Auto Layout 與狀態接線在不同風格之間保持不變。只有數值與結構細節會改變。reference/applying-styles.md 說明了如何在 Figma 中套用風格。
設計哲學
設計系統是設計與程式碼之間的契約。在 Figma 中定義的代號，就是 SwiftUI、Compose 和 CSS 中使用的相同代號。名稱、數值與層級結構在三個平台間完全一致。一個沒有將工程端視為受眾的設計系統，只是一個貼紙收集簿。
設計所有東西。每一個畫面、每一個狀態、每一個邊界情況。空白、載入中、錯誤、部分內容、溢出、長文字、短文字、停用。只涵蓋快樂路徑的設計只是一份 mood board。工程團隊會自己在程式碼中發明缺失的狀態，而且它們通常是錯的。
像素完美就是精確無誤。將所有東西綁定到變數，測量所有東西。一個因為「看起來差不多」而寬度為 17px 的元件，並不像素完美。
兩種工作模式
從零建構。 設計系統優先，元件其次，畫面最後。在觸碰任何一個元件之前，代號必須先定義完成。
複製現有應用程式。 先稽核，提取隱含的系統，將其正式化，然後在正式化的代號上重建元件。絕不可跳過稽核步驟。
兩者的逐步說明在 reference/workflows-and-handoff.md 中。