사전 구성된 Figma 파일 다운로드
먼저 Figma에서 구성요소를 만들어 보겠습니다. 이 튜토리얼에서는 기존 Figma 파일을 예로 사용합니다. 이 파일에는 이미지와 제목이 있는 자동 레이아웃 프레임이 포함되어 있습니다. Figma 계정에 로그인했는지 확인합니다.
- 이 Figma 파일을 컴퓨터에 다운로드합니다. HelloFigma.fig.
Figma의 파일 브라우저에서 Drafts 위로 마우스를 가져갑니다. + 아이콘이 표시됩니다. +와 Import...를 차례로 클릭하고 방금 다운로드한 HelloFigma.fig 파일을 선택합니다.
Figma에서 가져온 파일을 엽니다.
구성요소 만들기
가져온 디자인을 Figma용 Relay 플러그인과 함께 사용하려면 먼저 구성요소를 구성요소로 변환해야 합니다. Hello Card 프레임을 선택하고 툴바에서 Create Component(구성요소 만들기)를 클릭합니다.
UI 패키지 만들기
Figma용 Relay 플러그인은 구성요소에 추가 정보를 추가하므로 개발자는 코드에서 구성요소를 사용할 수 있는 개발자와 함께 작업할 수 있습니다.
파일에서 Figma용 Relay 플러그인을 엽니다 (Figma 메뉴에서 Plugins > Relay for Figma). 시작하기를 클릭합니다.
구성요소를 선택하고 Create UI Package를 클릭합니다.
UI 패키지를 선택한 상태에서 Summary에 설명을 추가합니다. 예: '이미지와 제목 콘텐츠를 표시하는 데 사용되는 Hello Card 구성요소'
다음 화면으로 이동하려면 대화상자의 오른쪽 하단에서 개발자와 공유를 클릭합니다.
개발자 플로우와 공유
이제 UI 패키지를 만들었으므로 구성요소를 준비하여 개발팀과 공유할 수 있습니다.
구성요소 파일 파일의 이름이 지정된 새 버전을 만듭니다. 구성요소의 이름이 지정된 버전을 사용하면 원치 않는 변경사항이 프로덕션 구성요소에 영향을 주지 않도록 방지할 수 있습니다.
구성요소의 첫 번째 버전에 대한 이름과 설명을 입력한 다음 저장을 클릭합니다.
그런 다음 공유 가능한 구성요소 링크를 만들고 Mac에서는 CMD-L을, Windows에서는 Ctrl-L을 입력하여 클립보드에 복사합니다.
다음 단계
이제 UI 구성요소를 Android 스튜디오에 전달할 수 있습니다.
Android 스튜디오를 열어 이 튜토리얼의 다음 부분을 완료하세요.