Più stili nel testo

Figma consente ai designer di applicare più varianti di stile di testo all'interno di un singolo elemento di testo. Ad esempio, la parola "marrone" nel componente Figma pacchettizzato di seguito è un singolo elemento di testo che include una varietà di stili, tra cui diverse dimensioni del testo all'interno di una singola parola.

Stili di testo misti in un singolo elemento di testo

Relay supporta la traduzione da design a codice di più stili di testo applicati alle sottostringhe in un livello di testo Figma. Nel codice sorgente generato, AnnotatedString e SpanStyle di Compose vengono utilizzati per rappresentare più stili nei livelli di testo.

Gli stili supportati sono:

  • carattere tipografico
  • dimensioni testo
  • spessore carattere
  • colore
  • spaziatura tra le lettere
  • corsivo
  • barrare
  • carattere sottolineato

Nel codice Compose generato, il componibile RelayText di Relay può accettare String o AnnotatedString. Relay genera codice Kotlin che utilizza le classi AnnotatedString.Builder e SpanStyle per eseguire il rendering di più stili nel testo. Il frammento di codice riportato di seguito mostra l'applicazione di una spaziatura tra le lettere larga alla parola "jumps", seguita da uno spazio senza stile personalizzato, seguita dalla parola "over" in grassetto corsivo.

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

Limitazioni