Class LLL / 設計星團教材目錄編輯與來源

Figma Design 教材 / Class LLL

主題、密度與Token：換色後真的可讀嗎？

分開變化軸，再看對比與真正內容

深淺主題不是只換背景，密度也不是把字一起縮小。比較色彩對、數值留白、文字配方與長文案，理解語義設計代碼、樣式及模式的分工與DTCG匯入匯出邊界。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 14 分鐘

開啟互動教材查看參考來源

閱讀目標

適用條件與學習範圍

畫面切Dark後顏色變了，為什麼文字可能更難讀、長文案也沒有解決？

能為不同變化選色彩／數值／字串、文字樣式與模式，檢查當前色對及真內容，知道設計代碼交換不是全屬性無損或程式自動同步。

固定兩主題／兩密度／兩組字級行高及兩段原創文案；只計不透明sRGB相鄰色對與本站DOM排樣。不是完整Figma 設計代碼／字型／多語／響應式引擎、DTCG驗證器或WCAG整體認證。

原理與判斷

主題回答在這個情境採哪組顏色，密度回答留多少空間，文字配方回答閱讀字級與行高，文案回答說什麼。把四件事綁成一個「Dark」按鈕，很容易在換背景時漏掉文字、在省空間時縮到難讀，或把長內容裁掉卻以為已完成。 先把語義角色和變化軸寫清楚，再把正確型別綁到相容屬性。最後以實際文字、窄寬與可讀條件檢查結果；使用變數或設計代碼本身不是設計品質與成品可及性的證明。

語義設計代碼表達用途，不是把色碼換個名字

本盤用surface與ink表達背景、文字角色；Theme給兩者一組情境值。只改背景反例保留Light的ink，切Dark後便接近背景；關掉反例才一起採Dark色對。這是原創固定引用策略，名字不是Figma保留字，也不會自動算出合格配色。 先追使用位置引用哪個角色、角色指向哪個值，再看當前模式。相同色碼不代表共享引用，將名字改成semantic也不會自動修正綁定；別名參照與模式問題可以各自補讀。

色彩對、Density與文字配方各有責任

Theme控制色彩的surface／ink；Density只以數值調內距14／8與間距16／8，不改字級。文字配方一起選16／24或18／28，表達本文字級與行高的組合。真實Figma可用樣式保存合適的複合排樣，再在支援處綁變數；並非所有屬性都能任意綁定。 字串可以提供文案情境，但它不代替文字框、字型或語意設計。Density切Compact不等於所有東西等比縮小；主題切Dark也不必把文字配方、間距與內容一起更換。本台各控制獨立，方便指出真正造成差異的那一項。

色對參考達標，仍需看完整文字

本台按WCAG相對亮度公式計算已知、不透明sRGB前景與背景，以普通文字4.5:1作對照；判斷用未取整比值，顯示才保留兩位。它只檢查這一色對，不涵蓋透明合成、漸層、圖片、所有互動狀態或整體成品可及性，也不是原生Figma驗證。 開長文案後，單行示例可能超出可用寬；色對達參考不會自動解決內容省略。開讓內容換行後，本站用實際DOM量測排樣結果，不按字數估計Figma斷行。完整原文另可讀；若真實產品不容換行，要調結構、可用寬或文案，不能只刪掉必要資訊。

模式不是自動斷點，設計代碼不是自動程式同步

同一變數可按模式取不同值，但需要正確的情境指定與繼承；縮框架不代表必然自動切Mobile。Token把決策表達成可引用的名稱和值，不會因為有一份JSON就讓應用程式、所有元件或外部庫自動同步。 設計與程式需要約定命名、型別、單位、輸出格式及接受變更的方法，再做真實對照。API、MCP、Code Connect或資源庫各有自己的權限與整合邊界。本台沒有產生CSS、修改外部程式或讀寫真Figma，不能以切一次Theme當同步實測。

DTCG匯入只接受已支援的型別和值

Figma模式文件列JSON採DTCG格式，但支援子集有條件：色彩接受HSL／sRGB；Dimension映數值且只接受px；fontFamily映字串且值為單一字型名稱字串，不接受字型陣列；持續時間映數值且只接受s。數值通常映數值，若$extensions的com.figma.type指定boolean，0為false、其他數為true。文件另說可匯入字串，並註明它不是官方DTCG型別；不要把Figma接受的擴充當通用標準。 這些是當期匯入映射，不能從Design現在有時間／緩動六型就推所有型別能以同名DTCG無損往返。官方可選匯出模式或整集合匯出 modes輸出JSON；輸出成功不證明所有消費端都理解單位、別名參照及擴充，也不把任意JSON宣稱能用。本站沒有製造假匯入成功或交換檔。

名稱、共同集合與跨集合引用需另外核對

