Figma는 Config 2023을 통해 디자이너와 개발자 사이의 장벽을 허물고, 제품 개발 전체 과정을 통합하는 플랫폼으로 거듭나겠다는 비전을 제시했습니다. 새롭게 도입된 '개발자 모드(Dev Mode)'와 '변수(Variables)' 기능은 디자인 의도를 실제 코드로 구현하는 과정을 획기적으로 단축하며 협업의 효율성을 극대화합니다. 이제 Figma는 단순한 그래픽 도구를 넘어 디자인과 엔지니어링이 공존하며 함께 제품을 빌드하는 공유 작업 공간으로 진화했습니다.

개발자를 위한 새로운 작업 환경, 개발자 모드(Dev Mode)

디자인 파일의 속성을 CSS, iOS(SwiftUI), Android(Compose) 등 실제 개발 언어의 코드 형태로 즉시 확인하고 복사할 수 있는 전용 공간을 제공합니다.
Jira, GitHub, Storybook과 같은 주요 개발 도구와의 위젯 연동을 지원하여 디자인 사양 확인부터 티켓 관리까지 Figma 내에서 한 번에 수행할 수 있습니다.
'검사(Inspect)' 기능을 강화하여 변경된 사항을 시각적으로 비교해주며, '섹션 상태' 표시를 통해 개발 준비가 완료된 디자인을 명확하게 구분해 소통 비용을 줄여줍니다.
VS Code용 Figma 익스텐션을 통해 개발자가 에디터를 벗어나지 않고도 디자인 사양을 확인하고 실시간으로 소통할 수 있는 환경을 구축했습니다.

복잡한 디자인 시스템을 제어하는 변수(Variables)

색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 정의하여 디자인 토큰(Design Tokens)을 체계적으로 관리하고 대규모 프로젝트의 일관성을 유지할 수 있습니다.
'모드(Modes)' 기능을 통해 클릭 한 번으로 전체 디자인을 라이트 모드에서 다크 모드로 전환하거나, 한국어에서 영어로 다국어 대응 레이아웃을 즉시 확인할 수 있습니다.
변수 기능을 오토 레이아웃과 결합하여 기기별 패딩이나 간격 값을 유연하게 조절함으로써 진정한 반응형 디자인 시스템 구현이 가능해졌습니다.

논리적 상호작용이 가능한 고급 프로토타이핑

조건문(If/Else)과 수식 연산을 프로토타이핑에 도입하여, 수십 개의 프레임을 복제하지 않고도 장바구니 수량 계산이나 로그인 로직 등 실제 앱과 유사한 인터랙션을 구현할 수 있습니다.
변수를 프로토타입에 바인딩하여 사용자의 액션에 따라 UI가 동적으로 변화하는 고해상도의 테스트 환경을 제공합니다.
인라인 미리보기 기능을 통해 수정 사항을 즉각적으로 테스트하며 프로토타입 제작 속도를 비약적으로 향상시켰습니다.

CSS 로직을 닮은 오토 레이아웃(Auto Layout) 업데이트

'줄바꿈(Wrap)' 기능이 추가되어 설정된 너비를 초과하는 요소들을 자동으로 다음 줄로 넘길 수 있어, 반응형 그리드와 태그 클라우드 구현이 쉬워졌습니다.
요소의 '최소/최대 너비 및 높이(Min/Max Width & Height)'를 설정할 수 있게 되어 CSS의 레이아웃 제어 방식과 동일한 논리로 디자인을 구성할 수 있습니다.

이번 업데이트는 디자인 결과물을 실제 코드 구현 방식에 가깝게 정렬하여 개발 생산성을 높이는 데 핵심이 있습니다. 대규모 팀일수록 '변수' 기능을 활용해 디자인 시스템을 구조화하고, '개발자 모드'를 워크플로우에 적극 도입하여 디자인과 개발 간의 핸드오프(Hand-off) 과정을 최적화할 것을 권장합니다.