디자인 시스템을 위한 올바 (새 탭에서 열림)

Code Connect는 Figma의 Dev Mode에서 자동 생성된 CSS 대신 조직의 실제 디자인 시스템 코드를 보여줘 디자인 시스템 도입률을 높이는 도구다. 개발자는 목업과 연결된 컴포넌트의 올바른 코드와 사용 지침을 바로 확인할 수 있어 구현 속도와 일관성이 향상된다. 결과적으로 잘못된 컴포넌트 사용과 중복된 일회성 컴포넌트의 생성·유지보수를 줄이는 것이 목표다.

디자인 시스템 도입이 어려운 이유

• 디자인 시스템을 구축해도 개발자가 시스템의 모든 컴포넌트와 패턴을 알지 못하는 경우가 많다.
• 일부 컴포넌트를 사용하더라도 의도된 가이드라인과 다르게 적용할 수 있다.
• 디자인 시스템의 성공은 단순히 사용 여부가 아니라, 올바르고 일관되게 사용하는지에 달려 있다.
• 디자인과 코드는 서로 다른 도구와 제약을 가진 별개의 작업 영역으로 발전해 왔기 때문에 연결 지점이 부족했다.

디자인과 코드의 연결

• 디자인은 무엇을 만들지 탐색하고 결정하는 데 초점을 두며, 코드는 이를 구조적이고 유지보수 가능한 형태로 구현하는 데 초점을 둔다.
• Figma는 두 영역이 원활하게 오갈 수 있어야 한다고 보고, Code Connect를 그 연결을 강화하는 기능으로 소개한다.
• 기존의 Auto Layout, Variables, Component Props, Dev Mode 등의 기능과 함께 디자인 시스템을 코드에 더 가깝게 통합하려는 흐름에 속한다.
• 디자인 시스템 팀이 작성한 실제 구현 방식과 문서를 디자인 목업의 맥락 안에서 제공한다.

Code Connect의 핵심 기능

• Dev Mode에 표시되는 코드 스니펫을 조직의 실제 디자인 시스템 코드로 사용자 지정할 수 있다.
• 자동 생성 CSS가 아니라 프로젝트에서 사용하는 컴포넌트, 속성, 패턴에 맞는 코드를 개발자에게 보여준다.
• 개발자가 목업에서 특정 요소를 선택하면 관련 코드와 사용법을 별도의 문서 검색 없이 확인할 수 있도록 한다.
• 올바른 구현 예시와 디자인 시스템 사용 원칙을 함께 제공해 오용을 줄인다.
• 디자인 시스템의 재사용을 촉진해 중복 컴포넌트와 일회성 구현의 생성을 줄인다.

개발자 워크플로에 맞춘 설치 방식

• Code Connect는 개발자가 익숙한 패키지 및 명령줄 기반 방식으로 설치·설정할 수 있다.
• JavaScript와 TypeScript 프로젝트에서는 npm을 사용한다.
• SwiftUI 프로젝트에서는 Swift Package Manager를 지원한다.
• 설치 패키지와 설정 방법은 GitHub 저장소에서 제공된다.
• 향후 더 많은 플랫폼을 지원해 기존 개발 환경에 자연스럽게 통합하는 것을 목표로 한다.

기대 효과

• 개발자가 디자인 시스템 컴포넌트를 더 쉽게 발견하고 사용할 수 있다.
• 디자인에서 코드로 전환하는 과정이 빨라지고 구현 효율이 높아진다.
• 실제 코드와 디자인 간의 차이를 줄여 제품 전반의 UI 일관성을 높인다.
• 디자인 시스템 팀의 문서화와 모범 사례를 개발 작업의 적절한 시점에 전달할 수 있다.
• 결과적으로 조직 전체의 디자인 시스템 채택률과 유지보수성을 개선한다.

Code Connect를 도입할 때는 자주 사용하는 컴포넌트부터 실제 프로덕션 코드와 연결하고, 각 컴포넌트의 올바른 사용 예시와 속성 매핑을 함께 관리하는 것이 효과적이다. Primitives나 자동 생성 코드보다 조직의 표준 컴포넌트가 우선 노출되도록 구성해야 도입 효과를 극대화할 수 있다.