UI 패키지 가져오기
Figma에서 UI 패키지를 만들면 Android 스튜디오 프로젝트로 가져올 수 있습니다. 프로젝트가 빌드되면 Relay에서 Jetpack Compose 코드를 생성합니다.
UI 패키지를 Android 스튜디오 프로젝트로 가져오려면 다음 단계를 따르세요.
File > New > Import UI Packages...를 선택합니다.
UI 패키지가 포함된 Figma 파일의 URL을 입력합니다.
Next를 클릭합니다.
가져오려는 UI 패키지를 선택합니다. 표시되는 구성요소는 구성요소나 페이지, 파일 링크를 붙여넣었는지에 따라 다릅니다. UI 패키지를 이미 가져온 경우 'UPDATED' 라벨이 표시됩니다. 아닌 경우에는 'NEW'로 표시됩니다.
Finish를 클릭하여 선택된 패키지와 종속 항목을
ui-packages폴더로 가져옵니다.
UI 패키지 가져오기 화면
가져오기 화면에는 다음 정보가 포함됩니다.
- 구성요소 및 구성요소의 변형 미리보기 이미지
- 제목과 설명
- 변형 및 변형의 속성 목록
- 콘텐츠 매개변수 및 매개변수의 유형 목록
- 상호작용 핸들러 및 핸들러의 유형 목록
UI 패키지 도구 창
Android 스튜디오 플러그인에는 UI Package라는 도구 창이 추가됩니다. UI 패키지 폴더 내에서 파일을 선택할 때마다 열립니다.
패키지 폴더는 app/src/main/ui-packages/mycomponent/를 예로 들 수 있습니다. 도구 창에는 UI 패키지와 패키지의 콘텐츠 요약이 표시됩니다.
Android 프로젝트 빌드
UI 패키지가 포함된 Android 스튜디오 프로젝트를 빌드하면 Relay Gradle 플러그인이 UI 패키지에서 코드를 생성하여 컴파일합니다. 글꼴 애셋도 다운로드되어 프로젝트에 복사됩니다.
전체 프로젝트가 아닌 가져온 UI 패키지만 빌드하려면 다음과 같은 특정 Gradle 작업을 실행하면 됩니다.
generateDebugRelayCode또는generateReleaseRelayCode는 UI 패키지에서 파생된 코드의 디버그 또는 출시 버전을 생성합니다.generateRelayRuntimeCode는 생성된 코드에서 사용하는 런타임 라이브러리를 만듭니다.
빌드 프로세스 중:
- 코드는 UI 패키지에서 생성되고 별도의 폴더에 저장됩니다.
- 이미지와 글꼴은 일반적으로 생성된 리소스 폴더에 복사됩니다.
폴더 위치는 UI 패키지 및 생성된 코드 이해에 설명되어 있습니다.
UI 패키지 업데이트
새 버전의 디자인이 준비되면 디자이너는 Figma 파일의 이름이 지정된 새 버전을 만들어야 합니다.
Android 스튜디오에서 Project 도구 창이 Android 뷰에 있는지 확인합니다.
모듈의
ui-packages폴더에서 업데이트하려는 UI 패키지 폴더를 마우스 오른쪽 버튼으로 클릭한 다음 Update UI Package(s)를 선택합니다. 다음 예에서는 업데이트할 UI 패키지 5개를 선택했습니다.
ui-packages폴더를 마우스 오른쪽 버튼으로 클릭하여 모든 UI 패키지를 업데이트할 수도 있습니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- UI 패키지 및 생성된 코드 이해
- 제한사항 및 문제 해결
- 기존 코드에 구성요소 매핑