UI 패키지 공유

권장사항

공유하기 전에 오류를 확인하고 이름이 지정된 버전을 만드세요.

구성요소 또는 구성요소 페이지를 공유할 준비가 되면 이름이 지정된 버전을 만들어 UI 패키지 정의를 안정적으로 유지할 수 있습니다. 이렇게 하면 Figma 파일 변경사항이 프로덕션 구성요소에 영향을 주지 않습니다.

  1. 플러그인에서 '개발자와 공유' 옵션을 클릭합니다.

    Android 뷰의 StatusCard
  2. 개발자가 구성요소를 사용하지 못하게 하는 오류가 목록으로 표시됩니다. 먼저 오류를 해결하세요.

  3. 모든 차단 오류가 해결되면 버전 기록을 저장할 수 있습니다. 이는 Figma 내에 버전 기록을 저장하는 것과 같습니다. 새 버전의 제목과 설명을 입력합니다. 저장을 클릭합니다.

    Android 뷰의 StatusCard
  4. 새 버전은 Figma 내에 버전 기록으로 저장됩니다.

    Android 뷰의 StatusCard

이렇게 하면 Android 스튜디오 프로젝트가 이름이 지정된 최신 버전에 연결되므로 원활한 업데이트가 가능해집니다. 파일에 이름이 지정된 버전이 없는 경우 Android 스튜디오의 업데이트는 항상 자동 저장된 최신 버전을 가져옵니다. 하지만 이름이 지정된 버전을 사용하는 것이 좋습니다.

준비가 되면 Figma URL 링크를 통해 UI 패키지를 개발자와 공유할 수 있습니다.

한 페이지에서 모든 UI 패키지 공유

왼쪽 패널의 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지에 링크 복사를 선택합니다.

페이지의 모든 UI 패키지가 공유됩니다. 개발자는 Figma 페이지에서 UI 패키지의 일부 또는 전체를 가져오도록 선택할 수 있습니다.

특정 UI 패키지 공유

구성요소를 선택한 상태에서 마우스 오른쪽 버튼을 클릭하고 복사/붙여넣기 > 링크 복사를 선택합니다.

선택한 UI 패키지만 URL을 통해 공유됩니다. 개발자는 공유된 UI 패키지만 가져올 수 있습니다.

파일의 모든 UI 패키지 공유

Figma 데스크톱에서 탭을 마우스 오른쪽 버튼으로 클릭하여 URL을 복사하고 Copy link(링크 복사)를 선택합니다.

https://www.figma.com/file/sample_file_id/FileName?node-id=1234567

URL에서 노드 ID 뒤의 모든 항목을 삭제합니다. 새 URL을 개발자와 공유합니다.

https://www.figma.com/file/sample_file_id/FileName

개발자는 Figma 파일로 모든 UI 패키지를 가져올 수 있습니다.

페이지의 모든 UI 패키지를 특정 버전으로 공유

Figma에서 버전 기록 패널을 엽니다. 마우스 오른쪽 버튼을 클릭하고 Copy link(링크 복사)를 선택합니다.

개발자는 지정된 이름이 지정된 버전에서 페이지의 모든 UI 패키지를 가져올 수 있습니다.

Android 뷰의 StatusCard

고급 사용법

Relay 워크플로는 동일한 프로젝트에서 여러 UI 패키지 버전을 가져올 수 있도록 지원하지만, 수동으로 Figma 파일 URL을 작성해야 합니다.

  1. 가져오려는 구성요소의 직접 링크를 복사합니다. 구성요소 레이어를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 Copy/Paste as > Copy link(복사/다음으로 붙여넣기 > 링크 복사)를 선택합니다. 예:

    www.figma.com/file/sample_file_id/FileName?node-id=123%3A45

  2. 사용할 구성요소의 버전을 선택합니다. File > Show version history(파일 > 버전 기록 표시)로 이동하여 버전을 선택합니다. 그런 다음 마우스 오른쪽 버튼을 클릭하고 Copy link(링크 복사)를 선택하여 버전의 URL을 복사합니다. 예를 들면 다음과 같습니다.

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=0%3A1&viewport=2425%2C1794%2C2.99

  3. 두 URL을 결합하여 구성요소의 버전이 지정된 URL을 만듭니다. 버전이 지정된 링크의 node-id 값을 구성요소 링크의 값으로 바꾸거나 version-id 매개변수를 구성요소 링크에 삽입할 수 있습니다. 단, URL에 두 매개변수가 모두 들어가야 합니다. 예를 들면 다음과 같습니다.

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45