Compose でデザインと実装の差異を減らすための取り組み

2025/1/27 開催「Composeを用いたAndroidアプリ開発のハマりどころ」の登壇資料です。
https://newmo-tech.connpass.com/event/339846/

Transcript

1. Compose 2025.1.27
2. ©MIXI 2 MIXI Android / iOS / Flutter 2017 Android 2014 @oidy
3. UI 5
4. ©MIXI 1. 4 val Gray = Color(0xFFCCCCCC) val LightGray = Color(0xFFEEEEEE)
5. ©MIXI 2. 5
6. ©MIXI 3. UI 6 @Composable fun UserIcon( uiState: UserScreenUiState ) @Composable fun PostButton( viewModel: PostScreenViewModel )
7. ©MIXI 4. UI 7 @Composable fun UserIcon(...) @Composable fun UserIcon2(...) @Composable fun UserIcon3(...)
8. ©MIXI 5. padding 8 16 - (48 - 18) / 2 = 1 Material Design 48 x 48 dp
9. ©MIXI 9 minimo 3 2 1 Figma Figma Code Connect
10. minimo
11. ©MIXI 11 https://minimodel.jp/about
12. ©MIXI • • View Compose • Figma 12 app app : https://speakerdeck.com/oidy/regasina-android-apurinoriakitekutiyazhan-lue
13. Figma
14. ©MIXI 14 Figma App Screen Screen A Screen B Library Components Styles UI ( )
15. ©MIXI 15 app Figma App Screen Screen A Screen B feature:b feature:a
16. ©MIXI 16 app Figma App Screen Screen A Screen B feature:b feature:a Library Components core:ui
17. ©MIXI 17 app Figma feature:b feature:a Library Components Styles core:designsystem core:ui App Screen Screen A Screen B
18. ©MIXI 18 app feature:b feature:a core:designsystem core:ui internal public Color, ColorScheme, Typography Theme core:ui Theme
19. ©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, )
20. ©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
21. ©MIXI Color Scheme 21 internal data class MinimoColorScheme( val primaryVariant: Color, ) internal val lightMinimoColorScheme = MinimoColorScheme(BlueLight) internal val darkMinimoColorScheme = MinimoColorScheme(Blue) Material
22. ©MIXI 22 internal val LocalMinimoColorScheme = staticCompositionLocalOf { lightMinimoColorScheme } CompositionLocal @Composable fun MinimoTheme(darkTheme: Boolean = isSystemInDarkTheme(), ...) { CompositionLocalProvider( LocalMinimoColorScheme provides if (darkTheme) { darkMinimoColorScheme } else { lightMinimoColorScheme }, ) { MaterialTheme(...) } } Theme
23. ©MIXI 23 val ColorScheme.primaryVariant: Color @Composable @ReadOnlyComposable get() = LocalMinimoColorScheme.current.primaryVariant Extension Composable Text( text = text, color = MaterialTheme.colorScheme.primaryVariant, )
24. ©MIXI 24 val ColorScheme.primaryVariant: Color @Composable @ReadOnlyComposable get() = LocalMinimoColorScheme.current.primaryVariant Extension Composable Text( text = text, color = MaterialTheme.colorScheme.primaryVariant, ) Theme
25. ©MIXI 25 app feature:b feature:a core:designsystem core:ui
26. ©MIXI UI 26 Buttons TextButton IconButton Chips FilterChip InputChip
27. ©MIXI 27 Figma core:ui Buttons TextButton IconButton Chips Section Package FilterChip InputChip
28. ©MIXI 28 Figma core:ui Buttons TextButton IconButton Chips Component Composable FilterChip InputChip
29. ©MIXI 29 Figma core:ui Buttons TextButton text IconButton icon Properties Parameters Figma 1:1
30. Figma Code Connect
31. ©MIXI Figma Code Connect Figma UI 2024 4 Compose, SwiftUI, React, HTML 31 @Composable fun Button(...) publish
32. ©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
33. ©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
34. ©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) } } }
35. ©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) } } }
36. ©MIXI : 36 @FigmaConnect(...) private class ButtonDoc { ... @Composable private fun Example() { if (enabled) { Button( onClick = {}, ) ... } else { Button( onClick = {}, enabled = enabled, ) ... } } }
37. ©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
38. ©MIXI UI 38
39. ©MIXI : 39 ReservationHistoryMenu( ... price = "¥4,000", ) Figma Compose ( ) 1
40. ©MIXI : 40 @FigmaProperty(FigmaType.Text, "price") private val price: Int = 0 ReservationHistoryMenu( ... price = "¥4,000", ) Int ( ) ReservationHistoryMenu( ... price = 4000, )
41. ©MIXI UI Compose Preview publish CI 41 React "AI for prop mapping" Figma
42. ©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