[피그마] 디자인 시스템 구조 (실무에서 쓰는 구조)

피그마에서 실무에서 많이 사용하는 디자인 시스템 구조는 보통
Design Tokens → Foundations → Components → Patterns → Templates 순서로 구성됩니다.
(대기업·스타트업 대부분 이 구조를 사용)

아래는 실무에서 가장 많이 쓰는 구조입니다.

---

피그마 디자인 시스템 구조 (실무 기준)

1️⃣ Foundations (기초 스타일)

디자인의 기본 규칙

포함되는 것

• Color
• Typography
• Spacing
• Grid
• Radius
• Shadow
• Icon

예

Foundations
 ├ Color
 ├ Typography
 ├ Spacing
 ├ Grid
 ├ Radius
 └ Shadow

 

예시

color.primary
color.secondary
spacing.8
radius.sm

 

---

2️⃣ Design Tokens

디자인 값을 토큰화해서 관리

사용 툴
→ Tokens Studio

대표 구조

tokens
 ├ global
 ├ semantic
 └ component

 

예

global (primitive)

color.blue.500
spacing.8
radius.4

 

semantic

color.background.primary
color.text.primary
color.border.default

 

component

button.background
button.text
button.padding

 

---

3️⃣ Components

UI 컴포넌트

예

Components
 ├ Button
 ├ Input
 ├ Checkbox
 ├ Modal
 ├ Card
 ├ Table
 └ Tabs

 

버튼 예

Button
 ├ Primary
 ├ Secondary
 ├ Disabled
 └ Loading

 

---

4️⃣ Patterns

여러 컴포넌트를 조합한 UI

예

Patterns
 ├ Login Form
 ├ Search Bar
 ├ Product Card
 ├ Navigation
 └ Dashboard Layout

 

---

5️⃣ Templates

실제 페이지 레이아웃

예

Templates
 ├ Landing Page
 ├ Dashboard
 ├ Product Page
 └ Admin Panel

 

---

실제 피그마 파일 구조 (추천)

Design System
│
├ Foundations
│   ├ Color
│   ├ Typography
│   ├ Grid
│   └ Spacing
│
├ Tokens
│   ├ Global
│   ├ Semantic
│   └ Component
│
├ Components
│   ├ Buttons
│   ├ Forms
│   ├ Navigation
│   └ Data Display
│
├ Patterns
│
└ Templates

 

---

디자인 → 개발 연결 구조

이 구조를 쓰면 개발과 연결됩니다.

Figma Tokens
   ↓
JSON Tokens
   ↓
Style Dictionary
   ↓
CSS / React / Android

 

관련 도구

• Style Dictionary
• Tokens Studio

---

실제 기업 디자인 시스템 구조 예

이 구조를 사용하는 회사

• Google → Material Design
• IBM → Carbon Design System
• Microsoft → Fluent Design System

---

💡 지금 사용자 상황에서 가장 중요한 것

이미 만들었다고 하신 구조

global.json
semantic.json
component.json

 

이 구조는 실무에서도 사용하는 정석 구조입니다.