피그마는 디자이너와 개발자 사이의 워크플로우 간극을 좁히고 협업 효율을 극대화하기 위해 새로운 '개발자 모드(Dev Mode)'를 도입했습니다. 이 기능은 개발자가 디자인 의도를 정확하게 파악하고 코드로 변환하는 과정을 단순화하며, 개발 환경과 디자인 도구를 밀접하게 연결하는 데 중점을 둡니다. 결론적으로 개발자 모드는 단순한 디자인 뷰어를 넘어 개발 생산성을 직접적으로 높여주는 통합 플랫폼으로 진화했습니다.

개발자 중심의 검사 및 구현 환경

디자인 파일 내에서 '개발자 모드' 스위치를 켜는 것만으로 개발에 최적화된 인터페이스로 전환할 수 있으며, 복잡한 디자인 레이어 대신 코드 구현에 필요한 치수, 속성, 에셋 정보를 우선적으로 노출합니다.
CSS, iOS, Android 등 플랫폼별 맞춤형 코드 스니펫을 즉시 생성하며, 박스 모델(Box model)과 픽셀 측정 기능을 통해 정교한 레이아웃 구현을 돕습니다.
'변경 사항 비교(Compare changes)' 기능을 통해 마지막으로 확인한 시점 이후 디자인에 어떤 수정이 있었는지 시각적으로 파악할 수 있어, 반복적인 커뮤니케이션 비용을 줄여줍니다.

VS Code 확장 프로그램을 통한 워크플로우 통합

Figma for VS Code 익스텐션을 지원하여 개발자가 편집기를 떠나지 않고도 디자인 파일을 확인하고 에셋을 추출하며 코멘트를 남길 수 있는 환경을 구축했습니다.
디자인의 속성을 코드 스니펫으로 바로 복사해 붙여넣을 수 있을 뿐 아니라, 코드 작성 중에 디자인 의도를 실시간으로 참조할 수 있어 컨텍스트 스위칭을 최소화합니다.
에디터 내에서 피그마 알림을 받고 직접 대응할 수 있어, 디자이너와의 실시간 협업이 더욱 간편해졌습니다.

외부 도구 및 디자인 시스템 연동

Jira, Storybook, GitHub 등 개발 현업에서 널리 쓰이는 도구들과의 플러그인 연동을 지원하여, 디자인 요소와 연관된 티켓이나 코드 문서를 연결할 수 있습니다.
디자인 시스템의 컴포넌트 정보와 실제 구현된 코드를 직접 링크할 수 있어, 팀 전체가 동일한 소스(Single Source of Truth)를 바탕으로 개발할 수 있도록 지원합니다.
개발자는 플러그인을 활용해 자신의 워크플로우에 맞는 맞춤형 코드 생성 자동화 환경을 구축할 수 있습니다.

섹션 상태 관리와 효율적인 핸드오프

디자이너는 특정 프레임을 '개발 준비 완료(Ready for dev)' 상태로 표시하여 개발자가 어떤 부분을 구현해야 하는지 명확하게 전달할 수 있습니다.
개발자는 전체 페이지를 탐색할 필요 없이 구현이 필요한 섹션만 집중적으로 확인할 수 있어 핸드오프 과정에서의 혼란이 사라집니다.

개발자 모드를 효과적으로 활용하기 위해서는 단순히 코드 스니펫을 복사하는 것을 넘어, VS Code 익스텐션을 설치하고 디자인 시스템과 코드를 연동하는 설정을 선행하는 것이 좋습니다. 이를 통해 디자인 변경 사항에 기민하게 대응하고, 구현 단계에서 발생하는 불필요한 추측을 제거하여 제품 퀄리티를 높일 수 있습니다.