Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Compose でデザインと実装の差異を減らすための取り組み
Search
oidy
January 24, 2025
Programming
1
400
Compose でデザインと実装の差異を減らすための取り組み
2025/1/27 開催「Composeを用いたAndroidアプリ開発のハマりどころ」の登壇資料です。
https://newmo-tech.connpass.com/event/339846/
oidy
January 24, 2025
Tweet
Share
More Decks by oidy
See All by oidy
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
310
今こそ始める Shared Element Transition
oidy
1
420
Other Decks in Programming
See All in Programming
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
410
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
100
Comparing decimals in Swift Testing
417_72ki
0
150
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.1k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
420
DataformでPythonする / dataform-de-python
snhryt
0
130
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
1
530
リッチエディターを安全に開発・運用するために
unachang113
1
330
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Code Reviewing Like a Champion
maltzj
524
40k
Bash Introduction
62gerente
613
210k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Statistics for Hackers
jakevdp
799
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Side Projects
sachag
455
43k
Transcript
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