Dev Mode 후속 업데이트:

Figma는 Dev Mode 오픈 베타 2개월 동안 사용자 피드백 5,000건 이상을 반영해 200개가 넘는 기능과 수정 사항을 배포했다. 이번 업데이트의 핵심은 디자인 파일을 개발자가 더 쉽게 탐색·검수하고, 코드 생성 결과를 실제 개발 환경에 가깝게 만드는 것이다. 상태 라벨, 버전 비교, 향상된 코드 스니펫, VS Code 연동 등으로 디자이너와 개발자 간 협업 효율을 높였다.

Dev Mode에 새로 추가된 기능

• 컴포넌트, 인스턴스, 프레임, 섹션에 개발 준비 상태를 나타내는 상태 라벨을 추가할 수 있다.
• Design Mode에서 제공되던 레이아웃 그리드, 룰러, 아웃라인 모드를 View 메뉴와 기존 단축키로 사용할 수 있다.
• 분리(detached)된 컴포넌트를 원본 메인 컴포넌트와 비교해 변경 사항을 확인할 수 있다.
• 코드 옵션으로 Android XML과 iOS UIKit이 다시 제공된다.
• 색상 형식에서 UIColor를 선택할 수 있다.
• 파일 이름을 클릭하면 버전 기록의 여러 디자인 버전을 열어 검사할 수 있다.

사용성 및 성능 개선

• 외부 라이브러리에서 가져온 디자인 시스템 컴포넌트의 라이브러리 이름을 표시한다.
• 컴포넌트 플레이그라운드에서 중첩된 컴포넌트 속성과 컴포넌트 모드를 확인하고 실험할 수 있다.
• 텍스트 속성에는 rem 단위를 사용하면서, 다른 속성은 픽셀 단위로 유지할 수 있다.
• 캔버스에서 여러 객체를 Shift 클릭으로 선택하고 한 번에 내보낼 수 있다.
• Figma 파일과 알림을 VS Code 내부에서 확인할 수 있다.
• 타이포그래피 미리보기에서 스타일 이름, 글자 크기, 줄 높이 같은 속성을 확인하고 복사할 수 있다.
• 텍스트의 특정 부분만 선택해 개별 속성을 검사할 수 있다.
• 왼쪽 레이어 패널의 높이를 드래그로 조절할 수 있다.
• 원시 값과 일치 가능성이 높은 디자인 시스템 변수를 자동으로 제안한다.
• 코드 스니펫뿐 아니라 Figma 속성 형식으로도 값을 확인할 수 있다.
• 디자인에 포함된 이미지 등의 소스 파일을 다운로드할 수 있다.
• 대체 단위 설정을 일반 환경설정 메뉴에서 쉽게 찾을 수 있다.
• 섹션을 선택하면 프레임별 링크를 모아서 확인할 수 있다.

코드 생성 개선

• Shift 키를 누른 채 모든 코드 스니펫을 한 번에 복사할 수 있다.
• 하나의 패딩 값만 설정된 경우에도 CSS에서 padding-top, padding-bottom, padding-left, padding-right를 생성한다.
• 코드에 font-style, line-height, font-weight를 항상 표시한다.
• line-height를 백분율과 픽셀 값으로 함께 제공한다.
• CSS 코드 생성에서 다음 OpenType 기능을 지원한다.
  • font-feature-settings
  • font-variant-numeric
  • font-kerning
• 오토 레이아웃의 min-width, max-width, min-height, max-height와 줄바꿈 레이아웃의 세로 간격에 변수를 사용할 수 있다.
• 여러 문단이나 서로 다른 텍스트 스타일이 섞인 텍스트 레이어는 스타일별 CSS 코드를 개별적으로 표시한다.
• 커뮤니티에는 Tailwind, React, Vue 등을 위한 약 80개의 코드 생성 플러그인이 제공된다.

버그 수정 및 탐색 개선

• 탭 키 내비게이션으로 Design Mode와 Dev Mode 사이를 전환할 수 있다.
• 힌트와 툴팁 전반에서 대체 단위를 올바르게 표시한다.
• 텍스트 그라디언트 표시를 개선하는 등 시각적 품질 문제를 수정했다.

이번 업데이트는 Dev Mode를 단순한 디자인 검사 도구가 아니라, 디자인 시스템 확인·코드 생성·파일 관리·개발 환경 연동을 아우르는 협업 작업 공간으로 발전시키는 데 초점을 맞췄다. 팀에서는 상태 라벨과 버전 기록을 개발 핸드오프 과정에 적극 활용하고, 생성된 CSS나 플랫폼 코드는 실제 프로젝트 규칙과 비교해 검토하는 것이 좋다.