Figma는 'Framework' 이벤트를 통해 디자인 시스템의 운영 효율성을 극대화하고 디자이너와 엔지니어 간의 협업 간극을 좁히는 혁신적인 기능들을 공개했습니다. 이번 업데이트의 핵심은 반복적인 수정 작업을 자동화하고, 디자인 자산이 실제 코드와 일치하도록 보장하는 도구를 제공하여 대규모 조직의 제품 개발 속도를 가속화하는 데 있습니다. 결과적으로 팀은 단순 운영 업무에서 벗어나 더 수준 높은 사용자 경험을 설계하는 데 집중할 수 있는 환경을 갖추게 되었습니다.

멀티 에딧(Multi-edit)을 통한 작업 효율성 극대화

여러 프레임에 흩어져 있는 동일한 객체를 한 번에 선택하고 수정할 수 있는 'Multi-edit' 기능이 도입되었습니다.
특정 레이어를 선택한 후 'Select matching layers' 기능을 사용하면 캔버스 전체에서 구조가 일치하는 요소를 즉시 찾아내어 위치, 크기, 스타일을 동시에 변경할 수 있습니다.
텍스트 레이어 수정 시에도 여러 화면의 문구나 속성을 일괄 변경할 수 있어, 반복적인 디자인 수정에 소요되는 시간을 획기적으로 단축했습니다.

디자인 시스템 고도화 및 변수(Variables) 기능 확장

디자인 시스템의 핵심인 변수(Variables) 기능에 타이포그래피(Typography) 지원이 추가되어 글꼴 크기, 두께, 행간 등을 변수로 관리할 수 있게 되었습니다.
이를 통해 다국어 대응이나 반응형 디자인 적용 시 타이포그래피 속성을 한 곳에서 제어하고 유연하게 변경할 수 있습니다.
라이브러리 분석 도구(Library Analytics)가 강화되어, 어떤 컴포넌트가 실제 프로젝트에서 어떻게 활용되고 있는지에 대한 정밀한 데이터를 제공하여 시스템 개선의 근거를 마련해 줍니다.

엔지니어링 협업을 위한 코드 커넥트(Code Connect)

디자인 시스템의 컴포넌트와 실제 개발에 사용되는 코드(React, iOS, Android 등)를 직접 연결하는 'Code Connect' 기능이 강화되었습니다.
개발자는 Figma 내에서 디자인 의도가 반영된 실제 코드 스니펫을 바로 확인하고 복사할 수 있어 구현의 정확성을 높일 수 있습니다.
Dev Mode를 통해 디자이너가 정의한 변수와 속성값이 코드 레벨에서 어떻게 매핑되는지 명확히 시각화하여 핸드오프 과정의 오해를 최소화합니다.

논리적 프로토타이핑과 인터랙션 개선

복잡한 상태 변화를 다수의 프레임 없이도 구현할 수 있도록 변수와 조건부 로직(Conditional Logic) 사용성이 개선되었습니다.
실제 제품의 작동 방식과 유사한 고수준의 프로토타입을 더 적은 수의 레이어로 제작할 수 있어 성능 최적화와 관리 편의성을 동시에 잡았습니다.
프로토타이핑 내에서의 상태 관리 및 인터랙션 흐름이 직관적으로 변하면서 테스트 및 피드백 주기가 빨라졌습니다.

이번 업데이트의 핵심인 타이포그래피 변수와 멀티 에딧 기능을 즉시 실무에 도입해 보시길 권장합니다. 특히 디자인 시스템이 실제 코드와 괴리되지 않도록 'Code Connect'를 활용해 엔지니어링 팀과의 워크플로우를 재정비한다면, 제품의 일관성을 유지하면서도 배포 속도를 크게 높일 수 있을 것입니다.