文字中的多種樣式

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

限制

• 不支援的 Figma 屬性
  • 段落間距
  • 段落縮排
  • 數字樣式
  • 字母形式
  • 文體集
  • 刪除線和底線
  • 行高 (套用至整個文字元素時仍適用)
• 如果傳遞至只有一種樣式的文字參數，則會捨棄多種樣式