Зачем заново создавать каждую кнопку, форму и сообщение об ошибке, если другие команды уже задокументировали эти решения? Дизайн-системы предлагают общую основу для создания согласованных интерфейсов.
Больше, чем набор компонентов
В подборке на ShadcnDeck Ash сравнивает десять открытых систем: shadcn/ui, Ant Design, Fluent UI, Material Design 3, IBM Carbon, GitHub Primer, AWS Cloudscape, GOV.UK, Gestalt и PatternFly.
Их ценность не ограничивается внешним видом: цвета, отступы, типографика, компоненты и рекомендации по доступности формируют общий язык.
Выбирать под задачи продукта
- shadcn/ui: код, который добавляется непосредственно в проект и требует адаптации и сопровождения.
- Ant Design и Cloudscape: варианты для интерфейсов с большим количеством данных.
- Carbon и Fluent UI: ориентиры для корпоративных продуктов.
- GOV.UK: ориентир для форм и государственных сервисов.
Автор разграничивает свободу изменения кода и преимущества библиотеки, которую поддерживают совместно. Он также рекомендует проверять активность проекта, а не ориентироваться только на популярность.
А что насчёт Figma?
Figma — инструмент для проектирования. В нём можно хранить макеты и компоненты дизайн-системы, но сам по себе он не определяет правила продукта.
Мой взгляд
На мой взгляд, начать стоит с небольшого списка явно сформулированных решений: цвета, ритм отступов, ссылки, формы и состояния фокуса. Готовая основа может ускорить работу, но её всё равно нужно адаптировать к продукту и проверить на доступность.
А вы предпочитаете адаптировать готовую основу или постепенно создавать собственную систему?