Дизайн-токени теж можуть перетворитися на хаос Коли дизайн-система виростає до сотень токенів, голов

Дизайн-токени теж можуть перетворитися на хаос

Коли дизайн-система виростає до сотень токенів, головним питанням стає не лише те, як їх назвати, а наскільки легко буде знайти потрібний, зрозуміти його призначення та відрізнити від схожих.

Автор пропонує розглядати токени на трьох рівнях:
→ Примітивні — описують саме значення: color-blue-blue_600, spacing-md, radius-full.
→ Семантичні — описують намір: наприклад, color-background-primary. Такий токен може посилатися на примітивний, але його назва вже не залежить від конкретного кольору.
→ Компонентні — описують використання в конкретному компоненті: наприклад, колір фону основної кнопки у стані hover.

Тобто логіка така:
значення → намір → використання
Якщо зміниться брендове синє, достатньо змінити зв’язок на рівні примітивного/семантичного токена, а не шукати цей колір у десятках компонентів.
Є й цікавіший нюанс: довші та «детальніші» назви не обов’язково

📚Повний матеріал про систему неймінгу токенів

❖ Персональне менторство (900 грн/міс) • YouTube канал