Figma की मदद से, डिज़ाइनर एक ही टेक्स्ट में कई तरह के टेक्स्ट स्टाइल लागू कर सकते हैं टेक्स्ट एलिमेंट होना चाहिए. उदाहरण के लिए, पैकेज किए गए फ़िग्मा कॉम्पोनेंट में “ब्राउन” शब्द नीचे एक टेक्स्ट एलिमेंट दिया गया है. इसमें कई तरह की स्टाइल शामिल हैं. जैसे, का टेक्स्ट साइज़ अलग-अलग हो सकता है.
![एक टेक्स्ट एलिमेंट में मिक्स टेक्स्ट स्टाइल](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/multiple-styles-in-text/mixed-text-styles.png?authuser=4&hl=hi)
रिले का इस्तेमाल करने पर, कई टेक्स्ट स्टाइल के डिज़ाइन-टू-कोड अनुवाद किए जा सकते हैं
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")
}
...
},
...
)
सीमाएं
- Figma की ऐसी प्रॉपर्टी जिन्हें इस्तेमाल नहीं किया जा सकता
- पैराग्राफ़ स्पेसिंग
- पैराग्राफ़ इंडेंट
- नंबर स्टाइलिंग
- लेटरफ़ॉर्म
- स्टाइल वाले सेट
- स्ट्राइकथ्रू और अंडरलाइन
- लाइन की ऊंचाई (पूरे टेक्स्ट एलिमेंट पर लागू करने पर अब भी काम करती है)
- अगर एक स्टाइल के साथ टेक्स्ट पैरामीटर में पास किया जाता है, तो कई स्टाइल हट जाते हैं
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- टेक्स्ट की स्टाइल करना
- लोगों के इंटरैक्शन चालू करना
- पैरामीटर जोड़ना