Архитектура на токени за семантичен дизайн: глобални, семантични и компонентни токени
Как да структурирате дизайнерски токени на три нива, да поддържате теми и множество марки и да ги изпращате в мрежата, 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 или други формати. Инструментите за проектиране, които четат един и същ формат, могат да останат синхронизирани, а инструментите за кодиране на AI могат да четат директно 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 Community Group
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com