# [[Figma Integration|Figma Integration]]

## 📌 Brief Summary
[[Figma|Figma]] Integration(피그마 통합)은 현대적인 React 프론트엔드 아키텍처에서 디자인 결정 사항을 코드와 동기화하고 자동화하는 핵심 프로세스입니다 [1, 2]. 주로 Figma에서 색상, 폰트, 간격 등의 디자인 토큰을 JSON 형식으로 추출하여 개발 환경에 적용하는 방식을 의미합니다 [2]. 더 나아가, AI 에이전트와 전용 프로토콜을 활용하여 Figma 파일 내에서 컴포넌트 명세서를 자동으로 생성하는 등 디자인과 개발 간의 간극을 줄이고 확장성 있는 UI 시스템을 구축하는 데 필수적으로 사용됩니다 [3, 4].

## 📖 Core Content
*   **디자인 토큰 추출 및 변환:** Figma는 확장 가능한 디자인 시스템의 단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]]) 역할을 합니다 [1, 5]. Tokens Studio for Figma와 같은 플러그인을 사용하면 디자이너가 설정한 디자인 결정을 JSON 구조로 추출할 수 있습니다 [2, 6]. 이렇게 내보낸 JSON 파일은 Style Dictionary와 같은 도구를 거쳐 React 애플리케이션에서 직접 사용할 수 있는 CSS 변수나 [[JavaScript|JavaScript]]/TypeScript 테마 객체로 자동 변환됩니다 [7, 8].
*   **파이프라인 동기화:** Figma를 개발 툴 체인 파이프라인과 직접 연결하면 디자인 시스템의 일관성을 유지할 수 있습니다 [9]. 디자인 토큰을 수동으로 동기화하거나 공유 저장소에 저장하는 방식을 넘어, Superflex.ai와 같은 자동화 플랫폼을 활용해 Figma의 디자인 시스템 변경 사항을 React 코드로 즉시 동기화하고 생성할 수 있습니다 [6, 10].
*   **AI 기반 컴포넌트 명세([[Specification|Specification]]) 자동화:** Uber의 사례처럼, 대규모 컴포넌트 라이브러리 관리를 위해 AI와 Figma를 통합하는 고도화된 방식도 존재합니다 [3]. Uber는 오픈 소스인 'Figma Console MCP(Model Context Protocol)'를 통해 Cursor의 AI 에이전트를 Figma 데스크톱에 로컬로 직접 연결하는 'uSpec' 시스템을 구축했습니다 [4, 11].
*   **명세서 렌더링:** 이 통합 시스템은 AI가 Figma 파일의 컴포넌트 트리, 하위 컴포넌트 구조, 디자인 토큰 및 변수를 크롤링하여 API, 색상 주석, 화면 판독기(Screen reader) 접근성 속성 등을 파악하게 합니다 [11-13]. 이후 AI가 완성된 디자인 설계 명세서를 Figma 파일 내에 직접 렌더링함으로써, 수동으로 몇 주가 걸리던 문서화 작업을 단 몇 분으로 단축시킵니다 [3, 14].

## 🔗 Knowledge Connections
- **Related Topics:** [[Design Tokens|Design Tokens]], Style Dictionary, [[Dynamic Theming|Dynamic Theming]]
- **Projects/Contexts:** Uber Base DesignSystem, Figma Console MCP, Tokens Studio for Figma
- **Contradictions/Notes:** 소스 내에서 Figma 통합에 대한 모순된 주장은 발견되지 않으며, 모든 소스가 공통적으로 Figma를 단일 진실 공급원(Source of Truth)으로 삼아 코드 및 문서화를 자동 동기화하는 파이프라인 구축을 권장합니다 [3, 5, 15].

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