أنماط متعددة في النص

تسمح 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")
       }
       ...
   },
   ...
)

القيود