![Figma'daki Stiller'den Compose'daki Temaya Eşleme](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/mappding-from-styles-in-figma.png?authuser=19&hl=tr)
Figma, tasarımcıların bir tasarım öğesine stil uygulamasını sağlar. Stil, yeniden kullanılabilir özellikleri (ör. renkler veya tipografi) toplama. Paydaşların ihtiyaçlarını bir ekip, bir kullanıcı kullandığında tüm tasarımlardaki özellikleri tek bir tasarım öğesini güncellemek. Relay'i, Figma’yı çevirecek şekilde ayarlayabilirsiniz stil özelliklerini Jetpack Compose temalarına uyarlayın.
Figma stilleri ve Oluştur temaları arasındaki eşleme yapılandırma dosyası.
![Yapılandırma dosyası, Figma stilleri ile Temaları oluştur'u eşler](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/config-file.png?authuser=19&hl=tr)
Örnek olarak, aşağıda gösterilen Figma tasarımında Google'ın Material 3 tasarımındaki stiller kullanılıyor. Tasarım Kiti Birincil - Büyük başlık için yazı tipi M3/başlık/büyük ve rengi M3/sys/ışık/birincil'dir.
![Figma'da 3. malzeme stilleri](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/m3-styles-in-Figma.png?authuser=19&hl=tr)
M3 Tasarım Kiti stil çevirisi etkinken tasarımı içe aktarırsak Birincil - Büyük başlık metni için aşağıdaki kod oluşturulur:
@Composable
fun PrimaryTitleLarge(modifier: Modifier = Modifier) {
Text(
content = "Primary - Title large",
fontSize = MaterialTheme.typography.titleLarge.fontSize,
fontFamily = MaterialTheme.typography.titleLarge.fontFamily,
color = MaterialTheme.colorScheme.primary,
height = MaterialTheme.typography.titleLarge.lineHeight,
letterSpacing = MaterialTheme.typography.titleLarge.letterSpacing,
textAlign = TextAlign.Left,
fontWeight = MaterialTheme.typography.titleLarge.fontWeight,
modifier = modifier
)
}
Bu özelliği kullanmak için stilleri Figma'da olduğu gibi kullanın. Sonra Android'de Studio'da, Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğini tıklayıp Figma stillerini Compose temasına çevirin.
Bu noktada, tasarımınızı çevirmek için bir yapılandırma seçmeniz gerekir. stiller:
- Doğrudan Google'ın Material 3 Design Kit'ten geliyorlarsa
Figma için (
M3/body/medium or M3/sys/light/primary
biçimindedir) ardından Material 3 Design Kit yapılandırması seçeneğini belirleyin. - Doğrudan Google'ın Material 2 Design Kit'ten geliyorlarsa
Figma için (
01. Primary/500 or Subtitle 1
biçimindedir) açılır menüden Material 2 Design Kit yapılandırması seçeneği. Kendi stil tanımlarınız varsa Özel yapılandırma seçeneğini belirleyin ve eşlemeleri içeren dosyayı seçin (bu bölümde açıklanmıştır).
Figma tasarımında, seçilen stillerde olmayan stiller varsa içe aktarma iletişim kutusunda, eşlenmemiş her stil için bir uyarı görüntülenir. Her biri eşlenmemiş stil, gerçek değerine çevrilir. Uyarılar başlangıçta daraltıldı; uyarılar banner'ını tıklayarak genişletin. Her uyarıda Figma dosyasında, uyarıya neden olan katmana bağlantı eklemeniz gerekir.
![İçe aktarma iletişim kutusundaki uyarılar](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/warning-in-dialog.png?authuser=19&hl=tr)
İçe aktarma işleminden sonra, stil yapılandırması Android Studio'da bulunur.
belirler. ui-package-resources/style-mappings
içinde arayın
dizin.
Özel çeviriler için yapılandırma dosyaları
Figma stillerini Tema oluştur'a dönüştürme işlemi iki adımdan oluşur:
- Kullanıcı Arayüzü Paketindeki Figma stili, kullanıcı arayüzünde bir tasarım jetonuna dönüştürülür Android cihazınızdaki UI Package klasöründe paket tanımı JSON dosyası Studio projesi.
- Bir Kullanıcı Arayüzü Paketi tanım dosyasındaki tasarım jetonu, Android Studio projenizde tema kodu oluşturun.
Özel yapılandırma dosyasının biçimi (JSON biçimindedir) bu adımlardan bahsedeceğim. Basit bir özel yapılandırma dosyası örneği: yalnızca renk stillerini işler:
{
"figma": {
"colors": {
"my-app-theme/sys/light/primary": "myapp.sys.color.primary",
"my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
"my-app-theme/sys/light/background": "myapp.sys.color.background",
"my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
"my-app-theme/sys/dark/background": "myapp.sys.color.background",
"my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
}
},
"compose": {
"colors": {
"myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
"myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
"myapp.sys.color.background": "MaterialTheme.colorScheme.background",
"myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
},
"options": {
"packages": {
"MaterialTheme": "androidx.compose.material3"
}
}
}
}
figma
(1. adımı belirtir) ve compose
olmak üzere iki üst düzey bölüm vardır
(2. adımı belirtir). Her ikisinde de colors
bölümü vardır:
figma
öğesinincolors
bölümü bir Figma stilini ve buna karşılık gelen kullanıcı arayüzü paketi tanım dosyasına yazılması gereken tasarım jetonu.compose
öğesinincolors
bölümü, Kullanıcı Arayüzü Paketi'ndeki bir tasarım jetonunu belirtiyor ve ilgili kod snippet'ini inceleyerek, yazmanız gerekir.
Yukarıdaki örnek yapılandırmada, rengi kullanan her şey
Figma'daki my-app-theme/sys/light/primary
öğesinin rengi şu şekilde yazılır:
Kullanıcı Arayüzü Paketi tanım dosyasındaki myapp.sys.color.primary
. Ardından, kod sırasında
bu renk MaterialTheme.colorScheme.primary
şeklinde yazılır.
Oluştur'u tıklayın.
compose
bölümünde options
bölümü de bulunur. Bu bölümde
pakete dahil edilir. Yukarıdaki örnekte,
MaterialTheme
, androidx.compose.material3
paketinde bulunduğundan
oluşturulan herhangi bir koda içe aktarılmalıdır.
Tipografi stillerini eşlemek, renk stillerinden biraz daha fazla işlem gerektirir. İşte Yukarıdakiyle aynı örneği, ancak tipografi stilleri eklenmiş halde:
{
"figma": {
"colors": {
"my-app-theme/sys/light/primary": "myapp.sys.color.primary",
"my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
"my-app-theme/sys/light/background": "myapp.sys.color.background",
"my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
"my-app-theme/sys/dark/background": "myapp.sys.color.background",
"my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
},
"typography": {
"symbols": {
"my-app-theme/headline/large": "myapp.sys.typescale.headline-large",
"my-app-theme/body/medium": "myapp.sys.typescale.body-medium"
},
"subproperties": {
"fontFamily": "font",
"fontWeight": "weight",
"fontSize": "size",
"letterSpacing": "tracking",
"lineHeightPx": "line-height"
}
}
},
"compose": {
"colors": {
"myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
"myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
"myapp.sys.color.background": "MaterialTheme.colorScheme.background",
"myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
},
"typography": {
"symbols": {
"myapp.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
"myapp.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium"
},
"subproperties": {
"font": "fontFamily",
"weight": "fontWeight",
"size": "fontSize",
"tracking": "letterSpacing",
"line-height": "lineHeight"
}
},
"options": {
"packages": {
"MaterialTheme": "androidx.compose.material3"
}
}
}
}
Tipografi bölümlerinin yapısı, tipografi tarzının standartların birçok alt mülkten oluşur. Figma ve Oluşturma'da bir tipografi stili yazı tipinin adını, yazı tipi kalınlığını, boyutunu, harf aralığını ve satır aralığını içermelidir. başka birçok metrik bulunur. Her stilin tarzını tek tek eşlemek yerine tekrar tekrar alt mülklere eklemek yerine, genel stilleri oluşturup her bir alt mülkü ayrı ayrı eşlemeniz gerekir.
Yukarıdaki örnekte,
my-app-theme/headline/large
, Kullanıcı Arayüzü Paketi tanım dosyasına yazılır.
metnin yazı tipi myapp.sys.typescale.headline-large.font
, boyutu
myapp.sys.typescale.headline-large.size
vb. Bu durumda, Oluştur kodu
bir RelayText
composable (Text
composable'ı
Compose Material (Materyal Oluştur) oluşturulur. Burada font
parametresi
MaterialTheme.typography.headlineLarge.fontFamily
, size
parametresi
MaterialTheme.typography.headlineLarge.fontSize
vb.
Yapılandırma dosyası örnekleri için yerleşik Material 3 ve Tam olarak aynı biçimi kullanan Malzeme 2 Tasarım Kiti yapılandırmaları. Şunları yapabilirsiniz: dosyaları buradan indirin:
Sınırlamalar
Şu anda stillerin farklı dillere çevrilmediği temalar:
- Metin öğesinin yalnızca bir bölümüne uygulanan metin stilleri (açıklandığı şekilde) Metinde birden çok stil bölümünde yer alan)
- Bir bileşenin farklı varyantlarına farklı stiller uygulanmışsa yalnızca bir stil çevrilir.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Diğer noktalar
- Jetpack Compose için Kotlin
- CompositionLocal ile yerel kapsamlı veriler