Дизайн-система

Дизайн-система — это комплексный набор стандартов, компонентов и правил, который обеспечивает единообразие визуального и функционального оформления продукта на всех платформах. Это не просто UI-кит или CSS-фреймворк, а полноценная «система» на стыке дизайна и кода.

Из чего состоит

Дизайн-система включает три ключевых уровня:

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

Два типа дизайн-систем

• Открытые — можно использовать сразу: Material Design (Google), Ant Design, Consta (НСПК).
• Внутренние — разрабатываются под нужды конкретной компании: VK, Альфа-Банк, Aviasales, Mail.ru.