Mit Figma können Designschaffende mehrere Textstilvariationen innerhalb eines Textelement. Zum Beispiel das Wort „Braun“ in der gepackten Figma-Komponente unten ein einzelnes Textelement, das eine Vielzahl von Stilen umfasst, darunter unterschiedliche Textgrößen innerhalb eines Wortes.
![Gemischte Textstile in einem einzelnen Textelement](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/multiple-styles-in-text/mixed-text-styles.png?authuser=9&hl=de)
Relay unterstützt die Design-to-Code-Übersetzung mehrerer Textstile, die auf
innerhalb einer Figma-Textebene. Im generierten Quellcode enthält
AnnotatedString
und SpanStyle
stehen für mehrere
Stile in Textebenen.
Folgende Stile werden unterstützt:
- Schriftart
- textgröße
- Schriftstärke
- Farbe
- Zeichenabstand
- Kursiv
- Durchgestrichen
- Unterstrichen
Im generierten „Compose“-Code akzeptiert die zusammensetzbare Funktion RelayText
von Relay entweder
String
oder AnnotatedString
. Relay generiert Kotlin-Code, der den
AnnotatedString.Builder
und SpanStyle
, um mehrere Stile in
Text. Das folgende Codefragment zeigt, wie der breite Buchstabenabstand auf den
Wort „Jumps“, gefolgt von einem Leerzeichen ohne benutzerdefinierten Stil, gefolgt vom Wort
„over“ in Fett- und Kursivschrift.
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")
}
...
},
...
)
Beschränkungen
- Nicht unterstützte Figma-Eigenschaften
<ph type="x-smartling-placeholder">
- </ph>
- Absatzabstand
- Absatzeinzug
- Zahlenstil
- Briefformen
- Stilistische Sets
- Durchstreichen und unterstreichen
- Zeilenhöhe (funktioniert auch bei Anwendung auf das gesamte Textelement)
- Mehrere Stile werden verworfen, wenn sie an einen Textparameter mit einem Stil übergeben werden
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Text gestalten
- Nutzerinteraktionen aktivieren
- Parameter hinzufügen