Texte à plusieurs styles

Figma permet aux graphistes d'appliquer plusieurs styles de texte dans un seul élément de texte. Par exemple, le mot "Brown" (Marron) dans le composant Figma empaqueté ci-dessous est un élément de texte unique qui comprend divers styles, y compris différentes tailles de texte dans un seul mot.

Styles de texte mixtes dans un élément de texte unique

Relay permet de traduire une conception en code lorsque plusieurs styles de texte sont appliqués aux sous-chaînes d'une couche de texte Figma. Dans le code source généré, les éléments AnnotatedString et SpanStyle de Compose permettent de représenter plusieurs styles dans des couches de texte.

Voici les styles compatibles :

  • police
  • taille du texte
  • épaisseur de la police
  • couleur
  • espacement des lettres
  • italique
  • barré
  • souligné

Dans le code Compose généré, le composable RelayText de Relay peut accepter String ou AnnotatedString. Relay génère du code Kotlin qui utilise les classes AnnotatedString.Builder et SpanStyle pour afficher plusieurs styles dans le texte. Le fragment de code ci-dessous montre un espacement de lettres large appliqué au mot "jump", suivi d'un espace sans style personnalisé, suivi du mot "over", en gras et en italique.

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

Limites