Wiele stylów w tekście

Figma umożliwia projektantom stosowanie wielu odmian stylów tekstu w pojedynczym elemencie tekstowym. Na przykład słowo „Brązowy” w spakowanym komponencie Figma poniżej to pojedynczy element tekstowy, który zawiera różne style, w tym różne rozmiary tekstu w pojedynczym słowie.

Różne style tekstu w pojedynczym elemencie tekstowym

Usługa Relay obsługuje translację projektową na kod wielu stylów tekstu stosowanych do podłańcuchów w warstwie tekstu Figma. W wygenerowanym kodzie źródłowym elementy AnnotatedString i SpanStyle w komponencie Compose są używane do reprezentowania wielu stylów w warstwach tekstowych.

Obsługiwane style to:

  • krój pisma
  • rozmiar tekstu
  • grubość czcionki
  • kolor
  • odstępy między literami
  • kursywa
  • przekreślenie
  • podkreślenie

W wygenerowanym kodzie tworzenia wiadomości funkcja RelayText przekazywania może akceptować String lub AnnotatedString. Usługa Relay generuje kod Kotlin, który korzysta z klas AnnotatedString.Builder i SpanStyle do renderowania wielu stylów w tekście. Na poniższym fragmencie kodu widać duże odstępy między literami stosowane do słowa „skoki”, po których następuje spacja bez stylu niestandardowego, po której następuje pogrubiona kursywa.

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

Ograniczenia