匯入巢狀名稱會轉成斜線形式；若正規化後重名，只匯入遇到的第一個，後者忽略。拖多檔到新集合會每檔建一模式，但只有各檔都存在、$type與值受支持且跨檔型別相同的設計代碼才建立變數；在既有模式用Import 模式，則更新名稱與型別相符的變數。 跨集合引用可用com.figma.aliasData擴充，仍需工具能在你有存取權的集合找到匹配目標；不因名稱相似就保證連上。交換前留可回復樣本，匯入後逐項比名稱、型別、值、模式與別名參照，再到使用位置檢查真正結果。完整多語／例外壓力與跨檔發布接受另由後續教材處理。

步驟與觀察

  1. 先列四種變化與語義用途

    在自己的可編輯Design測試檔列背景／文字色彩、內距／間距數值、文案字串與文字樣式的字級／行高。用用途命名，核對相容綁定；不要先假定一個模式負責所有變化。 操作名稱對照（中文為本站教學譯名）： 左側變數 > 集合／模式值（介面原文：左側 Variables > 集合／mode值） 物件 Appearance > Apply 變數模式（介面原文：物件 Appearance > Apply variable mode） Typography > 文字樣式／可綁定值 變數 > 新集合 > 拖入設計代碼 JSON（介面原文：Variables > 新集合 > 拖入token JSON） Mode右鍵 > Import 模式／匯出模式（介面原文：Mode右鍵 > Import mode／Export mode）

  2. 建立值與模式，再確認使用位置

    從變數管理集合與模式值，將色彩對與留白分別接到相容屬性。先在一個容器明確選情境，查子層自動／明確指定；需要時補讀模式來源，不靠畫面同色推斷已綁定。

  3. 選文字配方，保留內容責任

    用文字樣式選合適字級、行高等組合，再按已支援屬性決定變數。將短文與長文案都帶入實際文字框，看寬、高、換行與必要內容；密度調留白時不要默默縮字。

  4. 檢查色對與內容，逐一修反例

    在深／淺情境核對真正相鄰的前景背景，普通文字對比依WCAG參考、特殊尺寸及其他條件另查；不要只測背景。再測窄寬、長文案與狀態，色對通過仍須修超出／省略。本站比值不是全產品認證。

  5. 交換設計代碼前檢查格式與映射

    使用可回復測試資料，核對DTCG JSON、支援型別、px／s單位、單字型字串及名稱正規化重名。新集合拖檔前確認各模式檔的共同設計代碼與一致型別；跨集合別名參照還需有效目標與存取。

  6. 匯入／輸出後逐項驗收，不宣稱同步

    變數新集合拖入合格檔建立模式；既有模式右鍵Import 模式更新匹配項。匯出模式或集合匯出 modes後，比名稱、型別、值、別名參照及真正使用結果；外部程式另做整合與驗收，不把JSON下載當全屬性無損往返。

常見問題

Dark背景換了，文字卻看不清

查ink是否還是Light固定值或另一模式／局部指定；主題需要整組相關色對，名稱不會自動修配色。

對比數值達參考，長文案仍省略

對比與內容容量不同；查真文字框、可用寬及換行，必要內容不應只靠裁切消失。

Compact一切都變小，字也難讀

先分密度留白、文字配方與內容；不把數值間距的變化機械套成整體等比縮放。

有tokens.json卻沒有自動更新程式

Token資料不等於同步流程；核對消費端映射、型別、單位及接受變更的整合，再做實際對照。

匯入後少變數、字型或單位不對

查支援的型別／值、Dimension px、Duration s、單字型字串、多檔共同項與一致$type；不要假定任意JSON可用。

名稱重複或跨集合別名參照沒有連回去

先看斜線正規化後是否重名，再看aliasData目標與可存取集合；輸出再匯入不保證任意來源無損。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design、可編輯文件、local樣式／變數；模式支援及數量依方案，跨檔資源庫與程式整合另有條件。WCAG僅作固定普通文字色對參考，不是工具可及性或整體成品認證。 來源狀態：VT1為2026-10-22 Scrapling新抓並讀DTCG型別／單位／名稱／aliasData／多檔交集／Import與Export；V02為22日已取套用來源，S15為21日cache及FG25新專文支持樣式邊界。W3C當日讀相對亮度公式、未取整門檻及限制。 示意限制：程式原創配方匣與真DOM樣本，不透明sRGB已知色對、兩密度與兩配方；實際DOM測超出與行數，不估Figma字寬。沒有DTCG解析、交換檔、完整字型、跨檔資源庫或自動CSS同步。 原生軟體實測：只做本站公開瀏覽器排樣與操作；未原生Figma綁定／匯入／輸出／程式同步實測。 學習成效驗證：未真人試用，沒有學習成效或成品無障礙認證。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。

相關知識