Дизайн-система для большого продукта. Обзор процесса создания #uxuidesign #designsystem #figma #ux

Дизайн-система — это комплексный набор стандартов, правил, компонентов и инструментов, который помогает создавать единообразные и удобные интерфейсы. Она объединяет визуальный стиль, компоненты UI, принципы UX и код, обеспечивая целостность дизайна и удобство разработки. В видео коротко рассказывается как создается система для большого продукта. За последние шесть лет я работал продуктовым дизайнером над несколькими крупными и сложными продуктами — и для каждого из них создавал собственный набор компонентов с нуля. Сейчас я работаю над большой и довольно сложной платформой для оценки кредитных рисков, и в рамках этого проекта мне нужно было разработать дизайн-систему. Ранее у меня не было опыта создания полноценной дизайн-системы, поэтому пришлось учиться прямо в процессе. И теперь я хочу поделиться несколькими практическими советами, как подойти к этому делу. Иногда, кстати, оказывается, что не стоит изобретать велосипед — проще взять уже готовую библиотеку компонентов (например, Material UI), немного подстроить под себя и сэкономить кучу времени и нервов. Шаг первый. Начни с вопроса «зачем». Разбериcь, зачем вообще тебе нужна дизайн-система — какие проблемы она решает, что должно в нее входить и как она должна быть устроена (например, гайдлайны и UI-кит). Чтобы это определить, нужно обсудить всё с командой, посмотреть примеры, почитать статьи, посоветоваться с коллегами. Также стоит подумать наперёд — какие функции появятся в будущем и как система сможет подстроиться под эти изменения. Шаг второй. Проведи аудит продукта. Пройди по интерфейсу и зафиксируй все компоненты, ключевые паттерны, шрифты, цвета, иконки, брейкпоинты. Это поможет понять, из чего на самом деле состоит продукт, убрать дубли и несоответствия и выявить, чего не хватает. Шаг третий. Определи дизайн-токены. Это строительные блоки библиотеки компонентов — цвета, типографика, отступы, радиусы и т. д. Количество и структура токенов сильно зависят от продукта, поэтому универсального подхода здесь нет — нужно подбирать всё индивидуально. Шаг четвёртый. Создай UI-кит. Делай это постепенно и системно — не спеши (даже если мир рушится и дедлайн завтра). Этот этап требует терпения, но в будущем оно окупится. Шаг пятый. Напиши гайдлайны. Если нужно, зафиксируй правила прямо в файле с UI-китом или создай отдельный документ — главное, определить формат в самом начале. Шаг шестой. Используй и улучшай. Предусмотреть всё заранее невозможно, поэтому правки и доработки — это нормально. Именно так дизайн-системы и развиваются. Это ключевые шаги. Но самое важное — помнить, что дизайн-система всегда создаётся командой. Это совместная работа, которую вы строите, обсуждаете и улучшаете вместе. Статьи по теме https://medium.com/razorpay-design/organising-design-systems-3f191c4e00c0 https://medium.com/doctolib/figma-files-organizations-tips-from-the-doctolib-team-a8eee7aec170 https://medium.com/@RATP_Smart_Systems/how-user-flows-became-the-core-of-our-powerful-filing-system-in-figma-c6c49a5b3eba https://uxdesign.cc/design-system-figma-variables-f3d9c4351bcc ----------------------------------- Я — Александр Волошин, занимаюсь дизайном с 2000-го года, прошел путь от веб-дизайнера на фрилансе до позиции Senior UX Designer в компании Prom.ua. Делюсь знаниями и занимаюсь обучением с 2012-го года, делаю сложные проекты, обучаю методике проектирования сайтов и моб. приложений. Обучение по UX/UI Design 👉 https://opendesignschool.webflow.io/ #design #ux #ui #web #development #designprocess #creative #figma #uxuidesign #ui #designprocess #figma #interface #designprocess #design #creative #figma #research #howtodesign #learnux #designthinking #userexperience #userinterface #prototyping #digitaldesign