Как бы выглядела дизайн система в твоем проекте

Архитектура дизайн-системы в проекте Android

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

Ядро системы: модуль design-system

Дизайн-система реализуется как отдельный Android Library модуль в Gradle Multi-module проекте.

// build.gradle.kts модуля design-system
plugins {
    id("com.android.library")
    id("org.jetbrains.kotlin.android")
}

dependencies {
    // Базовые зависимости
    implementation("androidx.core:core-ktx:1.12.0")
    implementation("androidx.compose.ui:ui:1.6.0")
    // Материал 3 для современных компонентов
    implementation("androidx.compose.material3:material3:1.2.0")
}

Ключевые компоненты системы

1. Темы и стили (Theming)

Централизованное управление цветами, типографикой и формами через Compose Theme и ресурсы.

// DesignSystemTheme.kt
object DesignSystemTheme {
    // Цветовая палитра
    val PrimaryColor = Color(0xFF6750A4)
    val SecondaryColor = Color(0xFFE6E1E5)
    val ErrorColor = Color(0xFFB00020)

    // Типографика
    val HeadingFont = FontFamily(Font(R.font.roboto_bold))
    val BodyFont = FontFamily(Font(R.font.roboto_regular))

    // Формы (Shape)
    val SmallComponentShape = RoundedCornerShape(8.dp)
    val LargeComponentShape = RoundedCornerShape(16.dp)
}

// Использование в Compose
@Composable
fun AppTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = ColorScheme(
            primary = DesignSystemTheme.PrimaryColor,
            secondary = DesignSystemTheme.SecondaryColor,
            error = DesignSystemTheme.ErrorColor
        ),
        typography = Typography(
            h1 = TextStyle(
                fontFamily = DesignSystemTheme.HeadingFont,
                fontSize = 24.sp
            ),
            bodyLarge = TextStyle(
                fontFamily = DesignSystemTheme.BodyFont,
                fontSize = 16.sp
            )
        ),
        shapes = Shapes(
            small = DesignSystemTheme.SmallComponentShape,
            large = DesignSystemTheme.LargeComponentShape
        ),
        content = content
    )
}

2. UI компоненты (Components)

Создание переиспользуемых компонентов с четкой контрактной логикой.

// PrimaryButton.kt
@Composable
fun PrimaryButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    isLoading: Boolean = false
) {
    Button(
        onClick = onClick,
        modifier = modifier.height(48.dp),
        enabled = enabled && !isLoading,
        colors = ButtonDefaults.buttonColors(
            containerColor = DesignSystemTheme.PrimaryColor
        )
    ) {
        if (isLoading) {
            CircularProgressIndicator(color = Color.White)
        } else {
            Text(text = text, style = MaterialTheme.typography.labelLarge)
        }
    }
}

3. Состояния и взаимодействия (States)

Стандартизация состояний компонентов: loading, success, error, disabled.

// Состояния для списков
enum class ContentState {
    LOADING, SUCCESS, ERROR, EMPTY
}

@Composable
fun StatefulList(
    state: ContentState,
    onRetry: () -> Unit,
    content: @Composable () -> Unit
) {
    when (state) {
        ContentState.LOADING -> FullScreenLoading()
        ContentState.SUCCESS -> content()
        ContentState.ERROR -> ErrorView(onRetry)
        ContentState.EMPTY -> EmptyStateView()
    }
}

Организация и документация

• Структура модуля:

    - `/theme` — темы, цвета, типографика, формы
    - `/components` — переиспользуемые UI компоненты
    - `/states` — стандартные состояния и паттерны
    - `/icons` — векторные и drawable ресурсы
    - `/utils` — расширения и вспомогательные функции

• Документация:

    - Используем **Dokka** для генерации документации из KDoc
    - Создаем `README.md` с примерами использования
    - Ведем Figma библиотеку для дизайнеров

Интеграция в проект

// build.gradle.kts основного модуля
dependencies {
    implementation(project(":design-system"))
}

// Использование в Activity
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme { // Наша тема из дизайн-системы
                PrimaryButton(
                    text = "Submit",
                    onClick = { /* действие */ }
                )
            }
        }
    }
}

Преимущества такого подхода

1. Согласованность интерфейса: Все модули приложения используют единые компоненты.
2. Скорость разработки: Готовые компоненты сокращают время на создание UI.
3. Легкое обновление: Изменения в дизайн-системе автоматически применяются во всем приложении.
4. Сокращение ошибок: Стандартизация уменьшает вероятность UI багов.
5. Масштабируемость: Новые компоненты легко добавляются в систему.

Поддержка и версионирование

Дизайн-система имеет собственное версионирование (semantic versioning). Все изменения документируются в changelog. Для больших проектов можно создать Design System Team, состоящий из разработчиков и дизайнеров, который курирует развитие системы.

Таким образом, дизайн-система становится не просто набором компонентов, а живой экосистемой, которая эволюционирует вместе с продуктом, обеспечивая техническую и дизайнерскую гармонию на всех уровнях приложения.