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
380
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
300
今こそ始める Shared Element Transition
oidy
1
390
Other Decks in Programming
See All in Programming
Using AI Tools Around Software Development
inouehi
0
970
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
19
5.6k
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
720
バリデーションライブラリ徹底比較
nayuta999999
1
590
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
430
テスト分析入門/Test Analysis Tutorial
goyoki
13
2.8k
Perlで痩せる
yuukis
1
670
「兵法」から見る質とスピード
ickx
0
240
Use Perl as Better Shell Script
karupanerura
0
680
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
140
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
100
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
130
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
870
Become a Pro
speakerdeck
PRO
28
5.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
4 Signs Your Business is Dying
shpigford
183
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Documentation Writing (for coders)
carmenintech
71
4.8k
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