Compose 2025.1.27

©MIXI 2 MIXI Android / iOS / Flutter 2017 Android 2014 @oidy

UI 5

©MIXI 1. 4 val Gray = Color(0xFFCCCCCC) val LightGray = Color(0xFFEEEEEE)

©MIXI 2. 5

©MIXI 3. UI 6 @Composable fun UserIcon( uiState: UserScreenUiState ) @Composable fun PostButton( viewModel: PostScreenViewModel )

©MIXI 4. UI 7 @Composable fun UserIcon(...) @Composable fun UserIcon2(...) @Composable fun UserIcon3(...)

©MIXI 5. padding 8 16 - (48 - 18) / 2 = 1 Material Design 48 x 48 dp

©MIXI 9 minimo 3 2 1 Figma Figma Code Connect

minimo

©MIXI 11 https://minimodel.jp/about

©MIXI • • View Compose • Figma 12 app app : https://speakerdeck.com/oidy/regasina-android-apurinoriakitekutiyazhan-lue

Figma

©MIXI 14 Figma App Screen Screen A Screen B Library Components Styles UI ( )

©MIXI 15 app Figma App Screen Screen A Screen B feature:b feature:a

©MIXI 16 app Figma App Screen Screen A Screen B feature:b feature:a Library Components core:ui

©MIXI 17 app Figma feature:b feature:a Library Components Styles core:designsystem core:ui App Screen Screen A Screen B

©MIXI 18 app feature:b feature:a core:designsystem core:ui internal public Color, ColorScheme, Typography Theme core:ui Theme

©MIXI 19 Figma variables Kotlin internal val White = Color(0xFFFFFFFF) internal val Black = Color(0xFF1C1C1C) internal val lightColorScheme = lightColorScheme( surface = White, onSurface = Black, ) internal val darkColorScheme = darkColorScheme( surface = Black, onSurface = White, )

©MIXI 20 Kotlin internal val White = Color(0xFFFFFFFF) internal val Black = Color(0xFF1C1C1C) internal val lightColorScheme = lightColorScheme( surface = White, onSurface = Black, ) internal val darkColorScheme = darkColorScheme( surface = Black, onSurface = White, ) Material Color Scheme Color Scheme

©MIXI Color Scheme 21 internal data class MinimoColorScheme( val primaryVariant: Color, ) internal val lightMinimoColorScheme = MinimoColorScheme(BlueLight) internal val darkMinimoColorScheme = MinimoColorScheme(Blue) Material

©MIXI 22 internal val LocalMinimoColorScheme = staticCompositionLocalOf { lightMinimoColorScheme } CompositionLocal @Composable fun MinimoTheme(darkTheme: Boolean = isSystemInDarkTheme(), ...) { CompositionLocalProvider( LocalMinimoColorScheme provides if (darkTheme) { darkMinimoColorScheme } else { lightMinimoColorScheme }, ) { MaterialTheme(...) } } Theme

©MIXI 23 val ColorScheme.primaryVariant: Color @Composable @ReadOnlyComposable get() = LocalMinimoColorScheme.current.primaryVariant Extension Composable Text( text = text, color = MaterialTheme.colorScheme.primaryVariant, )

©MIXI 24 val ColorScheme.primaryVariant: Color @Composable @ReadOnlyComposable get() = LocalMinimoColorScheme.current.primaryVariant Extension Composable Text( text = text, color = MaterialTheme.colorScheme.primaryVariant, ) Theme

©MIXI 25 app feature:b feature:a core:designsystem core:ui

©MIXI UI 26 Buttons TextButton IconButton Chips FilterChip InputChip

©MIXI 27 Figma core:ui Buttons TextButton IconButton Chips Section Package FilterChip InputChip

©MIXI 28 Figma core:ui Buttons TextButton IconButton Chips Component Composable FilterChip InputChip

©MIXI 29 Figma core:ui Buttons TextButton text IconButton icon Properties Parameters Figma 1:1

Figma Code Connect

©MIXI Figma Code Connect Figma UI 2024 4 Compose, SwiftUI, React, HTML 31 @Composable fun Button(...) publish

©MIXI (2025 1 ) 32 Figma Code Connect Figma Dev Mode Relay Figma Organization or Enterprise Gradle Plugin & Library Figma Professional or Organization or Enterprise Figma Plugin Android Studio Plugin Ladybug Gradle Plugin Kotlin Plugin UI (JSON) Figma Figma Column, Row, Text build Composable

©MIXI UI 33 @FigmaConnect("https://www.figma.com/...") private class ButtonDoc { @FigmaProperty(FigmaType.Text, "text") private lateinit var text: String @FigmaProperty(FigmaType.Boolean, "enabled") private val enabled: Boolean = true @Composable private fun Example() { Button( onClick = {}, enabled = enabled, ) { Text(text = text) } } } URL Figma Property Boolean Text Enum Instance Compose Params Boolean String Enum Composable Figma

©MIXI UI 34 @FigmaConnect("https://www.figma.com/...") private class ButtonDoc { @FigmaProperty(FigmaType.Text, "text") private lateinit var text: String @FigmaProperty(FigmaType.Boolean, "enabled") private val enabled: Boolean = true @Composable private fun Example() { Button( onClick = {}, enabled = enabled, ) { Text(text = text) } } }

©MIXI UI 35 @FigmaConnect("https://www.figma.com/...") private class ButtonDoc { @FigmaProperty(FigmaType.Text, "text") private lateinit var text: String @FigmaProperty(FigmaType.Boolean, "enabled") private val enabled: Boolean = true @Composable private fun Example() { Button( onClick = {}, enabled = enabled, ) { Text(text = text) } } }

©MIXI : 36 @FigmaConnect(...) private class ButtonDoc { ... @Composable private fun Example() { if (enabled) { Button( onClick = {}, ) ... } else { Button( onClick = {}, enabled = enabled, ) ... } } }

©MIXI : Variant SwiftUI Code Connect hideDefault Compose 37 @FigmaConnect(...) @FigmaVariant("enabled", "false") private class DisabledButtonDoc { ... @Composable private fun Example() { Button( onClick = {}, enabled = false, ) ... } } @FigmaConnect(...) private class ButtonDoc { ... @Composable private fun Example() { Button( onClick = {}, ) ... } } enabled false

©MIXI UI 38

©MIXI : 39 ReservationHistoryMenu( ... price = "¥4,000", ) Figma Compose ( ) 1

©MIXI : 40 @FigmaProperty(FigmaType.Text, "price") private val price: Int = 0 ReservationHistoryMenu( ... price = "¥4,000", ) Int ( ) ReservationHistoryMenu( ... price = 4000, )

©MIXI UI Compose Preview publish CI 41 React "AI for prop mapping" Figma

©MIXI 42 minimo 3 2 1 Figma Figma Code Connect Figma : file, section, variable, component, property Compose : module, package, theme, composable, parameter Figma Figma UI