Дизайн-токены: Что это и как использовать

За последние шесть лет я работал продуктовым дизайнером над несколькими крупными и сложными продуктами — и для каждого из них создавал собственный набор компонентов с нуля. Сейчас я работаю над большой и довольно сложной платформой для оценки кредитных рисков, и в рамках этого проекта мне нужно было разработать дизайн-систему. Ранее у меня не было опыта создания полноценной дизайн-системы, поэтому пришлось учиться прямо в процессе. И теперь я хочу поделиться несколькими практическими советами, как подойти к этому делу. Иногда, кстати, оказывается, что не стоит изобретать велосипед — проще взять уже готовую библиотеку компонентов (например, Material UI), немного подстроить под себя и сэкономить кучу времени и нервов.

Шаг первый. Начни с вопроса «зачем».
Разбериcь, зачем вообще тебе нужна дизайн-система — какие проблемы она решает, что должно в нее входить и как она должна быть устроена (например, гайдлайны и UI-кит). Чтобы это определить, нужно обсудить всё с командой, посмотреть примеры, почитать статьи, посоветоваться с коллегами. Также стоит подумать наперёд — какие функции появятся в будущем и как система сможет подстроиться под эти изменения.

Шаг второй. Проведи аудит продукта.
Пройди по интерфейсу и зафиксируй все компоненты, ключевые паттерны, шрифты, цвета, иконки, брейкпоинты. Это поможет понять, из чего на самом деле состоит продукт, убрать дубли и несоответствия и выявить, чего не хватает.

Шаг третий. Определи дизайн-токены.
Это строительные блоки библиотеки компонентов — цвета, типографика, отступы, радиусы и т. д. Количество и структура токенов сильно зависят от продукта, поэтому универсального подхода здесь нет — нужно подбирать всё индивидуально.

Шаг четвёртый. Создай UI-кит.
Делай это постепенно и системно — не спеши (даже если мир рушится и дедлайн завтра). Этот этап требует терпения, но в будущем оно окупится.

Шаг пятый. Напиши гайдлайны.
Если нужно, зафиксируй правила прямо в файле с UI-китом или создай отдельный документ — главное, определить формат в самом начале.

Шаг шестой. Используй и улучшай.
Предусмотреть всё заранее невозможно, поэтому правки и доработки — это нормально. Именно так дизайн-системы и развиваются.
Это ключевые шаги. Но самое важное — помнить, что дизайн-система всегда создаётся командой. Это совместная работа, которую вы строите, обсуждаете и улучшаете вместе.

Примеры дизайн-систем
Material UI Guidelines: https://mui.com/material-ui/integrati...
Gravity UI (спасибо @sickomode8130): https://gravity-ui.com
MUI https://mui.com

Полезная статья
https://uxdesign.cc/design-system-fig...

Обучение по UX/UI Design 👉 https://opendesignschool.webflow.io/

#ux #design #tokens #figma #designprocess #uidesign #uxuidesign #ui #designprocess #figma #interface #designprocess #design #creative #figma #research #howtodesign #learnux #designthinking #userexperience #userinterface #prototyping #digitaldesign