Перейти до вмісту

Побудувала дизайн‑систему з 48 токенів на основі власного скляного матеріалу платформи й написала лінтер, який відхиляє магічне число, жорстко заданий розмір шрифту чи анімацію, що ігнорує налаштування зменшеного руху.

48 токенів дизайну — і лінтер, що їх захищає

Ситуація. Інтерфейс, який будують, додаючи представлення (view) одне за одним, накопичує значення: тут радіус заокруглення, там шрифт у чотирнадцять пунктів, ще деінде — анімація на дві десятих секунди. Кожне окремо цілком розумне, але разом вони дають дизайн, який неможливо змінити, бо немає одного «радіуса заокруглення», який можна було б змінити, — їх сорок, трохи різних, розкиданих по п’ятдесяти файлах.

Завдання. Візуальний словник треба було звести до набору іменованих значень, виражених через власні матеріали платформи, а не винайдених заново, і захистити перевіркою, щоб він знову не розрісся.

Дія. Система складається із сорока восьми токенів у шести групах: відступи, типографіка, колір, радіус, висота (elevation) і рух. Колір і матеріал побудовано на семантичних кольорах платформи та її скляному матеріалі, а не на фіксованих значеннях, і саме завдяки цьому інтерфейс підлаштовується під системний вигляд, акцентний колір і налаштування контрасту без жодного коду, який би за ними стежив. Типографіку прив’язано до текстових стилів платформи, тож вона масштабується відповідно до вибраного користувачем розміру тексту, а не фіксує значення в пунктах. Лінтер відхиляє три речі: числовий літерал там, де має бути токен відступу чи радіуса, жорстко заданий кегль будь‑де та анімацію, оголошену без урахування налаштування зменшення руху. Саме третю вимогу без лінтера почали б порушувати найшвидше, бо анімацію додають під час фінального шліфування, і пропускають якраз перевірку налаштування, — тож правило не дає навіть написати анімацію без такої перевірки, а не покладається на чиюсь пам’ять.

Результат. Сорок вісім токенів описують увесь інтерфейс, вигляд підлаштовується під систему, і жодне з трьох порушень не можна закомітити. Обмеження в тому, що система токенів забезпечує узгодженість, а не якість: тепер усе узгоджено, але узгодженість — не те саме, що добрий дизайн, а такого судження не виносить жоден лінтер у цьому проєкті.

Одна частина довшого переліку — і він увесь на цьому сайті.

Кожен запис написано однаково: ситуація, завдання, що ми зробили і що змінилося.

Переглянути весь перелік