Dev Mode를 이용하면 개발자는 프레임이나 컴포넌트를 마지막으로 편집한 시점을 확인하고 버전 기록의 다른 지점에서 변경된 사항을 비교할 수 있습니다. 디자인과 개발 간의 핸드오프는 반복적일 수 있으므로 변경 사항과 버전 기록을 비교할 수 있으면 프로세스를 명확하게 파악할 수 있습니다. 변경 사항을 비교하면 항상 최신 업데이트를 추적하고 프로덕션 코드를 정확하게 유지할 수 있습니다.

변경 사항 비교

프레임이나 컴포넌트가 마지막으로 본 이후 업데이트된 경우 버전 기록을 비교할 수 있습니다. 또한 분리된 컴포넌트나 디자인 재정의가 있는 인스턴스를 기준 컴포넌트와 비교할 수 있습니다. 

1. 최상위 프레임이나 컴포넌트를 선택합니다.

   팁: Shift 키를 누른 채 캔버스에서 두 컴포넌트를 클릭하여 선택하면 서로 비교할 수 있습니다.

2. 오른쪽 사이드바의 Inspect(검사) 탭에서 Compare changes(변경사항 비교)를 클릭합니다.

• A

  버전 내역

  저장된 버전과 자동 저장된 버전을 포함한 파일 기록의 타임라인을 볼 수 있습니다. 이전 버전을 클릭하면 현재 버전과 비교할 수 있습니다. 버전 기록은 시간 경과에 따라 최상위 프레임을 비교할 때만 표시됩니다.

• B

  편집된 레이어 보기

  Layers(레이어)에서 시간이 지남에 따라 에셋의 개별 레이어가 어떻게 변했는지 확인할 수 있습니다. 레이어 변경 사항은 다음 중 하나로 레이블이 지정됩니다.

  • Edited(편집됨): 현재 버전과 선택한 버전 사이에 레이어가 편집되었습니다.
  • Added(추가됨): 현재 버전과 선택한 버전 사이에 레이어가 추가되었습니다.
  • Deleted(삭제됨): 현재 버전과 선택한 버전 사이에 레이어가 삭제되었습니다.

  목록에서 레이어를 클릭하면 나란히 보기 또는 오버레이 보기에서 선택한 레이어가 확대됩니다.

• C

  나란히

  선택한 버전과 현재 버전의 에셋을 나란히 볼 수 있습니다. 오른쪽의 확대 및 축소 버튼을 사용하여 모달의 확대/축소 설정을 조정합니다.

• D

  오버레이

  선택한 버전 위에 현재 프레임 버전을 오버레이로 표시하면 작은 편집 내용을 돋보이게 하는 데 도움이 됩니다. 오른쪽의 슬라이더를 사용하여 현재 프레임의 투명도를 조정하거나 을 클릭하여 표시 여부를 전환합니다. 오른쪽의 확대 및 축소 버튼을 사용하여 모달의 확대/축소 설정을 조정합니다.

• E

  코드 비교

  편집한 레이어를 선택하면 이전 버전과 현재 버전 간에 업데이트된 코드를 볼 수 있습니다. 이는 코드베이스가 최신 디자인과 일치하는지 확인하는 데 유용합니다.

  드롭다운을 사용하여 코드 패널에 사용할 언어를 선택한 다음 를 클릭하여 원하는 단위를 선택합니다.

  Dev Mode에서 코드 스니펫 사용 방법 알아보기 →

• F

  속성 비교하기

  편집한 레이어를 선택하면 업데이트된 속성이 이전 버전 및 현재 버전에서 할당된 값과 함께 표시됩니다.

포커스 보기에서 변경 사항 비교

Dev Mode에서 디자인에 집중하면 포커스 보기에서 버전 기록을 활용하여 변경 사항을 비교할 수 있습니다. 변경 사항을 비교할 때 인터페이스는 Compare changes(변경 사항 비교)에 자세히 설명된 것과 동일합니다.

포커스 보기에 있는 동안 변경 사항을 비교하려면 다음 안내를 따르세요.

1. Figma Design 파일을 엽니다.
2. 캔버스에서 집중하고 싶은 디자인의 개발 상태 표시기를 클릭하고 Show in focus view(포커스 보기에 표시)를 선택합니다.
   아무것도 선택하지 않은 상태에서는 포커스 보기의 오른쪽에 버전 기록이 표시됩니다.
3. 최신 버전과 비교하려는 버전의 경우 ...를 클릭하고 Compare to latest version(최신 버전과 비교)를 선택합니다.
   
4. 원하는 경우 다른 사람들과 공유할 수 있는 포커스 보기의 링크를 가져오려면 Copy link(링크 복사)를 클릭합니다.

포커스 보기에 대해 자세히 알아보기 →