Figma의 Dev Mode는 디자인 파일을 탐색하고 디자인을 코드로 변환하는 데 필요한 모든 것을 제공합니다. Dev Mode를 사용하면 디자이너와 개발자가 같은 정보를 공유할 수 있어 핸드오프 과정에서 중요한 세부 정보를 놓치지 않을 수 있습니다.

개발자는 Dev Mode를 사용하여 다음 작업을 수행합니다.

• 고급 검사 기능과 더 많은 코드 생성 언어에 액세스합니다.
• 프레임 버전을 쉽게 비교하여 최신 사양으로 개발하고 있는지 확인합니다.
• 상태 및 주석을 사용하여 개발 준비가 완료된 디자인을 빠르게 검토합니다.
• JIRA, Storybook, GitHub와 같은 개발자 중심의 통합으로 워크플로우를 간소화합니다.
• 파일 편집 없이 구성요소 세트의 모든 베리언트를 살펴봅니다.
• 디자인을 티켓, 문서 및 코드 구성요소에 연결합니다.
• Figma for VS Code 확장 프로그램을 사용하여 디자인을 검사하고 함께 코드를 작성합니다.

Dev Mode 들어가기

Dev Mode는 디자인을 검사하고 탐색하기 위한 개발자 중심 인터페이스입니다. 모든 Figma Design 파일에서 Dev Mode에 액세스할 수 있습니다. 디자인 모드와 Dev Mode 간을 전환하려면 다음 안내를 따르세요.

1. Figma Design 파일을 엽니다.
2. Dev Mode 토글을 클릭하거나 키보드 단축키 ShiftD를 사용합니다.

탐색

Dev Mode에서 왼쪽 사이드바를 사용하면 개발 준비 완료로 표시된 디자인 사이를 손쉽게 오갈 수 있습니다.

• A

  개발 준비가 완료된 에셋 보기

  Dev Mode 아이콘은 개발 준비 완료로 표시된 프레임, 구성요소, 인스턴스 및 섹션이 포함된 페이지를 나타냅니다. 준비됨으로 표시된 캔버스의 개체는 Dev Mode 레이어 패널의 개발 준비 완료 아래에 표시됩니다.

  에셋을 개발 준비 완료로 표시하려면 다음 안내를 따르세요.

  1. Dev Mode에서 프레임, 구성요소, 인스턴스 또는 섹션을 선택합니다.
  2. 툴바에서 개발 준비 완료로 표시를 클릭합니다.

  또한 조직이나 기업에서 풀 시트, 데브 시트 또는 뷰어 시트가 있는 경우 Dev Mode는 개발 준비 완료로 표시된 디자인의 뷰를 제공합니다. 개발 준비 완료 뷰는 파일에서 하나 이상의 디자인이 개발 상태인 경우에만 표시됩니다.

• B

  프레임이 마지막으로 편집된 시점 파악

  탐색 패널의 프레임 이름에서 프레임이 마지막으로 편집된 시점을 확인할 수 있습니다.

• C

  프레임 및 레이어 탐색

  Design Mode에서는 누구나 관련 콘텐츠를 섹션으로 그룹화하고 섹션을 개발 준비 완료로 표시할 수 있습니다. Dev Mode는 섹션의 콘텐츠에 우선순위를 둡니다. 섹션 외부의 모든 콘텐츠는 왼쪽 사이드바에 계속 표시되지만 기본적으로 접혀 있습니다.

  왼쪽 사이드바에서 프레임을 클릭하여 캔버스 중앙에 배치합니다. 캔버스에서 프레임을 선택하면 그 안에 중첩된 레이어를 볼 수 있습니다. 프레임을 선택하면 탐색 패널이 레이어 패널로 변경되고 현재 선택된 최상위 프레임의 레이어만 표시됩니다.

  Dev Mode에서 프레임 및 레이어 탐색 ->

검사

검사 패널에는 디자인을 이해하고 이를 코드로 변환하는 데 필요한 디자인 사양과 관련 구성요소 정보가 표시됩니다.

