[피그마] 디자인 시스템 만드는 순서 (실무 10단계)

피그마에서 실무에서 사용하는 디자인 시스템 구축 순서 10단계를 정리했습니다.
이 순서대로 진행하면 디자인 → 토큰 → 컴포넌트 → 개발 연결까지 자연스럽게 됩니다.

---

피그마 디자인 시스템 만드는 순서 (실무 10단계)

1️⃣ 디자인 원칙 정의

먼저 디자인 시스템의 기준을 정합니다.

예

• 브랜드 톤
• UI 스타일
• 접근성 기준

대표 참고

• Material Design
• Carbon Design System

---

2️⃣ Color 시스템 만들기

먼저 Primitive 색상을 정의합니다.

예

blue-50
blue-100
blue-500
gray-100
gray-900

 

이 단계는 global token입니다.

---

3️⃣ Typography 시스템 정의

폰트 규칙을 정의합니다.

예

Heading / h1
Heading / h2
Body / large
Body / small
Caption

 

보통 포함되는 것

• font size
• line height
• weight

---

4️⃣ Spacing 시스템 정의

Spacing scale을 만듭니다.

추천 방식

4
8
12
16
24
32
48
64

 

예

spacing-4
spacing-8
spacing-16

 

---

5️⃣ Radius / Shadow / Border 정의

UI 공통 스타일 정의

예

radius-sm
radius-md
radius-lg

shadow-sm
shadow-md
shadow-lg

 

이 단계까지가 Foundations

---

6️⃣ Design Tokens 생성

토큰 구조를 만듭니다.

추천 구조

tokens
 ├ global
 ├ semantic
 └ component

 

예

global

 

color.blue.500

 

semantic

 

color.background.primary

 

component

 

button.background

 

사용 플러그인
→ Tokens Studio

---

7️⃣ 핵심 컴포넌트 제작

가장 기본 컴포넌트부터 만듭니다.

우선순위

1️⃣ Button
2️⃣ Input
3️⃣ Checkbox
4️⃣ Select
5️⃣ Modal

---

8️⃣ Variants 구조 만들기

컴포넌트 상태 정의

예

Button
 ├ variant: primary
 ├ variant: secondary
 ├ size: small
 ├ size: large
 └ state: disabled

 

사용 기능
→ Figma Variants

---

9️⃣ Patterns 제작

컴포넌트를 조합한 UI

예

Login Form
Search Bar
Product Card
Navigation Bar
Dashboard Widget

 

---

🔟 개발 연결

디자인 토큰을 코드로 변환

구조

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

 

사용 도구
→ Style Dictionary

---

⭐ 실무 디자인 시스템 제작 흐름

전체 흐름

1 Design principles
2 Colors
3 Typography
4 Spacing
5 Foundations
6 Tokens
7 Components
8 Variants
9 Patterns
10 Dev integration