# [[Figma Design System Integration|Figma DesignSystem Integration]]

## 📌 Brief Summary
[[Figma|Figma]] Design System Integration(Figma 디자인 시스템 통합)은 Figma에서 결정된 디자인 요소(색상, 글꼴, 간격 등)를 애플리케이션의 실제 코드베이스와 원활하게 동기화하는 프로세스를 의미합니다 [1]. 주로 Tokens Studio for Figma와 같은 플러그인을 통해 디자인 결정을 JSON 형태의 디자인 토큰으로 구조화한 후, [[Style Dictionary|Style Dictionary]] 등의 도구로 React용 CSS 변수나 코드로 자동 변환합니다 [2], [3]. 최근에는 AI 에이전트나 코드 기반 UI 도구를 활용해 컴포넌트 스펙 생성과 디자이너-개발자 간 핸드오프를 자동화하여, 대규모 프론트엔드 아키텍처 내에서 디자인 시스템을 일관되고 확장 가능하게 유지하는 핵심 기술로 자리 잡고 있습니다 [4], [5], [6].

## 📖 Core Content
- **디자인 토큰 기반의 자동화 파이프라인:** 디자인 시스템 구축 시 Figma를 단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]])으로 설정하여 스타일링 결정을 중앙화합니다 [1], [7]. Figma에서 내보낸 다크/라이트 모드 등의 JSON 토큰 데이터를 Style Dictionary를 사용해 처리하면, 플랫폼에 종속되지 않은 토큰이 React 애플리케이션에서 즉시 사용할 수 있는 JavaScript/TypeScript 객체 또는 CSS 변수 형태로 생성됩니다 [3], [8]. 이 자동화 파이프라인은 수동으로 스타일을 복제할 때 발생하는 오류를 방지하고, 일관성 있는 동적 테마([[Dynamic Theming|Dynamic Theming]]) 적용을 가능하게 합니다 [3], [7].
- **코드 기반 컴포넌트 직접 연동:** 디자인 도구와 실제 코드 간의 불일치를 해결하기 위해 UXPin 등은 사용자 지정 Git React 컴포넌트 저장소를 디자인 워크플로우에 직접 통합하는 방식을 제공합니다 [5], [6]. 이를 통해 디자이너는 코드로 렌더링된 실제 컴포넌트를 이용해 프로토타입을 제작하게 되며, 코드베이스와 디자인 토큰이 자동으로 동기화됩니다 [6]. 반면, 이러한 코드 기반 통합이 불가능한 기존 디자인 툴 환경에서는 수동 JSON 내보내기와 빌드 파이프라인을 거쳐야 하므로 디자인과 개발 환경의 괴리(Drift)를 막기 위한 엄격한 관리 프로세스가 필요합니다 [9].
- **AI 에이전트 및 MCP를 활용한 컴포넌트 스펙 자동화:** 대규모 UI 시스템에서 문서화의 병목을 해결하기 위해 Uber는 Figma Console MCP(Model Context Protocol)와 Cursor 내 AI 에이전트를 활용한 'uSpec' 시스템을 구축했습니다 [10], [4]. 이 AI 에이전트는 로컬 웹소켓을 통해 Figma 파일에 직접 연결한 후, 컴포넌트 트리, 토큰 값, 변형(Variants) 구조를 크롤링합니다 [11], [12]. 분석된 데이터를 기반으로 접근성 규칙(VoiceOver, ARIA 등)과 구조 스펙이 담긴 문서를 단 몇 분 만에 Figma 파일 내에 직접 렌더링하여 엔터프라이즈급 확장성을 입증했습니다 [13], [14], [15], [16].

## 🔗 Knowledge Connections
- **Related Topics:** [[Design Tokens|Design Tokens]], Dynamic Theming, [[Component-Based Design|Component-Based Design]], Automated Token Distribution
- **Projects/Contexts:** Uber's Base Design System / uSpec, Tokens Studio for Figma, [[Style Dictionary|Style Dictionary]], [[UXPin Merge|UXPin Merge]]
- **Contradictions/Notes:** Figma에서 토큰을 수동으로 내보내고 동기화하는 방식은 유용하지만 설계와 개발 코드 간의 드리프트(Drift)를 유발할 수 있습니다 [9]. 따라서 대규모 조직에서는 CI/CD 파이프라인을 통해 토큰 릴리스를 자동화하고 코드 리뷰와 동일한 수준의 엄격한 거버넌스를 갖추는 것이 필수적입니다 [17], [18], [19].

---
*Last updated: 2026-04-26*