टेक्स्ट की एक से ज़्यादा शैलियां

Figma की मदद से, डिज़ाइनर एक ही टेक्स्ट में कई तरह के टेक्स्ट स्टाइल लागू कर सकते हैं टेक्स्ट एलिमेंट होना चाहिए. उदाहरण के लिए, पैकेज किए गए फ़िग्मा कॉम्पोनेंट में “ब्राउन” शब्द नीचे एक टेक्स्ट एलिमेंट दिया गया है. इसमें कई तरह की स्टाइल शामिल हैं. जैसे, का टेक्स्ट साइज़ अलग-अलग हो सकता है.

एक टेक्स्ट एलिमेंट में मिक्स टेक्स्ट स्टाइल

रिले का इस्तेमाल करने पर, कई टेक्स्ट स्टाइल के डिज़ाइन-टू-कोड अनुवाद किए जा सकते हैं Figma टेक्स्ट लेयर में सबस्ट्रिंग. जनरेट किए गए सोर्स कोड में, Compose में AnnotatedString और SpanStyle का इस्तेमाल एक से ज़्यादा चीज़ों को दिखाने के लिए किया जाता है स्टाइल.

इस्तेमाल की जा सकने वाली स्टाइल:

  • टाइपफ़ेस
  • टेक्स्ट का साइज़
  • फ़ॉन्ट की मोटाई
  • रंग
  • अक्षरों के बीच की दूरी
  • इटैलिक
  • स्ट्राइक थ्रू
  • अंडरलाइन

जनरेट किए गए कंपोज़ कोड में, रिले का RelayText कंपोज़ेबल String या AnnotatedString. रिले, Kotlin कोड जनरेट करता है, जो एक से ज़्यादा स्टाइल को रेंडर करने के लिए AnnotatedString.Builder और SpanStyle क्लास टेक्स्ट. नीचे दिया गया कोड फ़्रैगमेंट, शब्द “जंप”, इसके बाद पसंद के मुताबिक स्टाइल वाला स्पेस, इसके बाद शब्द बोल्ड इटैलिक में “ओवर” लिखें.

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")
       }
       ...
   },
   ...
)

सीमाएं