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.
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
- Nicht unterstützte Figma-Eigenschaften
- Absatzabstand
- Absatzeinzug
- Zahlenstil
- Briefformen
- Stilistische Sets
- Durchstreichen und Unterstreichen
- Zeilenhöhe (funktioniert weiterhin, wenn sie auf das gesamte Textelement angewendet wird)
- Mehrere Stile werden verworfen, wenn sie mit einem Stil an einen Textparameter übergeben werden.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Text formatieren
- Nutzerinteraktionen aktivieren
- Parameter hinzufügen