이 섹션에서는 Figma에서 구성요소를 변경하는 방법(여기서는 텍스트의 형식 변경)을 알아보고 이전 프로젝트를 바탕으로 빌드하여 변경사항이 Android 스튜디오의 코드베이스에 전파되는 것을 확인합니다.
Figma 변경사항
Figma 구성요소를 업데이트해 보겠습니다. Figma 파일로 돌아갑니다.
Title 텍스트 레이어를 선택합니다. 텍스트 섹션에서 스타일을 굵게로 변경합니다.
이름이 지정된 버전 저장
이제 업데이트된 구성요소를 코드베이스에 통합합니다. 개발자가 새 버전의 구성요소를 사용하도록 하려면 버전 저장 단계를 반복합니다.
Figma Relay 플러그인이 열려 있지 않으면 엽니다.
개발자와 공유를 클릭합니다.
개발자와 공유 화면에서 버전 기록 저장 섹션에 새 버전의 이름과 설명을 입력할 수 있습니다.
Mac에서는 CMD-L을, Windows에서는 Ctrl-L을 눌러 클립보드에 새 링크를 복사합니다.
구성요소 코드 업데이트
이제 구성요소를 다시 가져옵니다.
Android 스튜디오에서 Project 도구 창이 Android 뷰에 있는지 확인합니다. 그런 다음
app/ui-packages/hello_card/를 마우스 오른쪽 버튼으로 클릭하고 Update UI Package를 선택합니다.
오른쪽 하단의 로드 표시줄이 완료될 때까지 기다립니다.
를 클릭하여 프로젝트를 빌드하고 app/java/com/example/hellofigma/MainActivity.kt미리보기에서 업데이트된 구성요소를 확인합니다. 이제 텍스트가 굵게 표시됩니다.
앱을 실행하여 에뮬레이터에서 동일한 업데이트를 확인합니다.
다음 단계
이제 디자인을 업데이트하고 결과 코드도 어떻게 업데이트되는지 확인했으므로 구성요소에 변수 데이터를 허용하는 콘텐츠 매개변수로 디자인에 주석을 추가하는 방법을 알아보겠습니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- 콘텐츠 매개변수
- Android 스튜디오에서 디자인을 코드로 변환