文字中的多種樣式

Figma 可讓設計人員在單一文字元素中套用多個文字樣式變化。例如,在以下封裝的 Figma 元件中,「Brown」一字是包含各種樣式的單一文字元素,包括單字中的不同文字大小。

單一文字元素中的混合文字樣式

針對套用至 Figma 文字圖層內子字串的多種文字樣式,Relay 支援設計到程式碼轉譯。在產生的原始碼中,Compose 的 AnnotatedStringSpanStyle 代表多個 文字圖層中的樣式

支援的樣式如下:

  • 字體
  • 文字大小
  • 字型粗細
  • 顏色
  • 字母間距
  • 斜體
  • 刪除線
  • 底線

在產生的 Compose 程式碼中,Relay 的 RelayText 可組合項可以接受 StringAnnotatedString。Relay 會產生使用 AnnotatedString.BuilderSpanStyle 類別的 Kotlin 程式碼,以轉譯多個樣式的文字。以下程式碼片段顯示套用至「jump」一字的寬字母間距,後面接著無自訂樣式的空格,最後是以粗體和斜體顯示的「over」一字。

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

限制