Copilot to Make to Design

03. Copilot to Make to Design

전략 개요

개발자가 Copilot 등 AI 에이전트로 새 페이지/컴포넌트를 코드로 먼저 만들고, 그 코드를 Figma Make에 수동 업로드한 뒤 Make의 Copy to Figma로 디자인 파일에 반영하는 전략입니다.

[기존 컴포넌트/디자인 시스템 키트(Code)]
              │
              ▼
[Copilot/Claude Agent에 프롬프트]
   "이 키트로 새 Settings 페이지 만들어줘"
              │
              ▼
[새 React 코드 생성 (워크스페이스에 저장)]
              │
              │  (수동 복사)
              ▼
[Figma Make - Code 보기에 붙여넣기]
              │
              ▼
[Make 라이브 프리뷰로 검증/조정]
              │
              ▼
[Copy to Figma → Figma Design 파일 업데이트]
Plain Text
복사

왜 이 전략인가?

•

개발자 주도 워크플로: 코드가 먼저, 디자인이 나중

•

기존 디자인 시스템 100% 활용: Copilot이 기존 컴포넌트/토큰을 import해서 코드 생성

•

AI 한계 보완: Make 단독으로는 시스템 일관성 유지가 어려움 → 개발자가 코드 단계에서 통제

•

Figma Design 자동 채움: 디자이너가 일일이 그리지 않아도 디자인 파일 최신 유지

적용 시나리오

•

이미 견고한 React 디자인 시스템이 있는 팀

•

개발자 비중이 디자이너보다 큰 조직

•

백오피스/관리자 페이지처럼 기능 정의가 명확하고 시각이 정형화된 화면

•

디자이너가 시각 검토만 하고 그리기는 하지 않아도 되는 환경

단계별 워크플로

1) 사전 준비

•

React 디자인 시스템 키트가 npm/모노레포에 있어야 함

•

Storybook 또는 카탈로그로 컴포넌트 목록이 명확해야 함

•

Copilot에 키트 사용 가이드를 copilot-instructions.md로 사전 학습시킴

2) Copilot으로 신규 페이지 생성

프롬프트 예시:

@workspace
src/components/ui/* 의 기존 컴포넌트만 사용해서
사용자 설정 페이지(Settings)를 만들어줘.
- 경로: src/pages/Settings.tsx
- 섹션: 프로필, 보안, 알림, 결제
- 폼 검증, 저장 버튼 포함
- 디자인 토큰은 src/design-system/tokens.ts 사용
- 새 컴포넌트 추가 금지, 기존 것만 조합
Plain Text
복사

3) 코드 검증

•

로컬에서 npm run dev로 시각 확인

•

Storybook에 추가하여 격리 테스트

•

코드 리뷰 (디자인 시스템 위반 없는지)

4) Figma Make로 이관

Figma Make 새 프로젝트 생성 (또는 기존 프로젝트의 새 화면)

Code 보기 탭 열기

Copilot이 만든 코드 + 참조한 컴포넌트들을 수동 복사/붙여넣기

•

의존하는 컴포넌트도 함께 가져와야 함 (Make가 import 해결 못함)

•

또는 Make 내에 동일한 컴포넌트가 이미 있으면 그것 사용

tokens.ts, tailwind config도 Make에 반영

라이브 프리뷰로 정상 렌더링 확인

5) Copy to Figma → Design 파일 업데이트

Make에서 컴포넌트/페이지 선택

Copy to Figma → Figma Design의 해당 페이지에 Paste

디자이너가 시각 검토

라이브러리 컴포넌트로 등록되어 있으면 자동 인스턴스 갱신

운영 규칙

•

Copilot 프롬프트에 항상 "기존 컴포넌트만 사용" 명시

•

새 컴포넌트가 필요하면 → 디자인 시스템 키트에 먼저 추가 → 키트 버전 업

•

Make로 옮기는 코드는 자기충족적(self-contained)이어야 함

•

Figma Design 측 변경은 폴리싱만 (구조 변경 금지)

장점

•

디자인 시스템 일관성 최강 (코드가 SoT)

•

개발자 생산성 ↑ (Copilot 직접 활용)

•

Figma Design은 "결과 미리보기 + 비주얼 자료" 역할

•

디자이너 부담 ↓

한계

•

Make 수동 복사 단계가 번거로움 → 자동화 어려움

•

Make 의존성 코드를 모두 옮겨야 하므로 코드량이 클수록 부담

•

디자이너 주도 창의적 디자인에는 부적합

•

Make의 React 환경과 실제 프로젝트 환경(Next.js 등)의 차이로 일부 코드 호환 안 됨

보완 아이디어

•

Copilot으로 Make 호환 버전 코드를 별도 생성 (<Page>.make.tsx)

•

키트를 Figma npm registry로 게시 → Make에서도 install 가능하게

•

자동화 스크립트로 코드 → Make 페이지 생성 (CLI 또는 Figma Make API 활용 — 향후 가능성)

다른 전략과의 비교

전략	방향	주도	Make 역할
02. Make to Design & Code	Make → Design + Code	Make	SoT
03. Copilot to Make to Design	Code → Make → Design	Copilot/개발자	중계자
04. Design Tokens Bidirectional	토큰 중심 양방향	시스템	보조
05. Storybook SoT	Code(Storybook) → Design	개발자	미사용 가능