تسمح Figma للمصممين بتطبيق تباينات متعددة في نمط النص داخل عنصر نصي واحد. على سبيل المثال، كلمة "Brown" في مكون Figma المحزم أدناه عبارة عن عنصر نصي واحد يتضمن مجموعة متنوعة من الأنماط، بما في ذلك أحجام النص المختلفة داخل كلمة واحدة.
يدعم Relay ترجمة التصميم إلى الترميز لأنماط النص المتعددة المطبقة على
السلاسل الفرعية داخل طبقة نص Figma. في رمز المصدر الذي تم إنشاؤه، يتم استخدام AnnotatedString
وSpanStyle
في Compose لتمثيل أنماط متعدّدة في طبقات النص.
الأنماط المتوافقة هي:
- خط الطباعة
- حجم النص
- عرض الخط
- لون
- تباعد الأحرف
- مائل
- يتوسطه خط
- تسطير
في رمز الإنشاء الذي تم إنشاؤه، يمكن لعنصر RelayText
القابل للإنشاء قبول
String
أو AnnotatedString
. ينشئ Relay رمز 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.
- تحديد نمط النص
- تفعيل تفاعلات المستخدم
- إضافة مَعلمات