Mehrere Textstile

Mit Figma können Designschaffende mehrere Textstilvariationen innerhalb eines Textelement. Zum Beispiel das Wort „Braun“ in der gepackten Figma-Komponente unten ein einzelnes Textelement, das eine Vielzahl von Stilen umfasst, darunter unterschiedliche Textgrößen innerhalb eines Wortes.

Gemischte Textstile in einem einzelnen Textelement

Relay unterstützt die Design-to-Code-Übersetzung mehrerer Textstile, die auf innerhalb einer Figma-Textebene. Im generierten Quellcode enthält AnnotatedString und SpanStyle stehen für mehrere Stile in Textebenen.

Folgende Stile werden unterstützt:

  • Schriftart
  • textgröße
  • Schriftstärke
  • Farbe
  • Zeichenabstand
  • Kursiv
  • Durchgestrichen
  • Unterstrichen

Im generierten „Compose“-Code akzeptiert die zusammensetzbare Funktion RelayText von Relay entweder String oder AnnotatedString. Relay generiert Kotlin-Code, der den AnnotatedString.Builder und SpanStyle, um mehrere Stile in Text. Das folgende Codefragment zeigt, wie der breite Buchstabenabstand auf den Wort „Jumps“, gefolgt von einem Leerzeichen ohne benutzerdefinierten Stil, gefolgt vom Wort „over“ in Fett- und Kursivschrift.

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

Beschränkungen