텍스트 내 여러 스타일

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Figma를 사용하면 디자이너가 단일 텍스트 요소 내에 여러 텍스트 스타일 변형을 적용할 수 있습니다. 예를 들어 아래 패키징된 Figma 구성요소에 있는 'Brown'이라는 단어는 한 단어 내에 텍스트 크기가 여러 개 있는 등 다양한 스타일이 포함된 단일 텍스트 요소입니다.

단일 텍스트 요소에 있는 혼합된 텍스트 스타일

Relay는 Figma 텍스트 레이어 내의 하위 문자열에 적용된 여러 텍스트 스타일의 디자인에서 코드로의 변환을 지원합니다. 생성된 소스 코드에서 Compose의 AnnotatedStringSpanStyle은 텍스트 레이어의 여러 스타일을 나타내는 데 사용됩니다.

지원되는 스타일은 다음과 같습니다.

  • typeface
  • 텍스트 크기
  • 글꼴 두께
  • 색상
  • 문자 간격
  • 기울임꼴
  • 취소선
  • 밑줄

생성된 Compose 코드에서 Relay의 RelayText 컴포저블은 String 또는 AnnotatedString을 허용할 수 있습니다. Relay는 AnnotatedString.BuilderSpanStyle 클래스를 사용하여 텍스트의 여러 스타일을 렌더링하는 Kotlin 코드를 생성합니다. 아래 코드는 'jumps'라는 단어에 적용되는 넓은 문자 간격과 맞춤 스타일이 없는 공백, 굵은 기울임꼴로 표시된 '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")
       }
       ...
   },
   ...
)

제한사항