Тут ви дізнаєтесь основи того, що таке дизайн токени (design tokens), як вони використовуються, їх переваги, а також деякі інструменти та ресурси, які можуть вам допомогти. Але спочатку давайте почнемо з короткої історії.
Поширена ситуація
Ви - дизайнер продукту, працюєте над невеликим новим продуктом, не маючи існуючої дизайн системи. У вас є фірмовий колір — яскраво-синій (#3640F5). Ви використовуєте цей колір у різних місцях продукту, внутрішніх системах та на вашому веб-сайті: текст заголовка, основні фони кнопок, текст другорядних кнопок, текст посилань тощо.
Ці кольори будуть розкидані у ваших дизайн файлах і в коді, з яким працюють ваші розробники. У CSS вони можуть виглядати приблизно так:
h1 { color: #3640F5 }
button.primary { background-color: #3640F5 }
button.seconary { color: #3640F5 }
a { color: #3640F5 }
Використовуючи належним чином CSS, ви вже маєте певні ефективні переваги. Наприклад, всі основні кольори фону кнопок можна змінити в одному місці. Те ж саме для ваших посилань, заголовків тощо. Однак, людина є людина.
Можливо, дизайнер обирає синій колір на око, який виглядає схожим, але насправді є іншим #4254F5. Це залишається непоміченим і потрапляє в код. Подібні речі відбуваються ще кілька разів і в результаті ви отримуєте п'ять різних відтінків синього і палітру, яка виглядає приблизно ось так.
Один з інших дизайнерів, які працюють над продуктом, не знає який саме колір використовувати для посилання, тому обирає той, який найбільше подобрається і рухається далі. Це відбувається знову і знову, щоразу подібними моментами ускладнюючи всю систему.
Потім ваша компанія оголошує про ребрендинг, з новим зеленим кольором бренду, і ви розумієте — оскільки значення попереднього кольору абсолютно різні, ви не можете легко знайти і замінити їх.
Ви не знаєте, які з них є навмисними, а які — випадковими, а потрібно прийняти рішення щодо кожного з них. Ви проводите зустрічі з іншими дизайнерами в команді, щоб спробувати домовитися про те, які сині кольори слід змінити на новий колір бренду, а які залишити, наприклад, для технічних інтерфейсних моментів (інформаційні стилі, стилі посиланнь і тд). Ви намагаєтеся переконати свою команду, що вам потрібні ресурси та час аби навести лад. В результаті ви виграєте деякі з цих битв, але програєте інші. Можливо, ви трохи покращите ситуацію після завершення проекту ребрендингу, але через кілька місяців або років ви знову опинитеся в тій самій ситуації.
Дизайн токени можуть допомогти вам впоратися з деякими з описаних тут проблем і уникнути їх. Але спочатку...
Що таке дизайн токени?
Базовий дизайн токен — це змінна з унікальним ім'ям, якій присвоюється певне значення. Ви можете сприймати дизайн токен як джерело правди, яку можна повторно використовувати або комбінувати.
Ви можете використовувати токен, посилаючись на його ім'я там, де ви зазвичай вводите значення.
Це токен для кольору:
primary = #3640F5
Токени цього рівня схожі на звичайні стилі у Figma або Sketch, але більш потужніші та гнучкі (про те, як саме, ми розберемося трохи пізніше). Вони найчастіше використовуються для кольорів, розмірів, відступів, прозорості, товщин рамок (borders), розмірів/товщин шрифта тощо.
Під час реалізації дизайн-макету розробник вкаже наступне:
h1 { color: primary }
button.primary { background-color: primary }
button.seconary { color: primary }
a { color: primary }
У Figma або Sketch буде вказано стиль з такою ж назвою, яка є спільною для всієї вашої команди або компанії.
Тепер, коли відбувається ребрендинг, ви змінюєте колір бренду в одному місці. А розробник, відкривши ваші дизайн-макети, точно знає, які токени використовувати, тому що вони мають ті ж самі назви, що і в коді.
Однак дизайн токени як система або підхід — це набагато більше, ніж те, що описане вище. Дизайн токени повинні інформувати про те, як ви взаємодієте в крос-функціональній команді, як ви підходите до рішень щодо дизайну та як ви масштабуєте ці рішення для всього набору продуктів.
Шкали та палітри кольорів
Більшість дизайн систем включають базові палітри кольорів, на основі яких будуються всі інші. Оскільки ваша дизайн команда це не одна людина, а ваша дизайн система це багато компонентів, екранів та різних інтерфеейсних тем, з часом ви побачите, що спроба додати нові кольори швидко перетворює всю систему у непослідовну та важкокеровану.
Загальний підхід полягає в тому, щоб мати кілька базових відтінків, включаючи кольори вашого бренду та акцентні кольори, а також деякі відтінки для таких речей, як помилки, попередження, інформування про успіх, нейтральні кольори тощо. Кожен з цих відтінків матиме шкалу яскравості, позначену числом, яке вказує на те, наскільки він світліший або темніший. Наприклад, neutral-100 — дуже світло-сірий, neutral-500 — середньо-сірий, а neutral-900 — дуже темно-сірий. Деякі дизайн системи використовують шкалу від 0 до 100, це вже на ваш вибір.
Токени псевдоніми (alias tokens)
Токени можуть посилатися на конкретні значення, але вони також можуть посилатися на інші токени. Іноді ми називаємо їх псевдонімами (alias), оскільки вони позначають те саме значення, але під іншим іменем. Їх також можна назвати референсами, оскільки вони посилаються на значення іншого токена. Вони можуть навіть посилатися на інші токени псевдоніми.
У наведеному вище прикладі ми бачимо, що визначено той самий основний токен, але потім три додаткові токени псевдоніми, один для текстових посилань, один для фону кнопок і один для тексту заголовка.
Всі вони мають однакове значення синього кольору, тож навіщо ці дублікати?
Коли ваша дизайн система стає більш складною, скажімо, 20-30 кольорів, ви отримаєте 4 або 5 різних відтінків одного і того ж кольору, і потрапляєте в ситуацію, коли дизайнери або розробники не можуть запам'ятати в яких контекстах, які з них використовувати. Особливо це стосується ріхних відтінків сірого для фонів, рамок (borders), тіней тощо, оскільки варіації можуть бути дуже незначними. Додавши зміст і контекст до імен, ви можете зробити використання кольорів дуже зрозумілим та передбачуваним для всіх членів команди.
Деякі приклади: text-body, text-secondary,background-card, text-link, border-separator. Здається, досить очевидно, де ви можете використовувати ці кольори. Оскільки ці типи токенів містять в імені значення, яке вказує на місце їх використання, ми іноді називаємо їх семантичними токенами або семантичними псевдонімами.
Іншим поширеним типом псевдонімів (alias) є токен компонента (component token). Замість розширених семантичних назв, вони мають імена, надзвичайно специфічні для компонентів, наприклад, input-background-hover або button-secondary-border-focus. Це значно полегшує рішення щодо сстандартів іменування.
Темний та світлий режим
Це тема для окремої статті, але величезна перевага використання токенів полягає в тому, що ви можете набагато простіше створювати і контролювати темний та світлий режими інтерфейсу. Це все робиться за допомогою розумного використання псевдонімів. Просто створюєте токени псевдоніми для всього, для чого вам потрібен змінний колір (ймовірно, для всіх ваших токенів компонентів). Розглянемо на прикладі токена фона інтерфейса background-main.
У світлій темі (light mode) встановлюєте цей токен як псевдонім для світло-сірого кольору (neutral-900), а для темної теми (dark mode) — темно-сірого (neutral-100).
Згодом, або за допомогою плагіна, або в коді, ви можете перемкнути темний/світлий режим інтерфейсу, а кольори будуть пов’язані з правильними значеннями. Оскільки ім'я семантичного псевдоніму залишається однаковим в обох темах інтерфейсу, то в перспективі це набагато спрощує прийняття багатьох рішень в межах вашої дизайн системи та полегшує її масштабування.
Які недоліки використання токенів?
Недосконалі дизайн-інструменти
На сьогодні жоден з популярних дизайн-інструментів не підтримує токени таким же потужним чином, як це реалізовано в коді розробробників. А псевдоніми як концепція взагалі не існують. Загалом, є тільки кілька плагінів (про які згадано в кінці статті), які можна використовувати для заповнення деяких з прогалин.
Повільне внесення змін в систему
Якщо ви хочете додати нові кольори або токени, вам потрібен налагоджений процес внесення змін та надійні стандарти іменування, щоб все не вийшло з-під контролю і не перетворилося на жахіття, яке важко підтримувати. Через це токени часто краще застосувати вже для існуючих продуктів з інтерфейсами, які пройшли перевірку користувачами. А дизайн експерименти виконувати без системи токенів.
Суттєві початкові інвестиції
Хороша система токенів вимагає досить суттєвих початкових інвестицій. Як мінімум, це встановлення стандартів іменування, розробка палітри, яка відповідає вашим наявним дизайнам продуктів та міграція існуючих систем на токени, а це все не слід робити необдумано та без командної співпраці. Погана система токенів може бути більш шкідливою для команди, ніж відсутність системи взагалі.
Декілька напутніх думок
Якщо у вас є продукт або команда, яка має справжню потребу в дизайн системі, то токени повинні бути фундаментальною частиною цієї системи. Розгляньте різні підходи до іменування та структурування ваших токенів і виберіть той, який відповідає потребам саме вашої команди. Але не захоплюйтесь надмірним проектуванням.
Інвестуйте в початковий аудит, щоб переконатися, що ваші токени придатні для використання за призначенням і будуть відповідати потребам вашої команди.
Створюйте систему токенів спільно з розробниками. Ця система так само важлива для них, як і для дизайнерів, а токени стають набагато потужнішими, коли існує тісна взаємодію між всіма командами.
Інструменти та ресурси
Плагіни Figma
Figma Tokens — плагін, який дозволяє ефективно додавати функціональні можливості токенів, більше ніж просто підтримка стилів у Figma. Це найпопулярніший і найбільш активно розроблюваний плагін на даний момент. Якщо ви і ваша команда дійсно готові використовувати його в повній мірі, то це дуже потужний інструмент.
Themer — плагін, який підтримує тільки стилі в межах Figma, але дозволяє динамічно перемикатися між темними і світлими темами за допомогою семантичних токенів.
Код
Словник стилів — система, розроблена Amazon для управління та використання дизайн токенів у вашому коді.
Theo — система, розроблена Salesforce для управління та використання дизайн токенів у вашому коді.
Текст Steve Dennis
👉 Більшe в Telegram →
Найновіші коментарі (0)