원본 Gist

• shadcn Figma Guidelines (opens in a new tab)

shadcn Figma 가이드라인

Shadcn 디자인 원칙을 구현하기 위한 구조화된 Figma 가이드라인입니다.

1. 그리드 & 레이아웃 (Grids & Layout)

• 데스크톱 프레임 프리셋: 너비 1440px.
• 그리드 시스템: 12 컬럼, 72px 거터, 24px 마진.
• 기본 단위: 4px.

✅ 모든 프레임에 레이아웃 그리드를 추가하세요. ✅ 섹션과 컴포넌트에 오토 레이아웃을 사용하세요.

2. 타이포그래피 (Typography)

• 폰트: Inter (대체 폰트: 시스템 sans-serif).
• 스타일:
  • Heading 1 — 48px / 600 weight / 1.2 line-height
  • Heading 2 — 36px / 600
  • Heading 3 — 28px / 600
  • Body Text — 16px / 400 / 1.5 line-height
  • Caption — 14px / 400

✅ Figma에서 텍스트 스타일을 생성하세요: H1, H2, H3, Body, Caption. ✅ 일관된 문자 간격(0.5%)을 유지하세요.

3. 색상 스타일 (Color Styles)

• 주요 회색:
  • Gray 50: #F8FAFC
  • Gray 100: #F1F5F9
  • Gray 900: #0F172A
• 강조색:
  • Blue 600: #2563EB
• 배경:
  • Light: #FFFFFF
  • Dark Mode Base: #020617

✅ 색상 스타일을 생성하세요: Primary, Secondary, Accent, Error, Background. ✅ WCAG AA 준수를 위해 명암비 확인 플러그인을 사용하세요.

4. 컴포넌트 (Components)

• 모서리 반지름:
  • 작은 요소: 4px
  • 버튼/입력창: 6px
  • 카드/모달: 8px
• 입체감:
  • 카드용 부드러운 그림자: 0px 4px 6px rgba(0, 0, 0, 0.1)
• 버튼 상태:
  • Default → Hover → Focus → Disabled

✅ 컴포넌트를 위해 Figma에서 Variants를 사용하세요 (예: Button: Default, Hover, Focus). ✅ 버튼과 카드에 오토 레이아웃 패딩을 정의하세요 (예: 세로 패딩 12px).

5. 간격 시스템 (Spacing System)

• 간격 토큰: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• 간격 규칙:
  • 카드 내부 패딩: 24px
  • 섹션 간 간격: 48px–64px

✅ "간격 토큰" 컴포넌트 세트를 만드세요. ✅ 섹션 사이에 일관된 수직 간격을 사용하세요.

6. 모션 (Motion)

• 상호작용 타이밍:
  • 빠른 마이크로 인터랙션: 150ms
  • 모달/오버레이 전환: 200ms 페이드/슬라이드.
• 이징(Easing): ease-in-out

✅ 버튼 호버/포커스 전환에 Figma의 Smart Animate를 사용하세요. ✅ 모달과 드롭다운에 페이드 및 슬라이드 애니메이션을 추가하세요.

7. 디자인 토큰 (선택적 고급)

규모를 확장하는 경우:

• Figma Tokens와 같은 Figma 플러그인을 통해 토큰을 내보내세요.
• 코드베이스 전반에 사용할 색상, 타이포그래피, 테두리 반지름, 간격 토큰을 정의하세요.

✅ 토큰화된 스타일로 다중 테마 지원(Light/Dark)을 활성화하세요.

🎨 Figma 파일 설정 요약