03. 피그마 디자인 토큰

버튼 배경색 = 브랜드 메인 색상
브랜드 메인 색상 = #2563EB

버튼 배경   →  #2563EB  (직접 입력)
헤더 배경   →  #2563EB  (직접 입력)
링크 색상   →  #2563EB  (직접 입력)
강조 텍스트 →  #2563EB  (직접 입력)

버튼 배경   →  {color.primary}  (토큰 참조)
헤더 배경   →  {color.primary}  (토큰 참조)
링크 색상   →  {color.primary}  (토큰 참조)
강조 텍스트 →  {color.primary}  (토큰 참조)

color.primary = #2563EB  ← 여기 1곳만 바꾸면 끝

blue-50  = #EFF6FF
blue-100 = #DBEAFE
  ...
blue-600 = #2563EB   ← 그냥 이 색이 존재한다는 사실만 기록
blue-700 = #1D4ED8

color.primary       = {blue-600}    ← "브랜드 메인 색"
color.primary.hover = {blue-700}    ← "호버 시 색"
color.text.primary  = {gray-900}    ← "기본 텍스트 색"
color.bg.default    = {white}       ← "기본 배경색"

button.bg.default  = {color.primary}        ← 버튼 배경
button.bg.hover    = {color.primary.hover}  ← 버튼 호버 배경
input.border       = {color.border.default} ← 인풋 테두리

라이트 모드:  color.bg.default = {white}    → #FFFFFF
다크 모드:    color.bg.default = {gray-900} → #0F172A

color / primary / default
color / primary / hover
color / text / secondary
spacing / button / paddingX

아래는 디자인 토큰을 처음 설계하는 사람이 자기 설계안을 점검받기 위해 보내는 요청이다.
답을 통째로 만들어 주지 말고, 한 번에 한 단계씩만 이끌어 달라.

내가 만드는 것: {프로젝트 이름}의 디자인 토큰 설계안
내가 정한 브랜드 메인 색상: {브랜드 색상}
내가 지금까지 적어 본 토큰 이름: {내가 적은 토큰 이름들}
막힌 지점: {막힌 지점}

지켜야 할 규칙
1. 완성된 토큰 목록을 한 번에 내놓지 않는다.
2. 먼저 내 토큰이 Primitive, Semantic, Component 세 단계 중 어디에 해당하는지 물어보고 내가 답하게 한다.
3. 내 토큰 이름에 색상명이나 수치가 들어 있으면 그 자리만 짚고, 고친 이름은 내가 먼저 제안하게 한다.
4. 한 번에 한 가지만 질문한다. 내가 답한 뒤에 다음 단계로 넘어간다.
5. 마지막에 다크 모드까지 고려했는지 확인 질문을 던진다.

내가 자주 놓치는 것도 짚어 달라. Semantic 단계를 건너뛰고 Component 토큰을 Primitive에 바로 연결했는지 확인해 달라.

아래는 디자인 토큰을 처음 설계하는 사람이 자기 설계안을 점검받기 위해 보내는 요청이다.
답을 통째로 만들어 주지 말고, 한 번에 한 단계씩만 이끌어 달라.

내가 만드는 것: 사내 예약 시스템의 디자인 토큰 설계안
내가 정한 브랜드 메인 색상: #2563EB
내가 지금까지 적어 본 토큰 이름: blue-600, color/primary, button-blue-bg
막힌 지점: Semantic과 Component를 어떻게 나누는지 모르겠다

지켜야 할 규칙
1. 완성된 토큰 목록을 한 번에 내놓지 않는다.
2. 먼저 내 토큰이 Primitive, Semantic, Component 세 단계 중 어디에 해당하는지 물어보고 내가 답하게 한다.
3. 내 토큰 이름에 색상명이나 수치가 들어 있으면 그 자리만 짚고, 고친 이름은 내가 먼저 제안하게 한다.
4. 한 번에 한 가지만 질문한다. 내가 답한 뒤에 다음 단계로 넘어간다.
5. 마지막에 다크 모드까지 고려했는지 확인 질문을 던진다.

내가 자주 놓치는 것도 짚어 달라. Semantic 단계를 건너뛰고 Component 토큰을 Primitive에 바로 연결했는지 확인해 달라.

