Mehrere Textstile

Mit Figma können Designschaffende verschiedene Textstilvariationen innerhalb eines Textelements anwenden. Das Wort „Brown“ in der gepackten Figma-Komponente unten ist beispielsweise ein einzelnes Textelement, das eine Vielzahl von Stilen enthält, einschließlich verschiedener Textgrößen innerhalb eines einzelnen Wortes.

Gemischte Textstile in einem einzelnen Textelement

Relay unterstützt die Design-to-Code-Übersetzung mehrerer Textstile, die auf Teilstrings innerhalb einer Figma-Textebene angewendet werden. Im generierten Quellcode werden AnnotatedString und SpanStyle von Compose verwendet, um mehrere Stile in Textebenen darzustellen.

Folgende Stile werden unterstützt:

  • Schriftart
  • Textgröße
  • Schriftstärke
  • Farbe
  • Zeichenabstand
  • Kursiv
  • Durchstreichen
  • Unterstrichen

Im generierten Code zum Schreiben kann die zusammensetzbare Funktion RelayText von Relay entweder String oder AnnotatedString akzeptieren. Relay generiert Kotlin-Code, der die Klassen AnnotatedString.Builder und SpanStyle verwendet, um mehrere Stile im Text zu rendern. Das folgende Codefragment zeigt, wie breite Buchstaben auf das Wort „jumps“ angewendet werden, gefolgt von einem Leerzeichen ohne benutzerdefinierten Stil und dem Wort „over“ in fett- und kursiver Form.

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

Einschränkungen