Что такое design system?

Что такое Design System?

Design system (система дизайна) — это комплексный набор стандартов, принципов, правил и готовых компонентов, который обеспечивает единообразие пользовательских интерфейсов во всех продуктах компании. Это не просто библиотека UI-компонентов, а целостная система, включающая дизайн-токены (цвета, типографика, отступы), паттерны взаимодействия, гайдлайны по доступности и документацию.

Основные компоненты

• UI-компоненты: кнопки, инпуты, модальные окна, таблицы и т.д.
• Дизайн-токены: переменные для цветов, шрифтов, отступов (например, --color-primary: #1890ff).
• Паттерны: повторяющиеся решения для типовых задач (навигация, формы, фильтры).
• Документация: правила использования, примеры кода, best practices.

Пример реализации на React

// Пример использования дизайн-токенов в CSS-in-JS
const theme = {
  colors: {
    primary: '#1890ff',
    background: '#f0f2f5',
  },
  spacing: (n) => `${n * 8}px`,
};

// Компонент кнопки из design system
const Button = styled.button`
  background: ${props => props.theme.colors.primary};
  padding: ${props => props.theme.spacing(2)} ${props => props.theme.spacing(4)};
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
`;

Где применяется

Design system используется в крупных проектах с несколькими командами разработчиков и дизайнеров. Она критически важна для продуктов, где требуется единый пользовательский опыт (например, корпоративные порталы, SaaS-платформы, мобильные приложения).

Вывод: Design system стоит внедрять, когда в компании есть несколько продуктов или команд, чтобы избежать разрозненности интерфейсов, ускорить разработку и упростить поддержку кода.