Figma는 디자이너와 개발자 사이의 협업 효율을 근본적으로 개선하기 위해 개발자 전용 작업 공간인 'Dev Mode'를 도입했습니다. 기존의 디자인 핸드오프 과정이 단순히 완성된 시안을 전달하는 데 그쳤다면, Dev Mode는 개발자가 디자인 의도를 정확히 파악하고 코드로 구현하는 데 필요한 정보를 직관적으로 제공하는 데 초점을 맞춥니다. 이를 통해 Figma는 디자인 도구를 넘어 제품 개발 프로세스 전반을 아우르는 협업 플랫폼으로 진화하고자 합니다.

개발자에게 최적화된 인터페이스와 정보 가독성

개발 중심 뷰(View): 디자이너의 작업 공간과 분리된 개발자 전용 모드를 제공하여, 불필요한 레이어 정보 대신 치수, 패딩, 마진 등 구현에 필수적인 속성들을 우선적으로 노출합니다.
박스 모델 가시화: 웹 브라우저의 개발자 도구와 유사하게 요소의 크기와 간격을 시각적으로 보여주어, 디자인 시스템의 수치를 코드로 옮기는 과정을 단순화합니다.
상태 표시 및 트래킹: '개발 준비 완료(Ready for dev)' 상태를 명시적으로 표시하여 개발자가 어떤 시안을 기준으로 작업해야 하는지 혼란을 방지하고, 이전 버전과의 차이점을 비교할 수 있는 기능을 제공합니다.

코드 생성 및 디자인 시스템 연동

맞춤형 코드 스니펫: CSS뿐만 아니라 SwiftUI, Jetpack Compose 등 플랫폼에 최적화된 코드를 생성하며, 개발자가 사용하는 라이브러리에 맞게 스니펫을 커스텀할 수 있습니다.
디자인 토큰 지원: 디자인 시스템에 정의된 토큰 이름과 값을 직접 확인할 수 있어, 하드코딩 대신 시스템 변수를 정확하게 사용하도록 유도합니다.
에셋 추출 자동화: 아이콘이나 이미지 등의 에셋을 일일이 내보내기 설정할 필요 없이, 개발자가 필요한 포맷으로 즉시 다운로드하거나 경로를 복사할 수 있습니다.

워크플로우 통합과 확장성

Figma for VS Code: 디자인 파일을 보기 위해 브라우저나 앱을 오갈 필요 없이, VS Code 내에서 디자인을 확인하고 코드를 작성하며 속성을 검사할 수 있는 확장 프로그램을 지원합니다.
외부 도구 연결: Jira, GitHub, Storybook과 같은 외부 협업 도구와 플러그인을 통해 연결하여, 문서화된 사양이나 컴포넌트 라이브러리를 Figma 내부에서 바로 참조할 수 있습니다.
플러그인 생태계: 개발 과정에 특화된 플러그인들을 Dev Mode 내에서 실행하여 반복적인 작업을 자동화하거나 팀별로 최적화된 워크플로우를 구축할 수 있습니다.

성공적인 제품 구현을 위해 개발팀은 Dev Mode를 단순히 스펙을 확인하는 용도가 아닌, 디자인 시스템과 코드의 싱크를 맞추는 통합 지점으로 활용해야 합니다. 특히 VS Code 확장 프로그램을 활용해 컨텍스트 스위칭 비용을 최소화하고, 디자인 토큰 기반의 협업 환경을 구축한다면 커뮤니케이션 오류를 줄이고 배포 속도를 획기적으로 높일 수 있을 것입니다.