Bygge et egendefinert designsystem
Utvid temaet med Deres egne tokens.
Bygge et egendefinert designsystem er en gratis leksjon i Jetpack Compose Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Jetpack Compose Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.
Utover standardverdiene
Virkelige merkevarer trenger mer enn det som følger med Material. Et design system samler farger, typografi, former og ekstra tokens i ett gjenbrukbart tema. 🏗️
Omslutte MaterialTheme
Du begynner med å skrive din egen AppTheme-Composable som konfigurerer MaterialTheme, slik at hele appen får ett navngitt inngangspunkt.
@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }Sende inn tokenene dine
Inne i AppTheme gir du MaterialTheme ditt egendefinerte colorScheme, typography og shapes, slik at hver skjerm automatisk arver brand.
MaterialTheme(
colorScheme = brandColors,
typography = brandType,
shapes = brandShapes
) { content() }Material mangler noen tokens
Noen merkeverdier, som en grønn suksessfarge eller en egendefinert avstandsenhet, har ingen Material-rolle. Du legger dem til som dine egne extra tokens.
Samle ekstra farger
Du samler ekstra farger i en liten dataklasse, et ryddig sted for merkeverdier som Material ikke tilbyr ferdig.
data class BrandColors(
val success: Color,
val warning: Color
)CompositionLocal
For å dele egendefinerte tokens nedover i treet uten å sende parametere videre, bruker du en CompositionLocal, Compose sin innebygde mekanisme for ambient-verdier.
Opprett Local
Du deklarerer en staticCompositionLocalOf med en standardverdi og oppretter dermed en kanal som alle Composable-er kan lese merkevarefargene dine fra.
val LocalBrand = staticCompositionLocalOf { defaultBrand }Tilby verdiene
I AppTheme pakker du innholdet inn i en CompositionLocalProvider og sender merkevare-tokenene dine inn i treet sammen med MaterialTheme.
CompositionLocalProvider(LocalBrand provides brand) {
MaterialTheme(/* ... */) { content() }
}Les egendefinerte tokens
Overalt nedenfor kan en Composable lese LocalBrand.current for å hente de egendefinerte verdiene dine, på samme måte som MaterialTheme eksponerer sine egne.
val success = LocalBrand.current.successTilby et ryddig API
Mange team eksponerer et objekt slik at kall ser ut som AppTheme.brand.success, som en brukervennlig fasade over CompositionLocal i bakgrunnen.
Én sannhetskilde
Nå kommer farger, typografi, former og egendefinerte tokens alle fra ett tema, slik at appen forblir konsekvent og enkel å videreutvikle. ✨
Kort sjekk
Du trenger en merkevarefarge som Material ikke har en rolle for, og som skal deles i hele appen. Hva bruker du?
Oppsummering: Ditt eget tema
Du pakket MaterialTheme inn i et AppTheme, la til ekstra tokens via CompositionLocal og ga appen én merkevarebasert sannhetskilde. 🎉
Lær deg Kotlin med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Bygge et egendefinert designsystem» gratis?
Ja – hele teksten i «Bygge et egendefinert designsystem» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Jetpack Compose Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Bygge et egendefinert designsystem»?
Utvid temaet med Deres egne tokens. Du øver på Jetpack Compose Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Jetpack Compose Academy?
Ingen tidligere erfaring er nødvendig. Jetpack Compose Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Bygge et egendefinert designsystem»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Jetpack Compose Academy-leksjonen?
Ja. Alle Jetpack Compose Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- MaterialTheme og fargevalg
- Typografi og formtokens
- Mørk modus og dynamiske farger
- Bygge et egendefinert designsystem