• A

  디자인 변경 사항 비교

  마지막으로 파일을 확인한 이후에 변경 사항이 발생한 경우 변경 사항 비교가 검사 패널의 레이어 정보 옆에 표시됩니다. 링크를 클릭하면 현재 버전과 이전 버전의 디자인을 비교할 수 있는 프레임 기록 모달이 열립니다.

  분리된 구성요소를 이전 버전 및 이전에 연결되었던 기본 구성요소와 비교할 수도 있습니다. 분리 기록을 지우면 원래 기본 구성요소에 대한 정보가 표시되지 않도록 할 수 있습니다.

  Dev Mode에서 변경 사항 비교 ->
• B

  개발자를 위한 외부 링크 및 리소스 추가

  디자이너와 개발자 모두 구성요소 구현에 도움이 될 수 있는 외부 리소스에 대한 링크를 추가할 수 있습니다. 여기에는 GitHub, Jira 및 Storybook 링크뿐만 아니라 Figma for VS Code 확장 프로그램과 함께 사용할 수 있는 VS Code 링크도 포함될 수 있습니다. 구성요소에 추가된 개발 리소스는 해당 구성요소의 모든 인스턴스로 전파됩니다.

  Dev Mode에서 레이어에 리소스 링크 추가 →

C

맞춤설정 가능한 코드 스니펫으로 더 빠르게 개발

• D

  레이어 이름 및 유형 보기

  선택한 레이어의 이름은 검사 패널 상단에 레이어 유형(구성요소, 인스턴스, 프레임, 텍스트 등)과 함께 표시됩니다. 레이어가 마지막으로 업데이트된 시점도 확인할 수 있습니다.

• E

  구성요소 플레이그라운드에서 구성요소 변형 시도하기

  구성요소 또는 인스턴스를 선택하면 구성요소 미리보기, 기본 구성요소에 대한 링크, 관련 문서 및 개발 리소스에 대한 링크가 표시됩니다.

  구성요소 인스턴스를 선택하면 구성요소 플레이그라운드가 검사 패널에 나타납니다. 플레이그라운드를 사용하여 실제 디자인을 변경하지 않고 구성요소의 다양한 속성을 실험할 수 있습니다.

• F

  적용된 스타일 보기

  선택한 레이어에 적용된 스타일과 변수를 확인합니다. 또한 변수 세부 정보 열람이 가능하고 제안된 변수도 얻을 수 있습니다.

• G

  에셋 다운로드

  Dev Mode는 아이콘을 자동으로 감지하여 개발자에게 다운로드 가능한 에셋으로 제공할 수 있습니다. 아이콘에 포함된 개별 벡터 레이어를 검사하려면 자동 아이콘 감지 기능을 비활성화 하세요.

  1. 툴바에서 메인 메뉴를 클릭합니다.
  2. 드롭다운에서 보기 위로 마우스 커서를 올립니다.
  3. 아이콘 자동 감지를 선택 해제합니다.

  에셋을 사용하면 GIF 이미지 및 MP4 비디오 노드를 다운로드할 수도 있습니다.

• H

  내보내기

  레이어에 내보내기 설정을 적용하여 형식과 기타 내보내기 설정을 정의할 수 있습니다. Figma에서는 PNG, JPG, SVG, PDF와 같은 내보내기 형식을 지원합니다. Figma에서 내보내기에 대해 자세히 알아보기 →

주석 달기

디자이너는 어노테이션을 사용하여 추가 컨텍스트, 사양 및 측정값으로 디자인을 마크업할 수 있습니다. 이를 통해 개발자는 핸드오프 중에 중요한 콜아웃을 놓치지 않을 수 있습니다. Dev Mode에서 어노테이션과 측정값을 사용하여 다음과 같은 작업을 수행할 수 있습니다.

• 개발자가 놓치지 않도록 중요한 속성을 표시합니다.
• 개발자가 간격과 크기를 빠르게 시각화할 수 있도록 돕습니다.
• 디자인에 직접 연결된 텍스트 메모로 추가 컨텍스트를 추가합니다.

Dev Mode에서 측정값을 추가하고 디자인에 어노테이션 다는 방법 알아보기 →

개발자 핸드오프 관리

개발 준비 완료로 표시된 섹션, 프레임, 컴포넌트가 있는 경우, Dev Mode의 개발 준비 완료 뷰 및 포커스 뷰를 활용하여 개발자 핸드오프 프로세스를 관리할 수 있습니다.

