文字中的多種樣式

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

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

針對套用至 Figma 文字圖層內子字串的多種文字樣式，Relay 支援設計到程式碼轉譯。在產生的原始碼中，Compose 的 AnnotatedString 和 SpanStyle 會用來表示文字圖層中的多種樣式。

支援的樣式如下：

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

在產生的 Compose 程式碼中，Relay 的 RelayText 可組合項可以接受 String 或 AnnotatedString。Relay 會產生使用 AnnotatedString.Builder 和 SpanStyle 類別的 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")
       }
       ...
   },
   ...
)

限制