Design tokens: чому агенції в них ще не переїхали

Дизайн-токени — це не просто CSS-змінні. Це контракт між дизайнером і розробником. Але 70% агенцій, з якими ми говорили у 2026, не використовують їх системно. Чому?

Основні відмазки

1. «Наші проєкти малі — токени overkill» 2. «Дизайнер не встигає, робимо як швидше» 3. «Ми і так узгоджуємо кольори у Figma»

Всі три — від нерозуміння що таке токени.

Що таке токен насправді

Token = semantic name + value + context.

Не `#ffd426` — а `--color-accent` з context "brand primary, used for CTAs and highlights".

Не `16px` — а `--space-4` з context "small gap inside cards".

Що це дає

- Заміна bg color на всьому сайті = зміна 1 токена - Light/dark тема = 2 набори токенів, компоненти не знають про тему - Rebrand за тиждень замість 3 місяців - Дизайнер не мусить фарбувати кожен новий компонент — токен обирається сам

Як ми впровадили

1. Figma Variables → JSON → Tailwind config (автоматизовано) 2. 6 semantic категорій: bg / fg / accent / line / state / typography 3. Токени мають префікси щоб не плутати з raw-значеннями

Приклад з реального проєкту

Клієнт LKW Walter вирішив rebrand посеред розробки. Замість 3 тижнів переробки — 2 дні на оновлення токенів + автотести. Клієнт був у шоці, ми — ні.

Висновок

Токени — це маленька інвестиція, яка окупається за перший rebrand. Якщо ти агенція, яка робить продукти довші за 3 місяці — токени обов'язкові.