Figma, tasarımcıların tek bir metin öğesi içinde birden çok metin stili varyasyonu uygulamasına olanak tanır. Örneğin, aşağıdaki paketlenmiş Figma bileşeninde yer alan "Kahverengi" kelimesi, tek bir kelime içinde farklı metin boyutları da dahil olmak üzere çeşitli stilleri içeren tek bir metin öğesidir.
Geçiş, Figma metin katmanı içindeki alt dizelere uygulanan birden fazla metin stilinin tasarımdan koda çevirisini destekler. Oluşturulan kaynak kodunda, Metin katmanlarında birden fazla stili temsil etmek için Oluştur AnnotatedString
ve SpanStyle
simgeleri kullanılır.
Desteklenen stiller şunlardır:
- yazı karakteri
- metin boyutu
- yazı tipi kalınlığı
- renk
- harf aralığı
- italik
- üstü çizili
- altı çizili
Oluşturulan Compose kodunda Relay'in RelayText
composable'ı String
veya AnnotatedString
öğelerini kabul edebilir. Geçiş, metin içinde birden çok stil oluşturmak için AnnotatedString.Builder
ve SpanStyle
sınıflarını kullanan Kotlin kodu oluşturur. Aşağıdaki kod parçasında, "atlamalar" kelimesine uygulanan geniş harf aralığı, ardından özel stili olmayan bir boşluk ve ardından kalın italik olarak "over" kelimesi gösterilmektedir.
RelayText(
content = buildAnnotatedString {
append("The ")
...
withStyle(
style = SpanStyle(
letterSpacing = 8.64.sp,
)
) { // AnnotatedString.Builder
append("jumps")
}
append(" ")
withStyle(
style = SpanStyle(
fontFamily = inter,
fontSize = 32.0.sp,
fontWeight = FontWeight(700.0.toInt()),
fontStyle = FontStyle.Italic,
)
) { // AnnotatedString.Builder
append("over")
}
...
},
...
)
Sınırlamalar
- Desteklenmeyen Figma Özellikleri
- Paragraf aralığı
- Paragraf girintisi
- Sayı stili
- Harf Biçimleri
- Stille ilgili gruplar
- Üstü çizili ve altı çizili
- Satır yüksekliği (metin öğesinin tamamına uygulandığında hâlâ çalışır)
- Bir stille metin parametresine aktarılırsa birden fazla stil atlanıyor
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Metnin stilini belirleme
- Kullanıcı etkileşimlerini etkinleştirme
- Parametre ekleme