Организация компонентов в UI-Kit. Реальная практика
Реальный пример организации компонентов в UI-Kit.(дизайн-система) для большого продукта.
#ux #figma #designprocess #ui #design #uidesignlearning #webdesign
За последние шесть лет я работал продуктовым дизайнером над несколькими крупными и сложными продуктами — и для каждого из них создавал собственный набор компонентов с нуля. Сейчас я работаю над большой и довольно сложной платформой для оценки кредитных рисков, и в рамках этого проекта мне нужно было разработать дизайн-систему. Ранее у меня не было опыта создания полноценной дизайн-системы, поэтому пришлось учиться прямо в процессе. И теперь я хочу поделиться несколькими практическими советами, как подойти к этому делу. Иногда, кстати, оказывается, что не стоит изобретать велосипед — проще взять уже готовую библиотеку компонентов (например, Material UI), немного подстроить под себя и сэкономить кучу времени и нервов.
Шаг первый. Начни с вопроса «зачем».
Разбериcь, зачем вообще тебе нужна дизайн-система — какие проблемы она решает, что должно в нее входить и как она должна быть устроена (например, гайдлайны и UI-кит).
Чтобы это определить, нужно обсудить всё с командой, посмотреть примеры, почитать статьи, посоветоваться с коллегами. Также стоит подумать наперёд — какие функции появятся в будущем и как система сможет подстроиться под эти изменения.
Шаг второй. Проведи аудит продукта.
Пройди по интерфейсу и зафиксируй все компоненты, ключевые паттерны, шрифты, цвета, иконки, брейкпоинты. Это поможет понять, из чего на самом деле состоит продукт, убрать дубли и несоответствия и выявить, чего не хватает.
Шаг третий. Определи дизайн-токены.
Это строительные блоки библиотеки компонентов — цвета, типографика, отступы, радиусы и т. д. Количество и структура токенов сильно зависят от продукта, поэтому универсального подхода здесь нет — нужно подбирать всё индивидуально.
Шаг четвёртый. Создай UI-кит.
Делай это постепенно и системно — не спеши (даже если мир рушится и дедлайн завтра). Этот этап требует терпения, но в будущем оно окупится.
Шаг пятый. Напиши гайдлайны.
Если нужно, зафиксируй правила прямо в файле с UI-китом или создай отдельный документ — главное, определить формат в самом начале.
Шаг шестой. Используй и улучшай.
Предусмотреть всё заранее невозможно, поэтому правки и доработки — это нормально. Именно так дизайн-системы и развиваются.
Это ключевые шаги. Но самое важное — помнить, что дизайн-система всегда создаётся командой. Это совместная работа, которую вы строите, обсуждаете и улучшаете вместе.