Figma, tasarımcıların bir stili tasarım öğesine uygulamasını sağlar. Stil, renkler veya tipografi gibi özelliklerin yeniden kullanılabilir bir koleksiyonudur. Merkezi olarak tanımlandığından, bir ekip tek bir tasarım öğesini güncellerken tüm tasarımların özelliklerini tanımlayabilir ve güncelleyebilir. Relay'i, Figma stillerini Jetpack Compose temalarına çevirecek şekilde ayarlayabilirsiniz.
Figma stilleri ile Oluştur temaları arasındaki eşleme, bir yapılandırma dosyasıyla belirtilir.
Örnek olarak, aşağıda gösterilen Figma tasarımında Google'ın Material 3 Tasarım Kiti'nden stiller kullanılır. Birincil - Başlık büyük metni için yazı tipi M3/başlık/büyük ve rengi M3/sys/light/primary şeklindedir.
Tasarımı, M3 Tasarım Kiti stil çevirisi etkin halde içe aktarırsak Birincil - Başlık büyü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, normalde Figma'da kullandığınız gibi kullanın. Ardından Android Studio'da Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğine gidin ve ardından Figma stillerini Compose temasına çevir'i işaretleyin.
Bu noktada, tasarımınızın stillerini çevirmek için bir yapılandırma seçmeniz gerekir:
- Bunlar doğrudan Figma için Google'ın Material 3 Design Kit'inden (
M3/body/medium or M3/sys/light/primary
biçiminde) geliyorsa Material 3 Design Kit yapılandırması seçeneğini belirleyin. - Bunlar doğrudan Figma için Google'ın Material 2 Design Kit'inden (
01. Primary/500 or Subtitle 1
biçiminde) geliyorsa Material 2 Design Kit yapılandırması seçeneğini belirleyin. Kendi stil tanımlarınız varsa Özel yapılandırma seçeneğini belirleyin ve Figma stilleri ile Temalar arasındaki eşlemeleri içeren dosyayı seçin (bu bölümde açıklanmıştır).
Figma tasarımında, seçilen yapılandırmada bulunmayan stiller varsa İçe aktarma iletişim kutusu, eşlenmemiş her stil için bir uyarı gösterir. Eşlenmemiş her stil bunun yerine gerçek değerine çevrilir. Uyarılar başlangıçta daraltılmıştır; genişletmek için uyarı banner'ını tıklayın. Her uyarının, Figma dosyasında uyarıya neden olan ilgili katmana bir bağlantısı vardır.
İçe aktarma işleminden sonra, stil yapılandırması Android Studio projesinde bulunur. Bunları ui-package-resources/style-mappings
dizininde arayın.
Özel çeviriler için yapılandırma dosyaları
Figma stillerini Temalar'a çevirme işlemi iki adımdan oluşur:
- Kullanıcı Arayüzü Paketindeki bir Figma stili, Android Studio projenizdeki Kullanıcı Arayüzü Paketi klasöründe bulunan Kullanıcı Arayüzü Paket tanımı JSON dosyasındaki bir tasarım jetonuna dönüştürülür.
- Kullanıcı Arayüzü Paketi tanım dosyasındaki bir tasarım jetonu, Android Studio projenizdeki Oluşturma tema kodu snippet'ine dönüştürülür.
Özel yapılandırma dosyasının biçimi (JSON biçimindedir) bu iki adımı yansıtır. Aşağıda, yalnızca renk stillerini işleyen basit bir özel yapılandırma dosyası örneği verilmiştir:
{
"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"
}
}
}
}
İki üst düzey bölüm vardır: figma
(1. adımı belirtir) ve compose
(2. adımı belirtir). Her ikisinde de bir colors
bölümü bulunur:
figma
uygulamasınıncolors
bölümü, bir Figma stilini ve Kullanıcı Arayüzü Paketi tanım dosyasına yazılması gereken ilgili tasarım jetonunu belirtir.compose
uygulamasınıncolors
bölümü, Kullanıcı Arayüzü Paketi tanım dosyasında bir tasarım jetonu ve Oluşturma kodunuza yazılması gereken ilgili kod snippet'ini belirtir.
Yukarıdaki örnek yapılandırmada, Figma'da my-app-theme/sys/light/primary
rengini kullanan her şeyin rengi, kullanıcı arayüzü paketi tanım dosyasına myapp.sys.color.primary
olarak yazılır. Daha sonra, kod oluşturma sırasında bu renk Oluşturma'ya MaterialTheme.colorScheme.primary
olarak yazılır.
compose
bölümü, belirli bir kod sembolünün hangi pakette bulunduğunu belirten bir options
bölümü de içerir. Yukarıdaki örnekte MaterialTheme
, androidx.compose.material3
paketinde olduğu için oluşturulan herhangi bir kodda içe aktarılmalıdır.
Tipografi stillerini eşleme, renk stillerinden biraz daha karmaşıktır. Burada, yukarıdakiyle aynı örneği, ancak tipografi stilleri eklenmiş olarak görebilirsiniz:
{
"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 stilinin birçok alt özellikten oluştuğu gerçeğini yansıtır. Figma ve Compose'da bir yazı tipi stili, diğer birçok özelliğin yanı sıra yazı tipinin adını, yazı tipi kalınlığını, boyutunu, harf aralığını ve satır yüksekliğini içerir. Her bir stilin alt özelliklerini tekrar tekrar eşlemek yerine, genel stilleri jetonlar ve temalarla eşleştirir ve daha sonra her bir alt mülkü ayrı ayrı eşleriz.
Yukarıdaki örnekte, my-app-theme/headline/large
stiline sahip bir Figma metin öğesi, Kullanıcı Arayüzü Paketi tanım dosyasına yazıldığında, metnin yazı tipinin myapp.sys.typescale.headline-large.font
, boyutunun myapp.sys.typescale.headline-large.size
olduğu vb. gösterilmektedir. Ardından, Compose kodu oluşturulduğunda, bir RelayText
composable (Compose Materyali'nde Text
composable'ı sarmalar) oluşturulur. Burada font
parametresi MaterialTheme.typography.headlineLarge.fontFamily
, size
parametresiMaterialTheme.typography.headlineLarge.fontSize
ve diğer adlar kullanılır.
Yapılandırma dosyası örnekleri için, tam olarak aynı biçimi kullanan yerleşik Material 3 ve Material 2 Design Kit yapılandırmalarına bakabilirsiniz. Dosyaları şuradan indirebilirsiniz:
Sınırlamalar
Şu anda, stillerin temalara çevrilmediği birkaç durum bulunmaktadır:
- Bir metin öğesinin yalnızca bir bölümüne uygulanan metin stilleri (Metinde birden fazla stil bölümünde açıklandığı gibi)
- Bir bileşenin farklı varyantlarına uygulanan farklı stiller varsa yalnızca bir stil çevrilir.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Dikkat edilmesi gereken diğer noktalar
- Jetpack Compose için Kotlin
- CompositionLocal ile yerel olarak kapsama alınmış veriler