Design token - це назва для одного дизайн-рішення: кольору, відступу, радіуса, шрифту чи тіні. Замість #2563EB у двохстах місцях ви пишете color.action.primary, а значення живе в одному місці. Токени бувають трьох рівнів - primitive, semantic і component - і саме вони роблять так, що одна зміна в дизайні доїжджає до коду без ручного синку.
Нижче - одне визначення, три рівні на одному наскрізному прикладі, як токен виглядає у Figma, JSON і CSS, і чому у 2026 році токени потрібні вже не тільки команді, а й AI-агенту, який пише за вас код.
Що таке design token одним реченням?
Design token - це пара «назва → значення», де назва описує рішення, а значення можна змінити, не чіпаючи місць, де токен використовується.
Найпростіша аналогія - контакт у телефоні. Ви дзвоните «Мамі», а не на +380 67 …. Мама змінила номер - ви оновили один контакт, і всі ваші дзвінки йдуть на новий. Токен працює так само: компоненти «дзвонять» на color.action.primary, а яке там зараз значення, вирішує одне місце в системі.
Що зазвичай стає токенами:
- Колір - фони, текст, межі, стани (успіх, помилка, попередження)
- Відступи - шкала на кшталт 4, 8, 12, 16, 24, 32, 48
- Типографіка - розміри, висота рядка, насиченість шрифту
- Радіуси, тіні, товщина меж
- Анімація - тривалість і easing (так, це теж токени)
Які бувають design tokens: primitive, semantic, component?
Три рівні найлегше зрозуміти на одному прикладі - синій колір основної кнопки:
| Рівень | Приклад | Що означає | Посилається на |
|---|---|---|---|
| Primitive | blue.600 = #2563EB | просто колір з палітри, без сенсу | сире значення |
| Semantic | color.action.primary | роль у продукті: «головна дія» | blue.600 |
| Component | button.primary.bg | фон конкретної кнопки | color.action.primary |
Навіщо стільки рівнів, якщо в кінці все одно #2563EB? Бо кожен рівень відповідає на своє питання:
- Primitive відповідає «які кольори взагалі існують». Тут немає слова «кнопка».
- Semantic відповідає «для чого цей колір». Саме цей рівень перемикається у темній темі:
color.action.primaryу light дивиться наblue.600, у dark - наblue.400. Компоненти про це навіть не знають. - Component відповідає «що саме в цьому компоненті». Він потрібен, коли кнопка має відрізнятись від загального правила, не ламаючи його для всіх інших.
Чому починати треба саме з примітивів, а не з семантики, ми детально розбирали в окремому матеріалі про архітектуру токенів. Коротко: якщо почати з семантики, через тиждень color.text.primary означатиме три різні речі у трьох різних місцях.
Чи потрібні всі три рівні одразу?
Ні. Чесна рекомендація за розміром продукту:
| Ситуація | Рівні | Чому |
|---|---|---|
| Лендинг, сайт, MVP | primitive + semantic | темна тема і ребрендинг вже працюють, зайвої складності нема |
| Продукт на 20+ екранів | primitive + semantic + частково component | component-токени тільки для компонентів, що відходять від правил |
| Кілька брендів або платформ | усі три | кожен бренд перевизначає semantic, компоненти лишаються спільними |
Орієнтовні обсяги для продукту на 20-30 екранів: 60-120 primitive токенів (кольорові шкали, 8-12 кроків відступів, 5-7 розмірів шрифту, 3-4 радіуси) і 30-50 semantic. Якщо semantic токенів понад 150 - це майже завжди дублікати під різними назвами.
Як токен виглядає у Figma, JSON і CSS?
Той самий токен живе у трьох місцях, і в цьому вся суть: назва однакова, формат різний.
У Figma - це Variable у колекції. Primitive-колекція з одним режимом, semantic-колекція з режимами Light і Dark, де значення - це посилання (alias) на primitive.
У JSON - формат W3C Design Tokens (DTCG). Перша стабільна версія специфікації, 2025.10, вийшла у жовтні 2025 року, і її вже підтримують Style Dictionary, Tokens Studio та Terrazzo. Виглядає так:
{
"blue": {
"600": { "$type": "color", "$value": "#2563EB" }
},
"color": {
"action": {
"primary": { "$type": "color", "$value": "{blue.600}" }
}
}
}У CSS - custom properties, які Style Dictionary збирає з того самого JSON:
:root {
--blue-600: #2563EB;
--color-action-primary: var(--blue-600);
}
.button-primary { background: var(--color-action-primary); }JSON тут - обмінний формат між дизайном і кодом. Як налаштувати цей міст без ручного копіювання, покроково показано в матеріалі про CSS-змінні та design tokens.
Навіщо design tokens, якщо код пише AI?
Тут головна зміна 2026 року, і саме через неї ми вчимо токени не як «гарну практику», а як обов'язкову частину роботи дизайнера, що кодить.
Коли ви просите Claude Code чи Cursor зверстати екран з макета без токенів, агент бачить 16px і #2563EB і вставляє сирі значення. Кожен новий екран - трохи інший синій, трохи інший відступ. Через тиждень у коді 30 відтінків синього, і жоден з них не можна змінити централізовано.
З токенами агент отримує словник. Через Figma MCP він читає не картинку, а назви змінних, і пише var(--color-action-primary). Результат:
- темна тема і ребрендинг робляться в одному файлі, а не пошуком по проєкту
- код, який написав агент, збігається з макетом не «на око», а за назвами
- рев'ю стає простим: будь-яке сире значення в коді - одразу помилка
Щоб агент справді брав токени, а не вигадував свої, правило варто закріпити в інструкціях проєкту - про це матеріал AGENTS.md для дизайн-системи. Живі приклади того, як агент працює з токенами, я показую на YouTube-каналі UX Hero.
Тому наш кут простий: генерувати картинки сьогодні вміє кожен, а доводити дизайн до коду, який не розвалюється, - ні. Токени - це саме та частина, що з'єднує макет і продакшн.
Які помилки з токенами найчастіші?
- Назва за значенням, а не за роллю.
color.blueна semantic-рівні ламається в день ребрендингу на зелений. - Токени тільки для кольорів. Відступи й типографіка без токенів дають такий самий хаос, просто його важче помітити.
- Компоненти прив'язані до primitives напряму. Тоді темна тема знову стає ручною роботою.
- Токени є у Figma, але не в коді. Це не система, а красивий файл. Правило перевірки: змінили значення в одному місці - змінилось у продукті.
- Кожен називає як хоче. Домовтесь про схему до першого токена - ось гайд з нейменінгу.
Часті питання
Що таке design tokens простими словами?
Design token - це назва для одного дизайн-рішення: кольору, відступу, радіуса, розміру шрифту чи тіні. Замість того щоб писати #2563EB у двохстах місцях, ви пишете color.action.primary, а саме значення зберігається в одному місці. Змінили значення - воно оновилось у Figma, у коді і на всіх платформах одночасно.
Чим primitive, semantic і component токени відрізняються?
Primitive - це сира палітра без сенсу (blue.600, space.4). Semantic - це роль у продукті (color.action.primary, color.text.muted), вона посилається на primitive і саме вона перемикається між світлою і темною темою. Component - це значення конкретного компонента (button.primary.bg), яке посилається на semantic. Для невеликого продукту вистачає перших двох рівнів.
Чим design tokens відрізняються від Figma Variables і CSS-змінних?
Design token - це ідея: іменоване дизайн-рішення, незалежне від інструмента. Figma Variables - спосіб зберігати токени в дизайні, CSS custom properties - спосіб зберігати їх у коді. Обмінний формат між ними - JSON за стандартом W3C Design Tokens (DTCG), перша стабільна версія якого вийшла у жовтні 2025 року.
Скільки токенів потрібно для старту?
Для продукту на 20-30 екранів реальна стартова цифра - 60-120 primitives (кольорові шкали, 8-12 кроків відступів, 5-7 розмірів шрифту, 3-4 радіуси) і 30-50 semantic токенів. Якщо semantic токенів більше 150, найчастіше це дублікати з різними назвами.
Навіщо design tokens, якщо код пише AI?
Саме тому вони й потрібні. Без токенів AI-агент на кшталт Claude Code бачить у макеті 16px і #2563EB і щоразу вставляє сирі значення, тож через тиждень у коді 30 відтінків синього. З токенами агент пише var(--color-action-primary), і зміна теми чи бренду робиться в одному файлі, а не пошуком по всьому проєкту. Навчитись будувати такі токени можна на курсі UX Hero «Дизайн-система з AI» від Dmytro Nikolaienko.
Design tokens - це не окремий інструмент і не мода. Це спосіб дати кожному дизайн-рішенню ім'я, щоб його однаково розуміли Figma, код і AI-агент. Почніть з primitives, додайте semantic, і вже перша темна тема окупить усю роботу.