Была ли дизайн система на прошлом месте работы?

Опыт работы с дизайн-системой на прошлых проектах

Да, на моем предыдущем месте работы мы активно использовали и развивали дизайн-систему. Это была внутренняя система, которую мы называли "UI Kit Core". Она создавалась силами команды iOS- и Android-разработчиков в тесном сотрудничестве с дизайнерами и продуктовыми менеджерами. Основная цель её внедрения — унификация визуального языка приложения, ускорение разработки новых фич и повышение согласованности интерфейса на всех платформах (iOS, Android, Web).

Ключевые компоненты нашей дизайн-системы

Система включала в себя следующие основные модули:

1. Токены (Design Tokens):

    *   **Цвета:** Все палитры были вынесены в структурированную систему. Например, вместо хардкода `UIColor(red: 0.2, green: 0.4, blue: 0.6, alpha: 1.0)` мы использовали семантические токены.

```swift
// Пример определения токенов в коде
extension UIColor {
    static let primaryBrand = UIColor(named: "PrimaryBrand")!
    static let backgroundPrimary = UIColor(named: "BackgroundPrimary")!
    static let textPrimary = UIColor(named: "TextPrimary")!
    static let systemError = UIColor(named: "SystemError")!
}
```

    *   **Типографика:** Единая шкала текстовых стилей (TextStyle) с заранее заданными размерами, весом и межстрочными интервалами.

```swift
// Пример использования типографики
enum AppFont {
    case largeTitle, body, caption

    var font: UIFont {
        switch self {
        case .largeTitle:
            return UIFont.systemFont(ofSize: 34, weight: .bold)
        case .body:
            return UIFont.systemFont(ofSize: 17, weight: .regular)
        case .caption:
            return UIFont.systemFont(ofSize: 13, weight: .medium)
        }
    }
}
```

    *   **Размеры и отступы (Spacing):** Константная сетка (например, 8-пиксельный базовый модуль) для всех отступов, размеров кнопок, радиусов скруглений (`cornerRadius`).

1. Библиотека UI-компонентов (Component Library):

    *   Это была коллекция переиспользуемых, кастомизируемых и доступных (a11y) **UIKit**-компонентов. Каждый компонент был инкапсулирован в отдельный класс или структуру.
    *   **Примеры компонентов:**
        *   `PrimaryButton`, `SecondaryButton`, `GhostButton` с заранее заданными состояниями (normal, pressed, disabled).
        *   `TextField` с поддержкой всех состояний, валидацией и кастомными иконками.
        *   `CardView` с конфигурируемыми тенями, отступами и фоном.
        *   Модальные окна (`ModalController`) и системные алерты единого стиля.

```swift
// Упрощенный пример компонента кнопки из дизайн-системы
final class PrimaryButton: UIButton {

    enum Size { case large, medium, small }

    private let buttonSize: Size

    init(size: Size = .medium, title: String) {
        self.buttonSize = size
        super.init(frame: .zero)
        self.setTitle(title, for: .normal)
        setupAppearance()
    }

    private func setupAppearance() {
        backgroundColor = .primaryBrand
        setTitleColor(.white, for: .normal)
        titleLabel?.font = AppFont.body.font
        layer.cornerRadius = 8 // Используем токен из spacing

        // Настройка высоты в зависимости от размера
        switch buttonSize {
        case .large: heightAnchor.constraint(equalToConstant: 56).isActive = true
        case .medium: heightAnchor.constraint(equalToConstant: 44).isActive = true
        case .small: heightAnchor.constraint(equalToConstant: 32).isActive = true
        }
    }

    override var isHighlighted: Bool {
        didSet { backgroundColor = isHighlighted ? .primaryBrand.withAlphaComponent(0.8) : .primaryBrand }
    }
}
```

3. Система иконок (Icon Pack): Все иконки в приложении экспортировались из Figma в каталог символов (Assets.xcassets) с единым неймингом и в трех размерах (например, icon_arrow_left, icon_check_circle, icon_user_profile).

Процесс интеграции и преимущества

Дизайн-система была доставлена в виде отдельного приватного Swift Package. Это позволило:

• Версионировать изменения (семантическое версионирование 1.2.0).
• Легко обновлять её во всех проектах компании через зависимость в Package.swift.
• Изолировать код компонентов и гарантировать, что их изменения не сломают основное приложение.

Основные выгоды, которые мы получили:

• Скорость разработки: Создание нового экрана сводилось к композиции готовых, оттестированных блоков, а не к написанию верстки с нуля.
• Консистентность: Все приложения компании визуально соответствовали бренд-буку. Не возникало ситуации, когда кнопки на разных экранах выглядят по-разному.
• Простота тестирования: Компоненты покрывались Unit- и Snapshot-тестами, что повышало общую надежность UI.
• Эффективная коммуникация: У разработчиков и дизайнеров появился общий язык (имена компонентов и токенов). Дизайнеры работали в Figma, используя те же стили, что и в коде.

Вызовы, с которыми мы столкнулись:

• Баланс между гибкостью и единообразием: Иногда требовался уникальный компонент, не вписывающийся в систему. Мы решали это через обсуждение с дизайнерами — либо расширяли систему, либо осознанно шли на кастомную реализацию.
• Обновление в продакшене: Внедрение мажорных изменений (например, изменение основного цвета бренда) требовало тщательного планирования и постепенного миграционного пути, чтобы не шокировать пользователей.

В итоге, дизайн-система стала "единым источником правды" для всего UI в приложении, что значительно улучшило качество продукта и эффективность работы кросс-функциональной команды.