Дизайн-токени — це будівельні блоки дизайн-систем. Впровадження дизайн-токенів забезпечує уніфіковані, гнучкі та масштабовані дизайн-системи.
Огляд
Дизайн-токени фіксують повторювані дизайн рішення у платформонезалежний спосіб. Дизайн-токени виступають єдиним джерелом істини для дизайн-системи.
Single source of truth (SSOT) — це централізоване джерело, яке слугує єдиною точкою опори для різних артефактів.
Дизайн рішення — це вибір, який дизайнер робить з наявних варіантів, наприклад, вибір фірмового кольору, шрифту або інтервалу між заголовком і абзацом.
Дизайн-токени не залежать від конкретної платформи або технологічного стеку, що робить їх платформонезалежними. Це дозволяє легко впроваджувати дизайн-токени на різних платформах та в різні технології.
Дизайн-токени зазвичай створюють у читабельному для людини форматі, наприклад, YAML або JSON, але їх також можна створювати в інструментах для дизайну.
Інструменти перекладу, такі як Style Dictionary, Theo тощо, перекладають платформонезалежні дизайн-токени, у значення, специфічні для конкретної платформи.
Наприклад, дизайн-токени можуть використовувати hex позначення кольорів, тоді як iOS - RGBA, а Android - 8-значні hex коди кольорів.
Дизайн-токени в першу чергу фокусуються на візуальних дизайнерських рішеннях, таких як колір, типографія, інтервали, висота і т.д., але вони також можуть представляти невізуальні дизайнерські рішення, такі як анімація та ассети.
Використання дизайн-токенів замість захардкоджених значень допомагає забезпечити гнучкість, що полегшить проектування, підтримку та масштабування дизайн-системи.
Спрощення дизайн токенів
Почнемо з паралелей, щоб спростити концепцію дизайн-токенів —
Паралель з телефонним контактом
Коли хтось зберігає номер телефону у своєму списку контактів, він зрештою створює токен, який представляє контактну інформацію людини. Токен містить таку інформацію, як ім'я та номер телефону.
Цей токен дозволяє здійснювати телефонні дзвінки, надсилати повідомлення, здійснювати відеодзвінки або навіть ділитися самим токеном як контактом з іншими.
Якщо номер телефону людини змінюється, нам потрібно лише оновити значення токену, щоб відобразити новий номер, і всі пов’язані з ним функції автоматично використовуватимуть оновлене значення.
Паралель з чашкою кави
Ще однією простою паралеллю можуть бути 3 кавові чашки різного розміру, на кожній з яких надрукована етикетка із зазначенням об’єму в мілілітрах.
Використання токенів для позначення розмірів кавових чашок як малих, середніх та великих дозволяє легко регулювати кількість за потреби — це більш гнучкий та масштабований підхід.
Роль дизайн-токенів у дизайн-системах
Дизайн-токени - це зрозумілі людині крихітні модульні блоки, які об’єднуються разом, щоб створити гнучку, кастомізовану та готову до масштабування систему.
Спробуймо на прикладі зрозуміти, як використання модульних дизайн-токенів надає гнучкості та масштабованості дизайн-системам.
Припустимо, що ви обрали певний колір як основний або домінуючий і використовуєте його в різних компонентах, таких як кнопки, радіо, чекбокси, тогли, слайдери, степпери тощо.
А тпер у певний момент часу, коли ви вирішите обрати темніший відтінок основного кольору, вам доведеться вручну шукати відповідні значення в дизайн інструменті та відповідній кодовій базі, щоб замінити їх.
Використання стилів та змінних у Figma або інших інструментах дизайну та змінних у коді може впоратися з цією задачею і до певної міри розширити масштаб.
Але за допомогою одних лише стилів чи змінних неможливо вирішити інші складні завдання, наприклад, змінити основний колір лише в тих компонентах, де він використовується як фон — саме тут у гру вступають дизайн токени.
Дизайн-токени не обмежуються лише колірною системою, вони можуть містити все - від шрифтів або розмірних систем до ассетів.
Типи дизайн-токенів
Дизайн-токени насамперед мають 3 типи
Global токени
Global токени — це примітивні значення. Global токени позначають повний перелік усіх доступних варіантів у дизайн-системі. Global токени також відомі як base, options, choice або reference-токени.
Global токени представляють статичні значення, такі як hex-код кольору, розмір шрифту, інтервал тощо. Global токени є контекстнонезалежними і не мають жодного пов’язаного з ними явного сенсу або наміру.
Global токени можуть використовуватися безпосередньо або на них можуть посилатися інші типи токенів (псевдоніми (alias) або токени компонентів (component-tokens) у дизайн-системі.
Токени псевдонімів (alias-токени)
Токени псевдонімів - це контекстно-залежні та референсні global токени. Токени псевдонімів також відомі як семантичні токени.
Кожен токен псевдоніму має певний намір використання, значення і роль, пов’язану з ним. На відміну від глобальних токенів, токени псевдонімів з’являються саме в заздалегідь визначених контекстах або випадках.
Псевдоніми мають різну номенклатуру для різних категорій токенів, таких як кольори, шрифт, інтервали, анімація тощо.
Номенклатура для псевдонімів повинна бути достатньо абстрактною, щоб адаптувати різні значення, і достатньо змістовною, щоб пояснити намір або мету використання.
Використання псевдонімів забезпечує ефективне, гнучке і просте налаштування, оскільки значення глобальних токенів можна змінювати за потреби.
Токени для конкретних компонентів
Токени для конкретних компонентів, наочно містять і репрезентують унікальні та специфічні дизайнерські рішення, пов’язані з певним компонентом.
В ідеалі специфічні для компонента токени вказують на псевдоніми або глобальні токени.
Багаторівнева ієрархія дизайн-токенів
Глобальні, псевдоніми та специфічні для компонентів дизайн-токени можуть представляти різні рівні дизайн-токенів. Багаторівнева ієрархія дизайн-токенів забезпечує концепцію ізоляції та контролю в дизайн-системі.
Ізоляція посилається на те, наскільки незалежним є дизайн-токен. Рівень ізоляції визначає вплив, який кожне оновлення дизайн-токену матиме на всю дизайн-систему.
Глобальні токени містять універсальний вибір. Глобальні токени представляють високорівневі дизайн-рішення, а отже, не є ізольованими. Будь-які зміни, внесені до глобальних токенів, впливають на низку дизайн-рішень по всій дизайн-системі.
У наведеному вище прикладі оновлення глобального токена green_400 вплине на залежні від токенів-псевдонімів color_background_primary і color_border_primary дизайнерські рішення. Такі оновлення мають більший вплив у системі дизайну.
Токени псевдонімів мають особливе призначення та значення. Токени псевдонімів є дизайнерськими рішеннями середнього рівня і мають обмежену ізоляцію. Оновлення токенів псевдонімів відображатиметься у певних контекстах.
У наведеному вище прикладі оновлення color_background_primary або color_border_primary вплине лише на дизайн-рішення, залежні від токенів псевдонімів. Такі оновлення мають середній вплив на дизайн-систему.
Специфічні для компонента токени визначаються на рівні компонента і мають максимальну ізоляцію. Оновлення специфічного для компонента токена відобразиться лише у конкретному компоненті.
У наведеному вище прикладі оновлення button_color_background або button_color_icon вплине лише на дизайн-рішення конкретних компонентів. Такі оновлення мають незначний вплив на дизайн-систему.
Багаторівневі токени стають у нагоді для створення модульної та гнучкої дизайн-системи. Система розмірів, продемонстрована нижче, використовує багаторівневі токени для створення більш гнучкої та модульної системи інтервалів.
Багаторівневі токени забезпечують більший контроль над кастомізацією.
У наведеному вище прикладі дворівневий підхід з використанням токенів має обмежену гнучкість, оскільки оновлення псевдоніма space_md вплине на відступи як у діалогах, так і в компонентах пошуку.
Хоча 3-рівневий підхід до токенів є більш гнучким, оскільки токени інтервалів ізольовані на рівні компонентів, модифікація токена вплине лише на конкретний компонент.
Підсумок
Дизайн-токени — це модульні, платформонезалежні будівельні блоки дизайн-системи, які зберігають повторювані дизайн-рішення. Дизайн токени виступають у ролі єдиного джерела істини та забезпечують гнучкість і масштабованість дизайн-системи.
Дизайн-токени переважно бувають 3 типів, які можуть формувати багаторівневу ієрархію для створення більш контрольованих і гнучких дизайн-систем.
Використання дизайне-токенів замість захардкоджених значень забезпечує більш гнучкі дизайн-системи, які легко створювати, підтримувати та масштабувати.
Перекладач статті Nitish Khagwal — Design Tokens: Beginner’s Guide
