Android 스튜디오에서 디자인을 코드로 변환

Figma에서 디자인 가져오기

이제 Figma에서 만든 UI 패키지를 Android 스튜디오 프로젝트 UI 패키지를 통합하려면 가져오기 마법사로 붙여넣습니다.

  1. 사전 구성된 Android 스튜디오 프로젝트 ZIP 파일을 다운로드합니다. Relay 설치 페이지와 동일한 프로젝트입니다.

  2. 파일을 더블클릭하여 압축을 풀면 HelloFigma라는 폴더가 생성됩니다. 이를 홈 폴더로 옮깁니다.

  3. Android 스튜디오로 돌아갑니다. File > Open으로 가서 홈 폴더로 이동하고 HelloFigma를 선택한 후 Open을 클릭합니다.

  4. 프로젝트를 열면 Android 스튜디오에서 프로젝트를 신뢰할 수 있는지 묻는 메시지가 표시됩니다. Trust Project를 클릭합니다.

  5. Android 스튜디오에서 File > New > Import UI Packages...를 선택합니다.

    File 메뉴의 Import UI Packages… 옵션

  6. 'Import UI Packages' 대화상자에서 Figma 파일의 URL을 붙여넣고 Next를 클릭합니다.

    Import UI Packages 대화상자
    키 체인 시스템 대화상자

  7. 파일이 다운로드될 때까지 기다립니다. 다운로드가 완료되면 구성요소 미리보기가 표시됩니다. 만들기를 클릭합니다.

    구성요소 미리보기

    새 파일이 프로젝트에 추가되었습니다. 이러한 파일은 프로젝트의 일부로 소스 제어에 커밋되어야 합니다. 프로젝트의 Android 뷰에는 다음이 표시됩니다.

    Android 뷰의 UI-packages 폴더

    • app/ui-packages/hello_card/*
      코드에서 구성요소를 설명하는 데 필요한 모든 소스 애셋입니다. 이러한 파일은 빌드 단계에서 코드 생성에 사용됩니다.

    • app/ui-packages/hello_card/hello_card.json
      구성요소의 정의(레이아웃 및 기타 속성 포함)가 포함된 JSON 파일입니다.

    • app/ui-packages/hello_card/fonts/*
      Jetpack Compose의 구성요소를 지원하는 데 필요한 모든 글꼴 파일입니다.

    • app/ui-packages/hello_card/*.png 또는 *.jpeg
      구성요소를 지원하는 데 필요한 모든 이미지 애셋입니다.

    • app/ui-packages/hello_card/VERSION.txt
      UI 패키지를 가져오는 데 사용되는 Android 스튜디오용 Relay 플러그인 버전입니다.

    • app/ui-packages/hello_card/config.json
      미리보기에 사용되는 테마입니다.

코드 빌드 및 생성

  1. Make Project 버튼를 클릭하여 프로젝트를 빌드합니다.

    툴바의 Make Project 버튼

  2. 빌드 결과를 확인하려면 Build 탭을 클릭합니다.

    Android 스튜디오 하단의 Build 탭

  3. 생성된 코드가 이제 프로젝트에 추가됩니다. 이 코드는 생성된 코드이므로 프로젝트의 일부로 소스 제어에 커밋하면 안 됩니다. 프로젝트의 Android 뷰에서 다음을 확인할 수 있습니다.

    Android 뷰의 생성된 코드

    • app/java (generated)/com/example/hellofigma/hellocard
      생성된 Jetpack Compose 코드 및 글꼴입니다.

    • app/java (generated)/com/google/relay/compose
      모든 UI 패키지에서 사용되는 공유 런타임 코드입니다.

  4. app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt를 엽니다. 이는 Figma 구성요소에 관해 생성된 Jetpack Compose 함수입니다. 구성요소를 미리 볼 수도 있습니다.

    이제 레이아웃, 애셋, 스타일 지정 정보가 Figma에서 코드로 전송됩니다.

    구성요소 미리보기

    코드에서 Figma에 추가된 요약이 이제 생성된 컴포저블 위의 주석으로 변환됩니다.

     /**
 * Hello Card component used to display the image and the title content
 *
 * This composable was generated from the UI package ‘ hello_card’
 * Generated code; do not edit directly
 */
@Composable
fun HelloCard(modifier: Modifier = Modifier) {...

구성요소 통합 및 앱 실행

이제 구성요소를 기본 활동에 통합해 보겠습니다.

  1. app/java/com/example/hellofigma/MainActivity.kt에서 상단의 가져오기 섹션에 다음을 추가합니다.

    import com.example.hellofigma.hellocard.HelloCard

  2. 같은 파일 아래쪽에 있는 MainActivity 클래스에서 다음과 같이 코드를 변경합니다.

    class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloFigmaTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    // Greeting("Android") // Delete this line
                    HelloCard()  // Add this line
                }
            }
        }
    }
}

  3. 같은 파일 아래쪽에 있는 컴포저블의 미리보기에서 다음과 같이 한 줄을 변경합니다.

    @Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    HelloFigmaTheme {
        HelloCard() // Change this line
    }
}

  4. 툴바에서 기기가 선택되어 있는지 확인합니다.

  5. 툴바에서 ▶를 클릭하여 프로젝트를 실행합니다.

    툴바의 실행 버튼

    에뮬레이터가 부팅되고 프로젝트가 빌드되며 앱이 시작됩니다.

    에뮬레이터의 앱 미리보기

    축하합니다. 첫 번째 Figma 구성요소를 Jetpack Compose 앱에 통합했습니다.

다음 단계

디자인 업데이트 만들기 및 전파

이제 완전히 작동하는 예를 살펴봤으므로 원래 디자인을 업데이트하고 코드를 다시 생성하는 방법을 살펴보겠습니다.