Compose 테마에 스타일 매핑

Figma의 스타일에서 Compose의 테마로 매핑

Figma를 사용하면 디자이너가 디자인 요소에 스타일을 적용할 수 있습니다. 스타일은 색상이나 서체 등 재사용 가능한 속성의 모음입니다. 중앙에서 정의되며, 팀은 단일 디자인 요소를 업데이트할 때 모든 디자인의 속성을 정의하고 업데이트할 수 있습니다. Figma 스타일을 Jetpack Compose 테마로 변환하도록 Relay를 설정할 수 있습니다.

Figma 스타일과 Compose 테마 간의 매핑은 구성 파일을 통해 지정됩니다.

Figma 스타일과 Compose 테마를 매핑하는 구성 파일

예를 들어 아래의 Figma 디자인은 Google의 Material 3 Design 키트의 스타일을 사용합니다. Primary - Title large 텍스트의 경우 글꼴은 M3/title/large이고 색상은 M3/sys/light/primary입니다.

Figma의 Material 3 스타일

M3 Design 키트 스타일 변환을 사용 설정한 상태에서 디자인을 가져오면 Primary - Title large 텍스트의 코드가 다음과 같이 생성됩니다.

@Composable
fun PrimaryTitleLarge(modifier: Modifier = Modifier) {
    Text(
        content = "Primary - Title large",
        fontSize = MaterialTheme.typography.titleLarge.fontSize,
        fontFamily = MaterialTheme.typography.titleLarge.fontFamily,
        color = MaterialTheme.colorScheme.primary,
        height = MaterialTheme.typography.titleLarge.lineHeight,
        letterSpacing = MaterialTheme.typography.titleLarge.letterSpacing,
        textAlign = TextAlign.Left,
        fontWeight = MaterialTheme.typography.titleLarge.fontWeight,
        modifier = modifier
    )
}

이 기능을 사용하려면 Figma에서 하는 것처럼 스타일을 사용합니다. 그런 다음 Android 스튜디오에서 File > New > Import UI Packages…로 이동하여 Translate Figma style to ComposeTheme을 선택합니다.

이 시점에서 디자인의 스타일을 변환하기 위한 구성을 선택해야 합니다.

  • Google의 Material 3 Design Kit에서 직접 가져오는 경우 Figma (M3/body/medium or M3/sys/light/primary 형식)의 경우 그런 다음 Material 3 Design Kit configuration 옵션을 선택합니다.
  • Google의 Material 2 Design Kit에서 직접 가져오는 경우 Figma (01. Primary/500 or Subtitle 1 형식)의 경우 그런 다음 Material 2 Design Kit 구성 옵션

  • 고유한 스타일 정의가 있는 경우 맞춤 구성 옵션을 선택하고 매핑이 포함된 파일을 선택합니다. Compose 테마 간에 전환할 수 있습니다 (이 섹션에서 설명).

    Import UI Package 대화상자

선택한 구성에 없는 스타일이 Figma 디자인에 있으면 가져오기 대화상자에 매핑되지 않은 각 스타일에 관한 경고가 표시됩니다. 매핑되지 않은 각 스타일은 대신 리터럴 값으로 변환됩니다. 처음에는 경고 메시지가 접혀 있습니다. 경고 배너를 클릭하면 펼쳐집니다. 각 경고에는 경고를 야기하는 Figma 파일의 특정 레이어와 연결되는 링크가 있습니다.

가져오기 대화상자의 경고

가져오기가 완료되면 스타일 구성이 Android 스튜디오에 위치합니다. 살펴보겠습니다 ui-package-resources/style-mappings 내에서 찾아보세요. 를 참조하세요.

맞춤 변환을 위한 구성 파일

Figma 스타일을 Compose 테마로 변환하는 작업은 다음 두 단계로 구성됩니다.

  1. UI 패키지의 Figma 스타일은 Android 스튜디오 프로젝트의 UI 패키지 폴더 내에 있는 UI 패키지 정의 JSON 파일의 디자인 토큰으로 변환됩니다.
  2. UI 패키지 정의 파일의 디자인 토큰은 Android 스튜디오 프로젝트의 Compose 테마 코드 스니펫으로 변환됩니다.

맞춤 구성 파일의 형식(JSON 형식)은 이러한 두 단계를 반영합니다. 다음은 색상 스타일만 처리하는 간단한 맞춤 구성 파일의 예입니다.

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

두 개의 최상위 수준, 즉 figma(1단계 지정)와 compose(2단계 지정)가 있습니다. 두 수준 모두 colors 섹션을 포함합니다.

  • figma의 colors 섹션은 Figma 스타일 및 UI 패키지 정의 파일에 기록해야 하는 디자인 토큰을 지정합니다.
  • compose의 colors 섹션은 UI 패키지 정의 파일의 디자인 토큰과 Compose 코드에 작성해야 하는 상응하는 코드 스니펫을 지정합니다.

위의 구성 예에서 Figma의 my-app-theme/sys/light/primary 색상은 UI 패키지 정의 파일에 myapp.sys.color.primary로 표시됩니다. 그런 다음 코드 생성 과정에 이 색상은 Compose에서 MaterialTheme.colorScheme.primary로 작성됩니다.

compose 섹션에는 특정 코드 기호가 어느 패키지에 있는지 명시하는 options 섹션도 포함되어 있습니다. 위의 예에서는 MaterialTheme이 androidx.compose.material3 패키지에 있으므로 생성된 코드로 가져와야 함을 명시합니다.

서체 스타일 매핑은 색상 스타일보다 조금 더 복잡합니다. 다음은 위와 동일한 예이지만 서체 스타일이 추가되었습니다.

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    },
    "typography": {
      "symbols": {
        "my-app-theme/headline/large": "myapp.sys.typescale.headline-large",
        "my-app-theme/body/medium": "myapp.sys.typescale.body-medium"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "typography": {
      "symbols": {
        "myapp.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "myapp.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

서체 섹션의 구조는 서체 스타일이 여러 하위 속성으로 구성된다는 사실을 반영합니다. Figma 및 Compose의 서체 스타일에는 글꼴 이름, 글꼴 굵기, 크기, 글자 간격, 행 간격 등이 포함됩니다. Google에서는 각 스타일의 개별 하위 속성을 반복해서 매핑하지 않고 전체 스타일을 토큰과 테마에 매핑한 후 각 개별 하위 속성을 별도로 매핑합니다.

위의 예는 my-app-theme/headline/large 스타일이 사용된 Figma 텍스트 항목이 UI 패키지 정의 파일에 작성되었을 때 텍스트의 글꼴이 myapp.sys.typescale.headline-large.font이고 크기가 myapp.sys.typescale.headline-large.size임을 보여줍니다. 그런 다음 Compose 코드가 생성되면 RelayText 컴포저블(Compose Material에서 Text 컴포저블을 래핑함)이 생성됩니다. 여기서 font 매개변수는 MaterialTheme.typography.headlineLarge.fontFamily이고 size 매개변수는 MaterialTheme.typography.headlineLarge.fontSize입니다.

구성 파일의 예는 정확히 동일한 형식을 사용하는 내장된 Material 3 Design 키트와 Material 2 Design 키트의 구성을 살펴보면 됩니다. 다음에서 파일을 다운로드할 수 있습니다.

제한사항

현재, 스타일이 테마로 변환되지 않는 몇 가지 상황이 있습니다.

  • 텍스트 요소의 일부에만 적용되는 텍스트 스타일 (설명 참조) (텍스트의 여러 스타일)
  • 구성요소의 여러 변형에 다양한 스타일이 적용되는 경우 단일 스타일만 변환됩니다.