Архітектура маркерів семантичного дизайну: глобальні, семантичні та компонентні маркери
Як структурувати токени дизайну на трьох рівнях, підтримувати теми та кілька брендів і надсилати їх у Інтернет, iOS і Android за допомогою формату W3C DTCG.
Основний винос
Більшість зрілих систем проектування використовують три рівні маркерів: глобальний (необроблені значення, такі як blue-600), семантичний (призначення, наприклад color.action.primary) і компонент (спеціальне використання, наприклад button.background). Компоненти посилаються на семантичні токени, семантичні токени посилаються на глобальні, а теми чи бренди змінюють місцями лише семантичний рівень. Зберігайте їх у форматі W3C DTCG і створюйте код платформи за допомогою інструменту збірки.
Три яруси
Material Design описує три класи токенів: еталонний, системний і компонентний. Багато команд називають їх глобальними, семантичними та компонентними. Назви відрізняються, але ідея та сама: відокремте необроблені значення від рішень щодо їх використання.
- Глобальний (посилання): кожне необроблене значення в системі, наприклад blue-600, space-4, font-size-16, spring-gentle.
- Семантика (система): для чого призначене значення, наприклад color.text.primary, color.action.primary, motion.enter.
- Компонент: як один компонент використовує систему, наприклад button.background або dialog.motion.open.
Чому семантичні лексеми важливі
Якщо кнопка безпосередньо використовує blue-600, кожна зміна теми означає редагування кожного компонента. Якщо він використовує color.action.primary, темний режим, високий контраст або новий бренд, змініть лише те, на що вказує color.action.primary. У матеріалі зазначається, що токени дозволяють застосовувати висококонтрастну палітру або змінювати шкалу типу в системі саме таким чином.
Теми та кілька брендів
Для мультибрендових або білих продуктів зберігайте один набір семантичних і компонентних маркерів і одну глобальну палітру для кожного бренду. Кожна тема є відображенням семантичних токенів на глобальні значення. Перша стабільна версія специфікації W3C Design Tokens (2025.10), випущена в жовтні 2025 року, додала підтримку тем і кількох брендів, сучасні колірні простори, такі як Display P3 і OKLCH, а також псевдоніми та посилання на рівні компонентів.
Жетони руху також належать сюди
Тривалість, криві ослаблення та пружини дотримуються однакових рівнів. Глобальний токен може бути м’яким із своєю жорсткістю та амортизацією; семантичний токен motion.enter вказує на нього; маркер компонента sheet.motion.open вказує на motion.enter. Додайте тему зі зменшеним рухом, яка переназначає маркери руху на короткі затухання.
Доставка токенів на кожну платформу
Зберігайте токени в репозиторії як DTCG JSON, єдине джерело правди. Інструмент збірки, такий як Style Dictionary, перетворює їх у змінні CSS, Swift, Kotlin, Flutter або інші формати. Інструменти дизайну, які зчитують один і той самий формат, можуть залишатися синхронізованими, а інструменти кодування штучного інтелекту можуть безпосередньо зчитувати JSON.
- Джерело правди: DTCG JSON у Git, переглядається як код
- Збірка: трансформація на кожну платформу при кожній зміні
- Синхронізація інструментів дизайну: імпорт або плагін, ніколи значення не копіюються вручну
- Linting: заборонити необроблені значення в компонентах
Ключі Principle, які слід запам’ятати
- Три рівні: глобальний (значення), семантичний (призначення), компонент (використання)
- Компоненти посилаються на семантичні токени, а не на необроблені значення
- Теми та бренди змінюють семантичний шар
- Формат W3C DTCG досяг своєї першої стабільної версії (2025.10) у жовтні 2025 року.
- Додайте маркери руху та тему зі зниженим рухом
Часті запитання
Джерела
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — Група спільноти W3C Design Tokens
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com