color/blue/50    →  #EFF6FF  (아주 연한 파랑)
color/blue/100   →  #DBEAFE
color/blue/200   →  #BFDBFE
color/blue/300   →  #93C5FD
color/blue/400   →  #60A5FA
color/blue/500   →  #3B82F6
color/blue/600   →  #2563EB  ← 라이트 모드 메인 색으로 쓸 기준
color/blue/700   →  #1D4ED8
color/blue/800   →  #1E40AF
color/blue/900   →  #1E3A8A  (아주 진한 파랑)

color/gray/50    →  #F8FAFC  (거의 흰색)
color/gray/100   →  #F1F5F9
color/gray/200   →  #E2E8F0
color/gray/300   →  #CBD5E1
color/gray/400   →  #94A3B8
color/gray/500   →  #64748B
color/gray/600   →  #475569
color/gray/700   →  #334155
color/gray/800   →  #1E293B
color/gray/900   →  #0F172A  (거의 검정)

color/white  →  #FFFFFF
color/black  →  #000000

spacing/1   →  4
spacing/2   →  8
spacing/3   →  12
spacing/4   →  16
spacing/5   →  20
spacing/6   →  24
spacing/8   →  32
spacing/10  →  40
spacing/12  →  48
spacing/16  →  64

radius/none  →  0
radius/sm    →  4
radius/md    →  8    ← 버튼에 주로 사용
radius/lg    →  12   ← 카드에 주로 사용
radius/xl    →  16
radius/full  →  9999 ← 완전히 둥근 알약 모양

// 글자 크기 (Number)
font/size/xs   →  12
font/size/sm   →  14
font/size/md   →  16  ← 본문 기본 크기
font/size/lg   →  18
font/size/xl   →  20
font/size/2xl  →  24
font/size/3xl  →  30

// 글자 두께 (Number)
font/weight/regular   →  400  ← 일반
font/weight/medium    →  500
font/weight/semibold  →  600
font/weight/bold      →  700  ← 굵게

// 줄 간격 (Number, 비율로 입력)
font/lineHeight/tight   →  1.25  ← 제목에 주로 사용
font/lineHeight/normal  →  1.5   ← 본문 기본
font/lineHeight/loose   →  1.75  ← 가독성 높일 때

// 폰트 이름 (String)
font/family/sans  →  Pretendard, sans-serif
font/family/mono  →  JetBrains Mono, monospace

button/bg/default       →  {color/primary}         버튼 기본 배경
button/bg/hover         →  {color/primary/hover}    마우스 올렸을 때
button/bg/disabled      →  {color/bg/subtle}        비활성 버튼 배경
button/text/default     →  {color/white}            버튼 글자색
button/text/disabled    →  {color/text/disabled}    비활성 버튼 글자
button/radius           →  {radius/md}              버튼 모서리 둥글기
button/paddingX         →  {spacing/4}              버튼 좌우 여백
button/paddingY         →  {spacing/2}              버튼 위아래 여백

input/bg/default        →  {color/bg/default}       인풋 배경
input/border/default    →  {color/border/default}   기본 테두리
input/border/focused    →  {color/primary}          포커스 시 테두리
input/border/error      →  {color/danger}           에러 시 테두리
input/text/default      →  {color/text/primary}     입력 텍스트 색
input/text/placeholder  →  {color/text/secondary}   플레이스홀더 색
input/radius            →  {radius/sm}              인풋 모서리

아래는 Figma Variables로 토큰을 만들다가 막힌 상황을 점검받기 위한 요청이다.
전체 절차를 통째로 알려 주지 말고, 한 번에 한 단계씩만 이끌어 달라.

사용 도구: Figma Variables 패널
내가 만들려는 것: {만들려는 Collection과 토큰}
지금까지 한 것: {지금까지 한 것}
막힌 지점 또는 화면에 뜬 문구: {막힌 지점}

지켜야 할 규칙
1. 절차를 한 번에 나열하지 않는다. 다음에 눌러야 할 곳 한 곳만 알려 준다.
2. 먼저 내가 지금 어느 패널의 어느 화면을 보고 있는지 물어본다.
3. 내가 화면을 확인하고 답한 뒤에 다음 한 단계를 알려 준다.
4. Variable 값에 색상 코드를 직접 입력했는지, 다른 Variable을 참조했는지 반드시 확인한다.
5. 다크 모드가 안 바뀐다고 하면 Mode 설정과 참조 연결 중 어느 쪽 문제인지 질문으로 좁혀 준다.

자주 나오는 실수도 짚어 달라. 연결된 값을 직접 고쳐서 참조가 끊긴 경우, Component 토큰이 Semantic이 아니라 Primitive를 바로 참조한 경우를 확인해 달라.

