Design Tokens 設計系統落地（Figma/Token Studio→程式碼）｜多品牌、多專案一致化、維護成本大降

Token 分層與命名策略

三層模型（建議）

Base/Primitive（原子）：實際值，例如 #0A84FF、16px。

Semantic（語意）：對應用途，例如 color.bg.default、color.text.muted、radius.md。

Component（組件）：元件專屬，例如 button.primary.bg, tag.success.border。

命名規則（範例）

{category}.{role}.{state?}.{scale?}

顏色：color.text.default / color.bg.inverse / color.border.subtle

間距：space.2, space.4（刻度使用 0,2,4,8,12,16…）

圓角：radius.sm|md|lg|pill|full

字級：font.size.sm|md|lg|xl|2xl

組件：button.primary.bg, button.primary.text, input.focus.ring

核心原則：頁面不直接用六位色碼與 px，而是使用語意 Token

從 Figma（Token Studio）到程式碼：落地流程

在 Figma 以 Token Studio 建立 Token 結構

建立集合（Sets）：base、semantic、component

建立主題（Themes/Modes）：brand-Default、brand-X、light、dark

使用「別名（Alias）」：semantic.color.bg.default 指向 base.color.neutral.0

版本控管與審核

Token Studio 連接 Git Repo（JSON/YAML）。

每次調整產生 PR，Reviewer（設計/前端）共同審核。

使用 semver（如 v1.3.0），破壞性變更（rename/remove）需出 Changelog。

自動化輸出（Style Dictionary 等）

CI 觸發：Token JSON → Style Dictionary → 產出

Web：CSS Variables、TS 常數、Tailwind 設定片段

iOS：Swift/UIColor, SwiftGen 資源

Android：XML（colors.xml、dimens.xml）

在專案消費 Tokens

Web：var(--color-bg-default) / var(--space-4)

React：在 Theme Provider 切換品牌 / 明暗主題

Native：以平台層封裝（ThemeManager）注入

iOS/Android 消費（概念）

iOS：以 Tokens.swift 產出 UIColor.tokensBrandPrimary；在 ThemeManager 依品牌/主題切換。

Android：colors.xml/dimens.xml 載入於 ThemeOverlay.BrandX，以 MaterialTheme composables 消費。

多品牌 / 多專案的落地方法

共用語意層，不共用品牌層

semantic.* 在所有品牌/專案一致。

base.brand.* 由各品牌覆寫（如主色、字體、圓角風格）。

主題疊加（Theme as Layer）

層級示例：brand-X → light / dark → project-landing-2025（活動覆寫）。

規則：越靠近場景的層，覆寫越少，周期越短。

治理（Governance）與版本控管

角色:

設計（Owner Token 命名）／前端（落地可行性）／DesignOps（流程與 CI）

分支:

main（可發佈）／feat/*（新 Token）／fix/*（修正）

規範:

禁止在頁面/元件直接寫 Hex/px（除非臨時，須回填 Token）

所有變更均經 PR + Changelog（標註 BREAKING）

每季清理「僵屍 Token」（未被消費的條目）

驗收 KPI（可量化）

樣式 PR 的「檔案變更行數」中位數下降 ≥30%

從需求到 UI 同步開發的時程縮短 ≥30%

主題切換工時：單品牌→多品牌 ≤ 1 天

無 Token 直寫 Hex/px 的檢出率（lint）趨近 0

Bug 類型「色彩/字級/間距不一致」下降 ≥40%

常見踩雷

只做「原子」不做「語意」：後期覆寫地獄。

把品牌色硬寫在元件：品牌切換要拆頁。

沒有版控：設計改了、程式碼不知道。

一次導入全站：建議從 3 個核心元件開始滾動遷移。

忽略無障礙：語意 Token 要包含對比度（如 color.text.onBrand），在暗/亮主題都通過 AA。

結語

若你現在正面臨「一套設計、三個品牌、五個專案」的反覆重工，這套 Token 化流程能立刻止血：設計以語意命名，程式碼以變數消費，CI 以自動化輸出。下一步我可以把你的現有色票與字級，直接轉成 Token Studio 檔與 Style Dictionary 專案骨架，順便挑三個核心元件做示範，明天就能開始落地。

讓體驗說話，用數據定案；讓好產品走得更遠。

👉 https://www.lohaslife.cc/contact/