피그마는 'Dev Mode'를 정식 출시하며 베타 기간 수집된 피드백을 바탕으로 200개 이상의 기능 개선과 오류 수정을 단행했습니다. 이번 업데이트의 핵심은 디자인과 코드 사이의 물리적·심리적 간극을 좁혀 개발자가 디자인 의도를 더 정확하게 파악하고 구현할 수 있도록 환경을 고도화하는 데 있습니다. 이를 통해 협업의 마찰을 줄이고 제품 개발 주기를 획기적으로 단축하는 것을 최종 목표로 합니다.

변경 사항 추적과 워크플로우 가시성 확보

디자인 변경 이력을 시각적으로 비교할 수 있는 'Compare changes' 기능을 통해, 이전 버전과 현재 버전 사이에 어떤 요소가 수정되었는지 한눈에 파악할 수 있습니다.
'Ready for dev' 상태 관리 기능을 강화하여 개발자가 어떤 화면이 구현 준비가 완료되었고, 어떤 부분이 수정 중인지 실시간으로 확인하며 작업 우선순위를 정할 수 있습니다.
섹션 상태 알림 기능을 통해 특정 컴포넌트나 화면의 작업 완료 여부를 팀원들에게 즉각적으로 공유할 수 있는 체계를 마련했습니다.

Code Connect를 활용한 디자인-코드 동기화

'Code Connect' 기능을 도입하여 피그마 내 컴포넌트와 실제 프로덕션 코드(React, SwiftUI, Jetpack Compose 등)를 직접 연결할 수 있습니다.
개발자는 디자인 가이드에서 단순히 속성값을 복사하는 것을 넘어, 실제 라이브러리에 정의된 코드 조각(Snippet)을 바로 확인하고 프로젝트에 적용할 수 있습니다.
이를 통해 디자인 시스템의 일관성을 유지하고, 불필요한 커스텀 코드 작성을 방지하여 코드 품질을 상향 평준화합니다.

외부 도구 연동 및 플러그인 생태계 확장

Jira, GitHub, Storybook 등 개발자가 주로 사용하는 외부 협업 도구와의 통합을 강화하여 피그마를 벗어나지 않고도 티켓 상태를 확인하거나 문서를 참조할 수 있습니다.
개발자 중심의 플러그인을 통해 에셋 최적화, 코드 생성, 데이터 주입 등 반복적인 작업을 자동화할 수 있는 환경을 구축했습니다.
VS Code용 피그마 확장을 통해 편집기 내에서 디자인을 직접 검사하고 변경 사항을 즉시 반영하는 긴밀한 워크플로우를 제공합니다.

검사(Inspection) 성능 및 사용자 경험 개선

복잡한 레이아웃 구조에서도 속성값을 빠르고 정확하게 추출할 수 있도록 검사 도구의 성능과 UI를 대폭 개선했습니다.
에셋 다운로드 시 파일 포맷 지정 및 해상도 설정을 더욱 세밀하게 조정할 수 있어 리소스 관리 효율이 높아졌습니다.
박스 모델(Box model) 시각화 및 단위 변환 기능을 정교화하여 개발자가 디자인 의도에 맞는 CSS나 스타일 코드를 작성하기 용이해졌습니다.

단순히 디자인을 '보는' 도구에서 디자인을 '코드로 해석하는' 플랫폼으로 진화한 피그마의 Dev Mode를 적극 활용해 보세요. 특히 Code Connect를 도입하여 디자인 시스템과 실제 코드 저장소를 연결한다면, 디자인 전달 과정에서 발생하는 소통 비용을 획기적으로 줄일 수 있을 것입니다.