figma2024년 4월 15일

Framework 2024 (새 탭에서 열림)

figma design-systems react design-tokens code-connect storybook library-analytics-api

Figma는 디자인 시스템 구축보다 더 어려운 과제인 조직 전체의 도입과 활용을 지원하기 위해 Framework 2024에서 세 가지 기능을 공개했다. Code Connect는 디자인과 실제 코드 사이의 간극을 줄이고, 타이포그래피·그라디언트 변수는 디자인 토큰의 범위를 확장하며, Library Analytics API는 디자인 시스템 사용 현황을 측정하도록 돕는다. 결론적으로 Figma는 디자인 시스템을 만드는 도구를 넘어, 개발자 adoption과 조직 내 확산까지 지원하는 방향으로 발전하고 있다.

디자인 시스템의 핵심 과제: 조직 전체의 도입

디자인 시스템은 일관성, 효율성, 확장성을 제공하지만 실제 효과는 팀 전체가 이를 사용할 때 발생한다.
시스템이 강력하고 정교해질수록 복잡성도 커지며, 디자이너와 개발자의 적극적인 참여를 이끌어내는 일이 어려워진다.
Figma는 변수, 테마와 상태 관리, 고급 프로토타이핑, Dev Mode 등을 통해 디자인과 코드의 연결을 강화해 왔다.
이번 발표의 중심 목표는 디자인 시스템을 “구축”하는 데서 나아가 조직 전반에서 “채택”되도록 만드는 것이다.

Code Connect: 디자인과 코드의 연결

Code Connect는 Dev Mode에서 디자인 시스템 컴포넌트에 대응하는 실제 코드 스니펫을 제공한다.
개발자는 별도의 문서나 저장소를 검색하지 않고 Figma에서 필요한 코드를 확인하고 복사할 수 있다.
이를 통해:
- 구현 시간을 줄일 수 있다.
- 디자인과 코드의 불일치를 완화할 수 있다.
- 개발자가 디자인 시스템 컴포넌트를 사용하는 진입 장벽을 낮출 수 있다.
- 임의로 유사한 컴포넌트를 새로 만드는 일을 줄일 수 있다.
Organization 및 Enterprise 요금제에서 베타로 제공되며, React·iOS·Storybook을 지원한다.
향후 더 많은 프레임워크와 플랫폼으로 지원 범위가 확대될 예정이다.
Bumble, GitHub, HP 등의 팀은 디자인 시스템과 실제 프로덕션 코드 사이를 연결하는 문제와 Code Connect의 활용 가능성을 논의했다.

타이포그래피 변수: 디자인 토큰의 확장

기존 변수 기능만으로는 디자인 시스템의 중요한 영역인 타이포그래피를 충분히 표현하기 어려웠다.
타이포그래피 변수를 사용하면 글꼴 크기, 행간, 글꼴 스타일 등 타이포그래피 속성을 변수와 토큰 체계 안에서 관리할 수 있다.
주요 활용 방식:
- 폰트 스케일을 한 번 정의하고 전체 시스템에 일관되게 적용
- 플랫폼별 타이포그래피 설정 조정
- 반응형 또는 테마별 텍스트 스타일 관리
- WCAG 기준을 고려한 접근성 높은 스케일 구성
디자인 시스템의 색상과 간격뿐 아니라 텍스트 표현까지 체계적으로 관리할 수 있게 된다.

그라디언트 변수: 더 풍부한 시각 스타일 관리

그라디언트도 변수로 정의하고 재사용할 수 있도록 지원한다.
여러 화면과 컴포넌트에서 동일한 그라디언트 스타일을 일관되게 적용할 수 있다.
브랜드 테마나 모드별로 그라디언트를 교체하기 쉬워진다.
변수 기반 관리로 디자인 시스템이 단순한 색상 팔레트를 넘어 더 표현력 있는 시각 언어를 다룰 수 있다.

Library Analytics API: 디자인 시스템 사용 현황 측정

Library Analytics API는 조직 내 디자인 시스템 라이브러리와 컴포넌트의 사용 데이터를 분석할 수 있도록 제공된다.
디자인 시스템 관리자는 다음과 같은 질문에 답할 수 있다.
- 어떤 라이브러리와 컴포넌트가 실제로 사용되는가?
- 어느 팀이나 프로젝트가 디자인 시스템을 적극적으로 채택하는가?
- 사용되지 않거나 개선이 필요한 컴포넌트는 무엇인가?
정량적인 사용 데이터를 바탕으로 문서화, 교육, 컴포넌트 개선, 도입 전략을 세울 수 있다.
디자인 시스템의 성공을 단순히 “만들었는가”가 아니라 “얼마나 사용되는가”로 평가할 수 있게 한다.

실용적인 결론

디자인 시스템 팀은 컴포넌트와 토큰을 만드는 데 그치지 말고, 개발자가 실제 코드로 쉽게 사용할 수 있는 경로와 사용 현황을 측정할 방법까지 함께 마련해야 한다. Code Connect로 개발자 경험을 개선하고, 타이포그래피·그라디언트 변수로 토큰 범위를 확장하며, Analytics API로 채택률을 추적하는 접근이 효과적이다.