Figma의 Config 2023에서 발표된 주요 업데이트는 디자인과 개발 사이의 간극을 좁히고, 전체 제품 개발 프로세스를 하나의 원활한 흐름으로 통합하는 데 초점을 맞추고 있습니다. '개발 모드(Dev Mode)'와 '변수(Variables)' 기능의 도입은 피그마를 단순한 디자인 도구를 넘어 실제 구현 코드를 준비하고 협업하는 생산성 플랫폼으로 재정의합니다. 이를 통해 팀은 기획부터 코드 구현까지 더 빠르고 정확하게 소통하며 고품질의 제품을 만들 수 있게 되었습니다.

개발자를 위한 전용 공간, Dev Mode

개발 중심 인터페이스: 디자인 환경과 분리된 개발자 전용 작업 공간이 도입되었습니다. 개발자는 디자인 요소를 선택하여 CSS, SwiftUI, Jetpack Compose 등 플랫폼에 맞는 코드를 즉시 확인하고 복사할 수 있습니다.
VS Code 익스텐션: 피그마를 떠나지 않고도 코드 편집기 내에서 디자인 사양을 확인하고, 변경 사항을 실시간으로 추적하며, 디자인 구성 요소를 코드로 바로 연결할 수 있는 플러그인을 제공합니다.
준비 상태 표시 및 변경 사항 비교: 디자이너가 특정 섹션을 '개발 준비 완료(Ready for dev)'로 표시할 수 있으며, 이전 버전과 현재 버전의 디자인 차이점을 시각적으로 비교하여 변경된 로직을 쉽게 파악할 수 있습니다.

디자인 시스템의 유연성을 극대화하는 Variables

디자인 토큰 관리: 색상, 수치, 불리언(Boolean), 문자열 등의 값을 변수로 저장하여 디자인 전체에 재사용할 수 있습니다. 이는 복잡한 디자인 시스템을 구축하고 유지 관리하는 데 핵심적인 역할을 합니다.
모드(Modes)를 통한 다크 모드 및 반응형 대응: '라이트 모드'와 '다크 모드', 혹은 '모바일'과 '데스크톱' 같은 설정을 모드로 지정하여 클릭 한 번으로 전체 디자인의 테마와 레이아웃 수치를 전환할 수 있습니다.
데이터 기반 디자인: 변수를 사용하면 실제 데이터와 유사한 환경에서 디자인을 테스트할 수 있어, 정적인 시안보다 더 실제 제품에 가까운 검토가 가능해집니다.

프로토타이핑의 진화와 효율적인 워크플로우

고급 프로토타이핑(Advanced Prototyping): 변수와 조건문(if/else logic), 수식을 프로토타입에 적용할 수 있습니다. 이를 통해 수백 개의 프레임을 복제하지 않고도 장바구니 계산이나 로그인 로직 등 복잡한 사용자 흐름을 단 몇 개의 프레임만으로 구현할 수 있습니다.
오토 레이아웃(Auto Layout)의 개선: 'Wrap' 기능이 추가되어 그리드 형태의 레이아웃을 더 쉽게 만들 수 있으며, 최소/최대 너비와 높이 설정이 가능해져 훨씬 정교한 반응형 디자인이 가능해졌습니다.
폰트 피커 및 파일 브라우저 업데이트: 폰트 미리보기와 검색 기능이 강화되었으며, 파일 브라우저의 UI가 개선되어 팀 내 프로젝트 관리가 더욱 직관적으로 변했습니다.

이번 업데이트는 디자이너에게는 코드의 제약 사항을 이해하며 디자인할 수 있는 환경을, 개발자에게는 디자인 의도를 정확하게 해석할 수 있는 도구를 제공합니다. 디자인 시스템을 운영 중인 팀이라면 Variables를 도입하여 테마 관리를 자동화하고, 개발 팀과 협업할 때는 Dev Mode를 적극적으로 활용하여 불필요한 커뮤니케이션 비용을 줄일 것을 권장합니다.