Figma Make 디자인 시스템 키트

01. Figma Make 디자인 시스템 키트

전략 개요

Figma Make의 AI 생성 능력을 활용해 프로젝트 시작 시점에 디자인 시스템 키트를 빠르게 구축하고, 이를 모든 후속 작업의 기반(Single Source of Truth)으로 삼는 전략입니다.

[프롬프트로 토큰/컴포넌트 생성]
            │
            ▼
[Figma Make에서 컴포넌트 라이브러리 완성]
            │
            ├─→ Figma Design 라이브러리화
            │   (디자이너가 폴리싱 + 팀 라이브러리 게시)
            │
            ├─→ npm 패키지 (Figma npm registry / GitHub Packages)
            │   (개발 측에서 import해서 사용)
            │
            └─→ Make 내부 재사용
                (이후 모든 페이지를 이 키트 기반으로 생성)
Plain Text
복사

핵심 원칙

토큰 우선: 색상/간격/타이포는 반드시 Variable/Token으로 정의

컴포넌트 단위 분리: 페이지 통째 생성 금지, 단위별 분리

양쪽 동시 게시: Figma Library + npm 패키지를 함께 운영

버전 관리: SemVer 준수 + Changelog 작성

단계별 실행

Phase 1: 토큰 정의 (1~2시간)

Make 채팅에 한 번에 정의:

다음 디자인 토큰을 정의해서 src/design-system/tokens.ts와
tailwind.config.js에 반영해줘.

Color:
- brand: 50, 100, 500(#2563EB), 900
- gray: 50, 100, 200, ..., 900
- semantic: success, warning, danger, info

Typography:
- Pretendard 폰트
- size: xs(12), sm(14), base(16), lg(18), xl(20), 2xl(24), 3xl(32)
- weight: 400, 500, 600, 700

Spacing: 4, 8, 12, 16, 24, 32, 48, 64
Radius: sm(4), md(8), lg(12), xl(16), full(9999)
Plain Text
복사

Phase 2: 기초 컴포넌트 (반나절)

•

Button, Input, Select, Checkbox, Radio, Switch

•

Card, Badge, Avatar, Tooltip, Modal

•

각 컴포넌트마다 Variants + States 명시

Phase 3: 패턴 컴포넌트 (반나절)

•

Form (Label + Input + Helper + Error)

•

Table (Sortable, Pagination)

•

Navigation (Sidebar, Topbar, Tabs)

•

Empty/Loading/Error States

Phase 4: 카탈로그 페이지

•

모든 컴포넌트를 한 페이지에 보여주는 Showcase

•

디자이너 검토 + 개발 핸드오프 자료

Phase 5: 게시

Figma Design으로 복사 → Variants 정리 → 팀 라이브러리 게시

GitHub로 Push → npm 패키지 배포

사용 가이드 문서 작성

운영 가이드라인

•

키트 변경 시 양쪽(Figma Library + npm) 모두 업데이트

•

Breaking Change는 Major 버전 업 + 마이그레이션 가이드

•

새 페이지 생성 시 항상 "기존 키트 컴포넌트 재사용" 프롬프트 명시

기대 효과

•

AI 생성 디자인의 일관성 확보

•

디자이너-개발자 공통 언어 형성

•

후속 자동화 전략(Make-Design-Code 싱크)의 기반

안티패턴

•

토큰 없이 매번 hex 값으로 생성

•

컴포넌트 없이 페이지마다 처음부터 만들기

•

Figma Library와 npm의 버전 불일치