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.
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
- Proprietà Figma non supportate
- Spaziatura del paragrafo
- Rientro paragrafo
- Stili numeri
- Formatori
- Set stilistici
- Barrato e sottolineato
- Altezza riga (funziona ancora quando viene applicata all'intero elemento di testo)
- Se si passa a un parametro di testo con uno stile, vengono eliminati più stili
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Applicare uno stile al testo
- Attivare le interazioni degli utenti
- Aggiungere parametri