피그마는 Config 2023을 통해 디자인과 개발 사이의 간극을 좁히고, 팀이 제품을 구축하는 방식을 근본적으로 재정의하고자 합니다. 단순한 디자인 도구를 넘어 개발자와 디자이너가 실시간으로 소통하며 제품을 완성해 나가는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 공간인 '데브 모드(Dev Mode)'와 디자인 시스템의 유연성을 극대화하는 '변수(Variables)' 기능을 도입하여 협업의 효율성을 극대화한 것이 이번 발표의 핵심입니다.

개발자를 위한 전용 공간, 데브 모드(Dev Mode)

개발 중심 인터페이스: 디자인 파일을 개발 언어로 해석해 주는 새로운 공간으로, 개발자가 디자인 시스템을 더 쉽게 이해하고 구현할 수 있도록 돕습니다.
코드 검사 및 익스텐션: CSS, iOS, Android 전용 코드를 제공하며, Jira나 GitHub, Storybook과 같은 기존 워크플로우 도구와 플러그인을 통해 연결할 수 있습니다.
Figma for VS Code: 디자인 파일을 보기 위해 브라우저를 오갈 필요 없이, 개발 환경인 VS Code 내에서 디자인을 확인하고 변경 사항을 즉시 반영할 수 있습니다.
준비 상태 표시: 디자이너가 특정 섹션을 "개발 준비 완료(Ready for dev)" 상태로 표시하여 개발자가 불필요한 커뮤니케이션 없이 작업을 시작할 수 있게 합니다.

디자인 시스템의 진화, 변수(Variables)

디자인 토큰화: 색상, 숫자, 문자열, 불리언(Boolean) 값을 변수로 정의하여 디자인 전반에 걸쳐 일관성을 유지하고 효율적으로 관리할 수 있습니다.
모드(Modes) 기능: 다크 모드, 라이트 모드, 혹은 모바일과 데스크톱 환경에 따른 수치 변화를 변수 세트로 묶어 클릭 한 번으로 전체 디자인 테마를 전환할 수 있습니다.
고급 프로토타이핑과의 연동: 변수와 논리 연산(if/else), 수학적 표현식을 결합하여 실제 제품과 유사하게 작동하는 고충실도(Hi-fi) 프로토타입을 제작할 수 있습니다.

코드의 논리를 담은 오토 레이아웃(Auto Layout) 업데이트

줄바꿈(Wrap) 지원: 여러 요소를 가로로 배치하다가 공간이 부족하면 자동으로 다음 줄로 넘겨주는 기능이 추가되어 응답형 레이아웃 구현이 쉬워졌습니다.
최소/최대 너비 및 높이 설정: 요소의 크기가 특정 범위를 벗어나지 않도록 제한할 수 있어, 실제 개발 환경에서 CSS로 제어하는 방식과 동일한 설계가 가능해졌습니다.

피그마가 도입한 '데브 모드'와 '변수'는 단순한 편의 기능이 아니라, 디자인 산출물이 곧 코드로 이어지는 '디자인-코드 일원화'를 지향합니다. 팀의 생산성을 높이기 위해서는 디자이너가 변수 기능을 적극적으로 활용하여 시스템을 구축하고, 개발자는 VS Code 익스텐션을 통해 워크플로우를 통합하는 방식의 변화를 시도해 볼 것을 권장합니다.