피그마가 디자이너와 개발자 간의 간극을 좁히고 제품 개발 효율성을 극대화하기 위해 개발자 전용 공간인 'Dev Mode'를 출시했습니다. 브라우저 인스펙터와 유사한 인터페이스를 통해 개발자가 디자인 사양을 직관적으로 확인하고 코드로 변환할 수 있도록 지원하는 것이 핵심입니다. 이를 통해 개발팀은 디자인 도구 내에서 고유한 워크플로우를 유지하며 더 빠르고 정확하게 결과물을 구현할 수 있게 되었습니다.

개발자 중심의 작업 환경, Dev Mode

디자인 파일을 브라우저의 '개발자 도구(Inspector)'와 유사한 방식으로 탐색할 수 있는 전용 워크스페이스를 제공합니다.
디자인 요소(레이어, 그룹 등)를 개발 개념(코드, 아이콘, 토큰)과 밀접하게 연결하여 필요한 정보를 즉각적으로 추출할 수 있습니다.
디자인 시스템의 맥락을 유지하면서 치수, 스펙, 에셋 등을 손쉽게 확인하고 내보낼 수 있는 환경을 구축했습니다.

코드 구현 속도를 높이는 최적화 기능

언어별로 맞춤 설정이 가능한 코드 스니펫 기능을 제공하며, 단순히 코드를 나열하는 것이 아니라 개발의 시작점으로 활용할 수 있게 설계되었습니다.
CSS 박스 모델, 트리 뷰(Tree View) 형태의 현대적 구문, 코드베이스에 맞춘 단위 토글 기능을 통해 코드 가독성을 높였습니다.
디자인 시스템의 변수(Variables)를 디자인 토큰으로 활용하여 코드와 디자인 간의 일관성을 강화합니다.

워크플로우 통합과 강력한 플러그인 생태계

GitHub, Jira, Linear와 같은 프로젝트 관리 도구를 연동하여 피그마 내에서 이슈와 풀 리퀘스트(PR) 상태를 바로 확인할 수 있습니다.
Storybook 플러그인을 통해 코드베이스에 실제 구현된 컴포넌트의 상태를 디자인 파일 안에서 참조할 수 있습니다.
AWS Amplify Studio, Google Relay, Anima 등의 코드 생성 플러그인을 활용하거나 팀 고유의 워크플로우에 맞는 커스텀 플러그인을 구축할 수 있습니다.

IDE에서 직접 확인하는 VS Code 확장 프로그램

개발자가 코드 에디터를 벗어나지 않고도 디자인을 검토하고, 변경 사항 및 댓글 알림을 확인할 수 있는 VS Code용 확장 프로그램을 지원합니다.
디자인 사양에 기반한 코드 자동 완성(Autocomplete) 기능을 제공하여 코딩 속도를 획기적으로 향상시킵니다.
디자인 파일과 코드 편집기 사이를 오가는 컨텍스트 스위칭 비용을 줄여 개발 집중도를 높입니다.

단순히 디자인을 보는 것을 넘어, 실제 구현 단계에서의 생산성을 높이고 싶다면 Dev Mode와 VS Code 확장 프로그램을 워크플로우에 적극 도입해 보시기 바랍니다. 디자인 시스템의 토큰 관리와 에디터 내 자동 완성 기능을 결합하면 디자인과 코드 사이의 정렬(Alignment)을 훨씬 수월하게 유지할 수 있습니다.