아래는 Figma Variables로 토큰을 만들다가 막힌 상황을 점검받기 위한 요청이다.
전체 절차를 통째로 알려 주지 말고, 한 번에 한 단계씩만 이끌어 달라.

사용 도구: Figma Variables 패널
내가 만들려는 것: Semantic Collection의 color/text/primary
지금까지 한 것: Primitives에 color/gray/50부터 900까지 입력하고 Semantic Collection을 만들었다
막힌 지점 또는 화면에 뜬 문구: Mode를 Dark로 바꿔도 텍스트 색이 그대로다

지켜야 할 규칙
1. 절차를 한 번에 나열하지 않는다. 다음에 눌러야 할 곳 한 곳만 알려 준다.
2. 먼저 내가 지금 어느 패널의 어느 화면을 보고 있는지 물어본다.
3. 내가 화면을 확인하고 답한 뒤에 다음 한 단계를 알려 준다.
4. Variable 값에 색상 코드를 직접 입력했는지, 다른 Variable을 참조했는지 반드시 확인한다.
5. 다크 모드가 안 바뀐다고 하면 Mode 설정과 참조 연결 중 어느 쪽 문제인지 질문으로 좁혀 준다.

자주 나오는 실수도 짚어 달라. 연결된 값을 직접 고쳐서 참조가 끊긴 경우, Component 토큰이 Semantic이 아니라 Primitive를 바로 참조한 경우를 확인해 달라.

✅ Colors       (색상 스케일 전체)
✅ Spacing      (여백 스케일)
✅ Border Radius (모서리 둥글기)
✅ Typography   (글자 크기·두께·줄 간격)
☐ Shadows      (필요 시 선택)

Collection: Tailwind CSS
├── colors/
│   ├── blue/50   →  #EFF6FF
│   ├── blue/100  →  #DBEAFE
│   │   ...
│   └── blue/900  →  #1E3A8A
├── spacing/
│   ├── 1  →  4
│   ├── 2  →  8
│   │   ...
│   └── 16 →  64
└── borderRadius/
    ├── sm  →  2
    ├── md  →  6
    └── lg  →  8

{
  "color": {
    "primary": {
      "value": "#2563EB",
      "type": "color",
      "description": "버튼·링크 등 메인 브랜드 색상"
    }
  },
  "spacing": {
    "4": {
      "value": "16",
      "type": "dimension"
    }
  }
}

{
  "variables": {
    "color/primary": {
      "value": "#2563EB",
      "type": "COLOR",
      "collection": "Semantic"
    },
    "spacing/4": {
      "value": 16,
      "type": "FLOAT",
      "collection": "Primitives"
    }
  }
}

아래는 Figma 플러그인으로 토큰을 만들고 JSON으로 내보내다가 막힌 상황을 점검받기 위한 요청이다.
결과 파일을 대신 만들어 주지 말고, 한 번에 한 단계씩만 이끌어 달라.

사용 플러그인: {사용한 플러그인 이름}
내가 하려는 것: {하려는 작업}
지금까지 한 것: {지금까지 한 것}
막힌 지점 또는 화면에 뜬 문구: {막힌 지점}

지켜야 할 규칙
1. 플러그인 사용 절차를 한 번에 다 적지 않는다. 다음 한 단계만 알려 준다.
2. 먼저 플러그인 설치가 끝났는지, 어느 파일에서 실행했는지 물어본다.
3. 플러그인이 만든 토큰이 Primitive 성격인지 Semantic 성격인지 내가 먼저 판단하게 하고, 틀리면 그 자리만 짚는다.
4. 내가 내보낸 JSON을 보여 주면 고쳐 주지 말고, 어느 항목이 무엇을 뜻하는지 질문으로 확인하게 한다.
5. 마지막에 이 JSON을 개발자에게 넘길 때 함께 알려야 할 내용이 무엇인지 나에게 물어본다.

자주 나오는 실수도 짚어 달라. Tailwind 기본값을 브랜드 색으로 바꾸지 않은 채 쓰는 경우, Semantic Collection 없이 Primitive만 내보내는 경우를 확인해 달라.

아래는 Figma 플러그인으로 토큰을 만들고 JSON으로 내보내다가 막힌 상황을 점검받기 위한 요청이다.
결과 파일을 대신 만들어 주지 말고, 한 번에 한 단계씩만 이끌어 달라.

