Дизайн-система Kite: путь от «порядка» к «воздушному змею»

В сфере искусственного интеллекта произошло заметное событие. Kursor 2 минуты назад Дизайн-система Kite: путь от «порядка» к «воздушному змею» Простой 12 мин 1 Блог компании Туту Управление разработкой * Искусственный интеллект Дизайн Веб-разработка * Кейс Привет! С 2023 года я отвечаю за технику и архитектуру дизайн-системы в Туту, а с 2025 — возглавляю саму команду. За это время я понял: дизайн-система — это сложный и местами болезненный компромисс между кодом, дизайном и бизнесом.

Написать гибкие компоненты и собрать UI-кит — лишь 20% успеха. Остальные 80% — это долгие детальные переговоры и поиск точек соприкосновения. Продуктовые команды тоже хотят делать качественный продукт, но их главный ресурс — время.

Технические детали

В этой статье я расскажу про наш нетривиальный путь: как мы от проектирования архитектуры компонентов пришли к договору о базовых правилах игры и сделали так, чтобы дизайн-система действительно помогала командам ехать быстрее, а не воспринималась как обуза. Тут небольшое ЧаВо для тех, кто не очень погружён в мир дизайн-систем. (все зеленое под кат)Что такое дизайн-системаДизайн-система — единая система из дизайнерско-технических решений, которая позволяет создавать, изменять внешний вид и базовую функциональность: поведение, анимацию приложений за счет набора стандартов, правил и связанных зависимостей.

Основная цель дизайн-системы — сделать так, чтобы разделенные команды одной компании создавали единые с точки зрения стилистики решения в своих продуктах и делали UX бесшовным. Второстепенная, но также важная цель — снижать стоимость на воспроизведение и сопровождение элементов дизайн-системы. Кому нужна дизайн-системаКомпаниям, где есть 1+n продуктов и продуктовых команд, у которых должен быть общий UI/UX — дизайн система необходима, а вот небольшим компаниям/командам, где все UI/UX решения решаются и имплементируются небольшой группой человек она точно без надобности.

Таким командам отлично подойдет обычный UI-kit в разработке и его несвязанное отображение в компонентах Фигмы. Какие бывают дизайн-системыДизайн-системы, как правило бывают двух типов:Общего назначения — такие как Ant Design или Material Design, они универсальны и нацелены на широкую группу потребителей. Специализированные — дизайн-системы, которые создаются внутри организаций для использования исключительно в рамках этой организации.

Отраслевые последствия

Все фичи опираются на потребности узкой группы потребителей. Какая дизайн-система подойдёт именно вамЯ выявил достаточно точные принципы, которые позволят определиться с выбором дизайн-системы. Дизайн-системы общего назначения:1) Вы делаете MVP и вам важна скорость.

Потом можно хоть целиком переделать проект. 2) Вы делаете админку и внешний вид и единообразие не ваши основные критерии/метрики. 3) Вам нормально зависеть от опенсорс-решения, когда развитие, поддержка и/или доступность могут свернуться.

4) Не планируете делать какие-то уникальные штуки, что-либо переделывать под капотом. Специализированные дизайн-системы:1) Продуктовые решения в вашей компании должны быть единообразны.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.