Compose Multiplatform Design Systems: A Comprehensive Guide

Jetpack Compose has revolutionized Android UI development, and now, with Compose Multiplatform, its reach extends to iOS, web, desktop, and more. Building a consistent and maintainable UI across multiple platforms necessitates a robust design system. This article delves into how to implement a design system within a Compose Multiplatform project, leveraging the power and flexibility of Jetpack Compose to ensure visual harmony and code reusability across all your target platforms.

What is a Design System?

A design system is a comprehensive set of guidelines, components, and patterns that help in creating a consistent user experience across different products and platforms. It typically includes:

  • Style Guide: Defines the visual aspects like colors, typography, and spacing.
  • Component Library: Reusable UI elements such as buttons, text fields, and navigation bars.
  • Design Principles: Underlying philosophies guiding design decisions.
  • Documentation: Guidelines on how to use the design system effectively.

Why Use a Design System in a Compose Multiplatform Project?

  • Consistency: Ensures a uniform look and feel across all platforms.
  • Reusability: Allows components to be reused, reducing development time and effort.
  • Maintainability: Simplifies updates and changes to the UI.
  • Collaboration: Provides a shared language and framework for designers and developers.

Setting Up a Design System in Compose Multiplatform

To set up a design system in a Compose Multiplatform project, we will focus on three main aspects: theming, component creation, and documentation.

Step 1: Project Setup

First, create a new Compose Multiplatform project using the Kotlin Multiplatform wizard in IntelliJ IDEA or Android Studio. Choose the platforms you want to target (e.g., Android, iOS, Desktop, Web).

Step 2: Theming

Theming is central to defining the visual style of your application. Compose provides a powerful theming system using MaterialTheme.

Create a common module (e.g., :shared) where you will define your theme. Here’s how to define your custom theme:


// In the commonMain source set (e.g., :shared:src:commonMain:kotlin)

import androidx.compose.material.MaterialTheme
import androidx.compose.material.Typography
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

// Define your color palette
private val PrimaryColor = Color(0xFF6200EE)
private val PrimaryVariantColor = Color(0xFF3700B3)
private val SecondaryColor = Color(0xFF03DAC5)

// Define light color palette
private val LightColorPalette = lightColors(
    primary = PrimaryColor,
    primaryVariant = PrimaryVariantColor,
    secondary = SecondaryColor
)

// Define typography
private val AppTypography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
)

// Custom App Theme
@Composable
fun AppTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = LightColorPalette,
        typography = AppTypography,
        content = content
    )
}

Use the AppTheme in your platform-specific code:


// Example usage in Android
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.window.Application
import com.example.myapplication.shared.AppTheme

fun main() {
    Application {
        AppTheme {
            // Your Composable content here
        }
    }
}

Step 3: Component Library

Create reusable UI components in the common module. These components should be designed to work seamlessly across all platforms.

Example of a custom button component:


import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun AppButton(
    text: String,
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier.padding(8.dp)
    ) {
        Text(text = text)
    }
}

Using the AppButton component in platform-specific code:


// Example Usage
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun MyScreen() {
    val count = remember { mutableStateOf(0) }

    Column {
        Text(text = "Count: ${count.value}")
        AppButton(text = "Increment") {
            count.value++
        }
    }
}

Step 4: Platform-Specific Adjustments

While the goal is to have a consistent UI, sometimes platform-specific adjustments are necessary. Use Kotlin’s expect and actual mechanism to handle platform-specific implementations.


// In commonMain
expect fun platformSpecificFunction(): String

// In androidMain
actual fun platformSpecificFunction(): String = "Android"

// In iosMain
actual fun platformSpecificFunction(): String = "iOS"

Leverage this to adjust layouts, font sizes, or colors if needed.

Step 5: Iconography

For icons, you can use Vector Drawables (.xml) in Android. For other platforms, convert them to a compatible format or use a library like Font Awesome that provides cross-platform support.


// Example usage with resource files for icons
import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource

@Composable
fun AppIcon() {
    Image(
        painter = painterResource("drawable/ic_app_icon.xml"), // For Android
        contentDescription = "App Icon"
    )
}

Step 6: Spacing and Layout

Define consistent spacing using Dp values and reusable composables for common layouts. Ensure your layouts adapt to different screen sizes using adaptive design principles.


import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun VerticalSpacer(height: Dp = 8.dp) {
    Spacer(modifier = Modifier.height(height))
}

Step 7: Documentation

Create clear documentation for your design system. Use tools like Markdown or a dedicated documentation generator to create guidelines and examples. Include information about:

  • Color palettes
  • Typography
  • Component usage
  • Layout principles

Keep the documentation up-to-date with the design system.

Example: Complete Design System Component

Let’s create a complete example of a card component that incorporates theming, spacing, and consistent styling.


import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// Reusable vertical spacer
@Composable
fun VerticalSpacer(height: Dp = 8.dp) {
    Spacer(modifier = Modifier.height(height))
}

// Custom Card Component
@Composable
fun AppCard(
    title: String,
    content: String
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = 4.dp
    ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(
                text = title,
                style = TextStyle(
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.primary
                )
            )
            VerticalSpacer()
            Text(
                text = content,
                style = TextStyle(
                    fontSize = 16.sp,
                    color = Color.Black
                )
            )
        }
    }
}

Usage of AppCard:


import androidx.compose.runtime.Composable

@Composable
fun HomeScreen() {
    Column {
        AppCard(
            title = "Welcome!",
            content = "This is a demo card component."
        )
    }
}

Conclusion

Building a design system in a Compose Multiplatform project ensures consistency, reusability, and maintainability across all targeted platforms. By implementing theming, creating reusable components, handling platform-specific adjustments, and maintaining clear documentation, you can significantly enhance the user experience and streamline the development process. Leveraging Jetpack Compose’s flexibility and power makes creating cross-platform UIs not only feasible but also enjoyable and efficient.

Beyond This Article: Your Next Discovery Awaits

AnimateColorAsState Usage in Jetpack Compose: A Complete Guide
Compose Multiplatform CI: Automating Jetpack Compose Projects
Jetpack Compose: Image Composable and Efficient Loaders
Compose Multiplatform UI: Building Shared UI Components with Jetpack Compose
State Hoisting in Jetpack Compose: A Comprehensive Guide
Nested Scroll Interop: Seamlessly Integrating Jetpack Compose with Traditional Views
Tagged with , , , , , , , , ,