사용 플러그인: Tailwind Tokens
내가 하려는 것: Primitive 색상 스케일을 자동 생성한 뒤 JSON으로 내보내기
지금까지 한 것: Colors와 Spacing을 선택해 Generate까지 눌렀다
막힌 지점 또는 화면에 뜬 문구: Variables 패널에 Collection이 보이지 않는다

지켜야 할 규칙
1. 플러그인 사용 절차를 한 번에 다 적지 않는다. 다음 한 단계만 알려 준다.
2. 먼저 플러그인 설치가 끝났는지, 어느 파일에서 실행했는지 물어본다.
3. 플러그인이 만든 토큰이 Primitive 성격인지 Semantic 성격인지 내가 먼저 판단하게 하고, 틀리면 그 자리만 짚는다.
4. 내가 내보낸 JSON을 보여 주면 고쳐 주지 말고, 어느 항목이 무엇을 뜻하는지 질문으로 확인하게 한다.
5. 마지막에 이 JSON을 개발자에게 넘길 때 함께 알려야 할 내용이 무엇인지 나에게 물어본다.

자주 나오는 실수도 짚어 달라. Tailwind 기본값을 브랜드 색으로 바꾸지 않은 채 쓰는 경우, Semantic Collection 없이 Primitive만 내보내는 경우를 확인해 달라.

button/bg/hover
→ 설명: "버튼에 마우스를 올렸을 때 배경색. 클릭 가능한 버튼 요소에만 사용한다."

color/danger
→ 설명: "에러 메시지, 삭제 버튼, 필수 입력 표시에 사용한다."

spacing/4
→ 설명: "16px. 컴포넌트 내부 패딩의 기본 단위이다."

아래는 디자인 토큰 핸드오프 준비 상태를 점검받기 위한 요청이다.
점검 결과를 한 번에 다 알려 주지 말고, 항목을 하나씩 물어보며 내가 직접 확인하게 해 달라.

전달 대상: {전달 받는 사람 또는 팀}
전달할 파일 목록: {준비한 전달물}
지원하는 Mode: {지원 Mode 목록}
걱정되는 부분: {걱정되는 부분}

지켜야 할 규칙
1. 체크리스트 전체를 한 번에 붙여 넣지 않는다. 한 번에 한 항목만 질문한다.
2. 내가 확인했다고 답하면 어떻게 확인했는지 한 번 더 되묻는다.
3. 토큰 이름 변경이나 삭제 계획이 있으면 그 위험을 먼저 짚고, 개발자와 협의했는지 확인한다.
4. description이 비어 있는 토큰이 있는지 내가 직접 세어 보게 한다.
5. 내가 쓴 description 문장을 고쳐 주지 말고, 어떤 컴포넌트의 어떤 상태를 담고 있는지 질문으로 확인한다.

자주 나오는 실수도 짚어 달라. Dark 값이 비어 있는 Semantic 토큰, 컴포넌트에 직접 입력한 색이 남아 있는 경우를 확인해 달라.

아래는 디자인 토큰 핸드오프 준비 상태를 점검받기 위한 요청이다.
점검 결과를 한 번에 다 알려 주지 말고, 항목을 하나씩 물어보며 내가 직접 확인하게 해 달라.

전달 대상: 프론트엔드 개발 2명
전달할 파일 목록: 토큰 JSON, Figma 보기 권한 링크, 네이밍 규칙 문서
지원하는 Mode: Light, Dark
걱정되는 부분: description을 절반만 써서 나머지를 언제까지 채워야 할지 모르겠다

지켜야 할 규칙
1. 체크리스트 전체를 한 번에 붙여 넣지 않는다. 한 번에 한 항목만 질문한다.
2. 내가 확인했다고 답하면 어떻게 확인했는지 한 번 더 되묻는다.
3. 토큰 이름 변경이나 삭제 계획이 있으면 그 위험을 먼저 짚고, 개발자와 협의했는지 확인한다.
4. description이 비어 있는 토큰이 있는지 내가 직접 세어 보게 한다.
5. 내가 쓴 description 문장을 고쳐 주지 말고, 어떤 컴포넌트의 어떤 상태를 담고 있는지 질문으로 확인한다.

자주 나오는 실수도 짚어 달라. Dark 값이 비어 있는 Semantic 토큰, 컴포넌트에 직접 입력한 색이 남아 있는 경우를 확인해 달라.