개요

이미지 및 제목이 있는 카드 구성요소

이 기본 튜토리얼에서는 포괄적이고 전체적인 첫 번째 환경을 제공하는 Relay의 디자이너 워크플로와 개발자 워크플로를 보여줍니다. Relay 플러그인 설정이 끝나면 Android 스튜디오에 UI가 표시되는 단계로 빠르게 진행할 수 있습니다. 참고하시기 바랍니다.

이 튜토리얼에서는 Figma에서 기본 카드 구성요소를 만들어 Android 스튜디오로 가져옵니다. 생성된 코드를 여기서 볼 수 있습니다. 다음을 실행하는 방법을 알아봅니다.

Figma에서:

  1. Figma에서 UI 구성요소를 디자인합니다.
  2. Figma 플러그인을 사용하여 UI 패키지를 만듭니다.
  3. 이름이 지정된 디자인 버전을 저장합니다.
  4. 개발자와 Figma URL을 공유합니다.

Android 스튜디오에서:

  1. Figma URL을 사용하여 UI 패키지를 프로젝트로 가져옵니다.
  2. 프로젝트를 빌드하여 Jetpack Compose 코드를 생성합니다.
  3. 생성된 컴포저블의 참조를 프로젝트의 UI 코드에 추가합니다.
  4. 프로젝트를 실행합니다.

다음 단계

먼저 Figma에서 디자인을 만들고 UI 패키지를 만듭니다.