개요
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 기본 튜토리얼에서는 포괄적이고 전체적인 첫 번째 환경을 제공하는 Relay의 디자이너 워크플로와 개발자 워크플로를 보여줍니다. Relay 플러그인 설정이 끝나면 Android 스튜디오에 UI가 표시되는 단계로 빠르게 진행할 수 있습니다. 참고하시기 바랍니다.
이 튜토리얼에서는 Figma에서 기본 카드 구성요소를 만들어 Android 스튜디오로 가져옵니다. 생성된 코드를 여기서 볼 수 있습니다. 다음을 실행하는 방법을 알아봅니다.
Figma에서:
- Figma에서 UI 구성요소를 디자인합니다.
- Figma 플러그인을 사용하여 UI 패키지를 만듭니다.
- 이름이 지정된 디자인 버전을 저장합니다.
- 개발자와 Figma URL을 공유합니다.
Android 스튜디오에서:
- Figma URL을 사용하여 UI 패키지를 프로젝트로 가져옵니다.
- 프로젝트를 빌드하여 Jetpack Compose 코드를 생성합니다.
- 생성된 컴포저블의 참조를 프로젝트의 UI 코드에 추가합니다.
- 프로젝트를 실행합니다.
다음 단계
먼저 Figma에서 디자인을 만들고 UI 패키지를 만듭니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2024-03-25(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2024-03-25(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2024-03-25(UTC)"]]