テキストに複数のスタイルを適用する

Figma を使用すると、デザイナーは、単一のテキスト要素内で複数のテキスト スタイルのバリエーションを適用できます。たとえば、下記のパッケージ化された Figma コンポーネントの「Brown」という単語は、さまざまなスタイル（1 つの単語内の異なるテキストサイズなど）を含む単一のテキスト要素です。

単一のテキスト要素内にいくつかのテキスト スタイルが混在しています

Relay を使用すると、Figma テキストレイヤ内の部分文字列に適用される複数のテキスト スタイルをデザインからコードに変換できます。生成されたソースコードでは、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")
       }
       ...
   },
   ...
)

制限事項