Дизайн-токены (переменные): Что это и как использовать #ui

За последние шесть лет я работал продуктовым дизайнером над несколькими крупными и сложными продуктами — и для каждого из них создавал собственный набор компонентов с нуля. Сейчас я работаю над большой и довольно сложной платформой для оценки кредитных рисков, и в рамках этого проекта мне нужно было разработать дизайн-систему. Ранее у меня не было опыта создания полноценной дизайн-системы, поэтому пришлось учиться прямо в процессе. И теперь я хочу поделиться несколькими практическими советами, как подойти к этому делу. Иногда, кстати, оказывается, что не стоит изобретать велосипед — проще взять уже готовую библиотеку компонентов (например, Material UI), немного подстроить под себя и сэкономить кучу времени и нервов. Шаг первый. Начни с вопроса «зачем». Разбериcь, зачем вообще тебе нужна дизайн-система — какие проблемы она решает, что должно в нее входить и как она должна быть устроена (например, гайдлайны и UI-кит). Чтобы это определить, нужно обсудить всё с командой, посмотреть примеры, почитать статьи, посоветоваться с коллегами. Также стоит подумать наперёд — какие функции появятся в будущем и как система сможет подстроиться под эти изменения. Шаг второй. Проведи аудит продукта. Пройди по интерфейсу и зафиксируй все компоненты, ключевые паттерны, шрифты, цвета, иконки, брейкпоинты. Это поможет понять, из чего на самом деле состоит продукт, убрать дубли и несоответствия и выявить, чего не хватает. Шаг третий. Определи дизайн-токены. Это строительные блоки библиотеки компонентов — цвета, типографика, отступы, радиусы и т. д. Количество и структура токенов сильно зависят от продукта, поэтому универсального подхода здесь нет — нужно подбирать всё индивидуально. Шаг четвёртый. Создай UI-кит. Делай это постепенно и системно — не спеши (даже если мир рушится и дедлайн завтра). Этот этап требует терпения, но в будущем оно окупится. Шаг пятый. Напиши гайдлайны. Если нужно, зафиксируй правила прямо в файле с UI-китом или создай отдельный документ — главное, определить формат в самом начале. Шаг шестой. Используй и улучшай. Предусмотреть всё заранее невозможно, поэтому правки и доработки — это нормально. Именно так дизайн-системы и развиваются. Это ключевые шаги. Но самое важное — помнить, что дизайн-система всегда создаётся командой. Это совместная работа, которую вы строите, обсуждаете и улучшаете вместе. Примеры дизайн-систем Material UI Guidelines:
Gravity UI (спасибо @sickomode8130):
MUI
Полезная статья
Обучение по UX/UI Design 👉
Консультации 👉
#ux #design #tokens #figma #designprocess #uidesign #uxuidesign #ui #designprocess #figma #interface #designprocess #design #creative #figma #research #howtodesign #learnux #designthinking #userexperience #userinterface #prototyping #digitaldesign