# [[Design-to-Code Workflow]]

## 📌 Brief Summary
Design-to-Code Workflow는 Figma와 같은 디자인 도구에서 정의된 디자인 결정(색상, 타이포그래피, 간격 등)을 React 등의 프론트엔드 환경에서 사용할 수 있는 실제 코드로 매끄럽게 변환하고 동기화하는 자동화 및 협업 파이프라인을 의미합니다 [1, 2]. 이 워크플로우는 디자인 토큰(Design Tokens)을 단일 진실 공급원(Single source of truth)으로 활용하여 디자이너와 개발자 간의 간극을 좁히고 수동 작업으로 인한 오류를 방지합니다 [3, 4]. 최신 프론트엔드 아키텍처에서는 코드 기반 컴포넌트 연동과 CI/CD 자동화 툴을 결합하여 디자인의 일관성을 보장하고 확장성을 극대화합니다 [5-7].

## 📖 Core Content
* **디자인 토큰(Design Tokens)의 추출 및 중앙 집중화:** 디자인 툴(예: Figma의 Tokens Studio 플러그인 등)에서 내린 디자인 결정은 JSON이나 YAML 형태의 토큰으로 구조화 및 추출됩니다 [2]. 이는 플랫폼과 독립적인 데이터로, 디자인 도구와 코드베이스가 소통할 수 있는 기계 가독형 포맷을 제공합니다 [2, 8].
* **스타일 변환 및 테마 자동화 엔진:** Style Dictionary와 같은 도구는 플랫폼에 구애받지 않는 토큰 JSON을 읽어들여, React 애플리케이션을 위한 CSS 변수(CSS Variables)나 JavaScript/TypeScript 테마 객체(styled-components 등)로 자동 생성합니다 [9-11]. 이를 통해 라이트/다크 모드와 같은 동적 테마를 수동 코딩 없이 일관되게 구축할 수 있습니다 [10, 12].
* **코드 기반 컴포넌트(Code-Backed Components) 활용:** 전통적인 핸드오프 방식의 한계를 극복하기 위해, UXPin Merge와 같은 도구를 활용하여 실제 코드 레포지토리(Git)에 있는 React 컴포넌트를 디자인 툴에서 직접 불러와 프로토타이핑을 진행합니다 [4, 6]. 디자인 도구 내에서 개발과 동일한 컴포넌트와 토큰을 사용하므로 100% 동기화가 유지됩니다 [6, 13].
* **CI/CD를 통한 파이프라인 자동화:** 단일 진실 공급원인 토큰 저장소(Version Control)에 변경 사항이 커밋되면, CI/CD 파이프라인이 자동으로 플랫폼별 스타일 파일을 생성하고 회귀 테스트를 거쳐 스테이징/프로덕션 환경에 배포합니다 [7, 14]. 
* **AI 및 에이전트 기반 스펙 생성:** Uber의 uSpec 시스템과 같은 사례에서는 AI 에이전트와 Figma Console MCP를 연동하여, 디자인 파일 내의 컴포넌트 계층, 토큰 매핑, 변수 모드를 분석해 개발용 스펙 문서를 단 몇 분 만에 자동 생성합니다 [15-17]. 이는 단순한 토큰 변환을 넘어 디자인 의도를 엔지니어링 구현 스펙으로 직결시키는 고도화된 워크플로우를 보여줍니다 [18, 19].

## 🔗 Knowledge Connections
- **Related Topics:** [[Design Tokens]], [[Style Dictionary]], [[Dynamic Theming]], [[Component-Based Design]]
- **Projects/Contexts:** [[React]], [[styled-components]], [[UXPin Merge]], [[Uber's uSpec]]
- **Contradictions/Notes:** 전통적인 디자인-개발 협업 방식에서는 디자이너가 목업을 만들고 개발자가 수동으로 값을 하드코딩하여 코드로 옮겼기 때문에 지속적인 디자인 드리프트(Design Drift)와 오류가 발생했으나, 최신 Design-to-Code 파이프라인은 디자인 토큰과 자동화를 통해 이러한 격차와 비효율을 원천적으로 제거합니다 [4, 20].

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