• Ready for Dev 보기는 파일에서 개발 준비 완료로 표시된 모든 디자인을 쉽게 탐색할 수 있는 방법을 제공합니다. 개발 준비 완료로 표시된 모든 디자인을 필터링하여 볼 수 있습니다. Ready for Dev 보기 및 핸드오프 프로세스에 대해 자세히 알아보기 →
  

• 포커스 보기는 개발 준비가 완료된 디자인을 한 번에 하나만 표시합니다. 일반적인 Dev Mode 도구를 모두 사용하고, 디자인의 레이어를 탐색하며, 주석이 달린 버전 기록과 같은 중요한 정보를 찾을 수 있습니다. 포커스 보기에 대해 자세히 알아보기 →
  

Dev Mode 상태 및 알림

Dev Mode의 상태 및 알림은 개발자 핸드오프를 관리하는 데 도움이 됩니다. 상태는 섹션, 프레임 또는 컴포넌트가 개발 준비가 완료된 시점을 추적하는 데 사용됩니다. 알림은 상태 변경에 기반하여 개발자가 디자인 상태에 대응할 수 있도록 합니다.

상태

Dev Mode를 제공하는 모든 요금제에는 Ready for dev(개발 준비 완료) 상태가 포함됩니다. 디자인이 개발할 준비가 되었다는 것을 나타내기 위해 컴포넌트, 프레임, 섹션에 Ready for dev 상태를 설정할 수 있습니다. 오거니제이션 또는 엔터프라이즈 요금제를 사용하는 경우 Completed(완료)라는 상태를 추가로 사용할 수 있습니다.

상태 사용 방법 등의 자세한 내용은 Dev Mode 상태 및 알림을 참조하세요.

알림

Dev Mode에서 파일을 본 적이 있고 풀 시트 또는 데브 시트가 있는 경우 해당 파일에서 디자인이 개발 준비 완료로 표시될 때마다 알림을 받습니다. 여기에는 디자인이 처음 개발 준비 완료로 표시된 경우와 개발 준비 완료 상태가 삭제되었다가 다시 설정된 경우가 포함됩니다.

Dev Mode 알림을 켜고 끄는 방법을 포함한 자세한 내용은 Dev Mode 상태 및 알림을 참조하세요.

Dev Mode 플러그인 사용

Dev Mode 플러그인을 사용하면 작업을 자동화하고 문서화 및 커뮤니케이션을 위한 다른 도구를 연결할 수 있습니다. 예시는 다음과 같습니다.

• Figma, FigJam 및 Dev Mode에서 Jira와 동기화하여 개발 작업을 계속 진행합니다.
• Storybook을 사용하여 Figma Design 시스템과 코드로 된 디자인 시스템을 연결합니다.
• Github를 Figma로 가져와 항상 동기화 상태를 유지하도록 디자인을 코드에 연결합니다.
• 코드 출력(Tailwind 또는 React용)을 맞춤설정하거나 자체 코드 구성요소에 대해 맞춤설정합니다.

Dev Mode의 플러그인 탭에는 최근 사용한 플러그인과 Figma 커뮤니티에서 추천하는 플러그인이 표시됩니다.

파일에서 플러그인을 사용하는 방법 알아보기 →

Dev Mode 플러그인 실습에 대한 자세한 내용은 Dev Mode 플레이그라운드 파일을 위한 플러그인을 확인하세요.

Figma for VS Code

Figma for VS Code를 사용하면 텍스트 편집기를 벗어나지 않고도 디자인 파일을 탐색 및 검사하고 디자이너와 협업하며 디자인 변경 사항을 추적하고 디자인 구현 속도를 높일 수 있습니다. 디자인을 코드로 변환하는 데 필요한 컨텍스트 전환과 바쁜 작업을 제거하여 개발자 생산성을 향상시킵니다.

• 실시간으로 코멘트 및 활동을 확인하고 응답할 수 있습니다.
• 디자인에 기반한 코드 제안을 확인할 수 있습니다.
• 코드 파일을 디자인 구성요소와 연결할 수 있습니다.

Figma for VS Code 확장 프로그램에 대해 자세히 알아보기 →