For Designers
디자이너를 위한 Vortex 디자인 시스템 가이드
개요
Vortex는 디자이너와 개발자 간의 원활한 협업을 위해 Figma와 Design Tokens를 활용합니다.
디자이너가 할 수 있는 것
- Figma 파일 다운로드: Vortex 컴포넌트 라이브러리 사용
- Design Tokens 활용: Figma Variables → CSS Variables 자동 동기화
- 실시간 미리보기: Storybook에서 컴포넌트 확인
- 디자인 → 코드: 디자인을 개발자에게 전달하는 워크플로우
Figma 파일 다운로드
Vortex 디자인 시스템 Figma 파일을 다운로드하여 프로젝트에 활용하세요.
Foundation (기본)
Vortex Foundation Figma 파일 다운로드
모든 제품의 기반이 되는 기본 컴포넌트 라이브러리:
- 공통 컴포넌트 (Button, Input, Card 등)
- 기본 색상 팔레트
- 타이포그래피
- 간격(Spacing) 시스템
iCignal
iCignal 제품 전용 디자인 시스템:
- iCignal 브랜드 컬러
- iCignal 전용 컴포넌트
- iCignal 타이포그래피
Cals
Cals 제품 전용 디자인 시스템:
- Cals 브랜드 컬러
- Cals 전용 컴포넌트
- Cals 타이포그래피
Design Tokens
Design Tokens는 디자인 결정사항을 코드로 변환하는 시스템입니다.
Figma Variables → CSS Variables
Vortex는 Figma Variables를 CSS Variables로 자동 동기화합니다:
/* Figma Variables */
Primary Color → --color-primary
Secondary Color → --color-secondary
/* CSS Variables */
.button {
background-color: var(--color-primary);
}Design Tokens 구조
색상 (Colors):
--color-primary
--color-secondary
--color-accent
--color-destructive
--color-muted
--color-background
--color-foreground타이포그래피 (Typography):
--font-sans
--font-mono
--text-xs
--text-sm
--text-base
--text-lg
--text-xl간격 (Spacing):
--spacing-0
--spacing-1
--spacing-2
--spacing-4
--spacing-8
--spacing-16디자인 → 코드 워크플로우
1. Figma에서 디자인
- Vortex Figma 라이브러리에서 컴포넌트 선택
- 프로젝트에 맞게 커스터마이징
- Figma Variables 활용하여 디자인 토큰 적용
2. 개발자에게 전달
방법 1: Figma 링크 공유
- Figma 파일 링크를 개발자에게 전달
- 개발자가 Inspect 모드로 스타일 확인
방법 2: Storybook 참조
- Storybook에서 동일한 컴포넌트 확인
- Props와 Variants 전달
방법 3: Design Tokens 파일
tokens.json파일 export- 개발자가 CSS Variables로 import
3. 개발자가 구현
개발자는 Vortex CLI로 컴포넌트를 추가하고 디자인 토큰을 적용:
npx @vortex/cli add buttonimport { Button } from "@vortex/ui-foundation";
<Button variant="primary">Click me</Button>;Storybook 활용
Vortex Storybook에서 모든 컴포넌트를 실시간으로 확인하세요.
Storybook 주소
Storybook에서 할 수 있는 것
- 모든 Variants 확인: Button의 primary, secondary, destructive 등
- 인터랙티브 테스트: 실제 동작 확인
- 다크 모드 미리보기: Light/Dark 테마 전환
- 반응형 확인: 모바일, 태블릿, 데스크톱 뷰
- Props 문서: 각 컴포넌트의 Props API 확인
Figma Plugin (향후 계획)
Phase 5에서는 Figma Plugin을 통해 더욱 강력한 기능을 제공할 예정입니다:
- 자동 코드 생성: Figma 디자인 → React 코드 자동 변환
- 실시간 동기화: Figma Variables 변경 시 CSS Variables 자동 업데이트
- 컴포넌트 검증: 디자인이 Vortex 컴포넌트와 일치하는지 확인
디자인 체크리스트
Vortex 디자인을 시작하기 전에 다음을 확인하세요:
✅ 색상
- Figma Variables 사용
- 접근성 대비 비율 확인 (WCAG 2.1 AA)
- 다크 모드 지원
✅ 타이포그래피
- Vortex 타이포그래피 스케일 사용
- 최소 폰트 크기 14px (모바일 12px)
- 충분한 줄 간격 (line-height)
✅ 간격
- Vortex Spacing 시스템 사용 (4px 단위)
- 일관된 간격 적용
- 반응형 간격 고려
✅ 컴포넌트
- Vortex 컴포넌트 라이브러리 우선 사용
- 커스텀 컴포넌트는 최소화
- 접근성 고려 (키보드 네비게이션, ARIA)
✅ 상태
- Default, Hover, Active, Disabled 상태 디자인
- Focus 상태 명확히 표시
- Loading 상태 고려
협업 팁
개발자와 소통하기
좋은 예:
"Button 컴포넌트의 primary variant를 사용하고,
size는 lg로 설정해주세요."나쁜 예:
"파란색 버튼 크게 만들어주세요."Figma 파일 구조
Vortex Design System/
├─ 📁 Foundation/
│ ├─ 🎨 Colors
│ ├─ 📝 Typography
│ ├─ 📐 Spacing
│ └─ 🧩 Components
├─ 📁 iCignal/
│ ├─ 🎨 iCignal Colors
│ └─ 🧩 iCignal Components
└─ 📁 Cals/
├─ 🎨 Cals Colors
└─ 🧩 Cals ComponentsHandoff 체크리스트
디자인을 개발자에게 전달하기 전:
- Figma 링크 공유
- 사용한 컴포넌트 목록 정리
- 커스텀 스타일이 있다면 명시
- 반응형 동작 설명
- 인터랙션 설명
자주 묻는 질문
Figma Variables를 꼭 사용해야 하나요?
권장합니다. Figma Variables를 사용하면 개발자가 디자인 토큰을 쉽게 CSS Variables로 변환할 수 있습니다.
커스텀 컴포넌트를 만들어도 되나요?
가능하면 Vortex 컴포넌트를 먼저 사용하고, 필요시 커스터마이징하세요. 완전히 새로운 컴포넌트가 필요하다면 개발팀과 상의하세요.
다크 모드는 어떻게 디자인하나요?
Figma Variables로 Light/Dark 모드를 정의하세요. Vortex는 자동으로 다크 모드를 지원합니다.
반응형 디자인은 어떻게 하나요?
Figma Auto Layout과 Constraints를 활용하세요. Vortex는 Tailwind CSS의 반응형 브레이크포인트를 사용합니다:
- Mobile: 640px 이하
- Tablet: 768px
- Desktop: 1024px 이상