Figma 토큰 추가 작업 가이드 (2026-05-18)
작성일: 2026-05-18 최종 갱신: 2026-05-18 v1.0 — 신규 작성 버전: v1.0 대상: 디자이너 (코니) 목적: 코드·docs에 토큰화되어 있으나 Figma Variables에 미등록인 6개 색상 토큰을 Figma에 추가해서 single source 흐름 완성
1. 배경
14-audit-consistency.md P0 일괄 패치(2026-05-18)와 P1 Phase A(온보딩 ACCENT 토큰화) 작업 결과, 코드(tailwind.config.ts)와 docs(01-colors.md, design-tokens.json)에는 다음 6개 토큰이 추가됐어요. 하지만 Figma Variables(node 6972:8016)에는 아직 미등록 상태.
진실의 원천(single source of truth)은 Figma 디자인 시스템 페이지이므로, 디자이너가 Figma에 토큰을 등록해야 sync가 완성됩니다.
2. 추가해야 할 토큰 6개
모든 토큰의 정확한 hex는 이미 코드/docs와 1:1 매칭. Figma Variables에 그대로 입력하면 됨.
2.1 Yellow Collection (기존 Yellow group 안에)
| Variable 이름 | Hex | 설명 (Figma description 칸에) |
|---|---|---|
Yellow/Banner | #FFCC1F | 홈 배너 배경 + CTA hover. yellow-500과 yellow-600 사이 중간 톤 |
Yellow/Rating | #F5C51D | 별점/평점 semantic 토큰 (현재 코드는 별점에 yellow-500 사용 중) |
참고:
Yellow/Login(#FFF4C9)은 이미 Figma에 등록되어 있어요 — 같은 패턴으로 추가하면 됩니다.
2.2 Pink Collection (기존 Pink group 안에)
| Variable 이름 | Hex | 설명 |
|---|---|---|
Pink/Onboarding | #FF91C7 | 온보딩 슬라이드 1 배경 전용 (야미/샌드위치). 일반 Pink 시리즈보다 hot pink |
2.3 Brown Collection (기존 Brown group 안에)
| Variable 이름 | Hex | 설명 |
|---|---|---|
Brown/Onboarding | #C48257 | 온보딩 슬라이드 2 배경 전용 (쿠모/도시락). 일반 brown-500과 다른 anchor |
2.4 Green Collection (기존 Green group 안에)
| Variable 이름 | Hex | 설명 |
|---|---|---|
Green/Onboarding | #419A49 | 온보딩 슬라이드 3 배경 전용 (사장님+고객 듀오). 일반 green-500과 다른 anchor |
2.5 Orange Collection (신규 group)
Figma에 Orange group이 현재 없을 수 있어요. 신규 group으로 만들고 그 안에 추가.
| Variable 이름 | Hex | 설명 |
|---|---|---|
Orange/Main | #FF8500 | 알림 토스트 배경 전용 |
3. Figma 작업 절차 (가이드)
- Figma 파일 열기: YumYum-v1 Design System (node 6972:8016)
- 우측 패널의 Local variables 패널 열기 (Variables 아이콘 클릭)
- Collection 선택 (보통 "Primitives" 또는 "Colors")
- 기존 Yellow / Pink / Brown / Green group에 위 표대로 새 Variable 추가
- Orange group이 없으면 새로 만들고
Orange/Main추가 - 각 Variable의 description 칸에 위 표의 설명 입력 → 추후 추적성 ↑
- Color Palette 미리보기 frame(스크린샷에서 본 페이지)에 새 swatch 칩 추가:
- Yellow Login 옆에 Yellow Banner / Yellow Rating 칩 2개
- Pink/Brown/Green 줄 끝에 Onboarding 변형 칩 추가
- Orange 줄 신규 추가 (Main 1개)
- 등록 완료 후 Variable Mode가 Light Mode만 있으면 OK (다크모드는 추후 확장)
4. 등록 후 검증
작업 완료되면 다시 Figma MCP로 확인:
get_variable_defs(fileKey="dOF4N6r4sQpNs068WXudxP", nodeId="6972:8016")응답에 다음이 모두 포함되어야 함:
Yellow/Banner = #FFCC1F
Yellow/Rating = #F5C51D
Pink/Onboarding = #FF91C7
Brown/Onboarding = #C48257
Green/Onboarding = #419A49
Orange/Main = #FF85005. 매칭 표 (코드 ↔ Figma)
작업 후 다음과 같이 정렬되면 single source 흐름 완성:
| 토큰 | Figma Variable | design-tokens.json | tailwind.config.ts | 01-colors.md |
|---|---|---|---|---|
| Yellow/Banner | ⏳ 추가 필요 | (Primitives에 추가) | yellow.banner: '#FFCC1F' ✅ | §2.1 ✅ |
| Yellow/Rating | ⏳ 추가 필요 | (Primitives에 추가) | yellow.rating: '#F5C51D' ✅ | (semantic, 별도) |
| Pink/Onboarding | ⏳ 추가 필요 | (Pink group에 추가) | pink.onboarding: '#FF91C7' ✅ | §3.1 ✅ |
| Brown/Onboarding | ⏳ 추가 필요 | (Brown group에 추가) | brown.onboarding: '#C48257' ✅ | §3.3 ✅ |
| Green/Onboarding | ⏳ 추가 필요 | (Green group에 추가) | green.onboarding: '#419A49' ✅ | §3.2 ✅ |
| Orange/Main | ⏳ 추가 필요 | (Orange group 신규) | orange.main: '#FF8500' ✅ | §3.4-1 ✅ |
6. 미래 작업 — Sync 자동화 (백로그)
장기적으로는 다음 두 방향 중 하나로 sync 자동화 권장:
- Figma → Code 방향 (권장): Figma Variables가 변경되면 GitHub Action으로
design-tokens.json자동 갱신, 거기서tailwind.config.ts도 빌드. Style Dictionary 또는 Tokens Studio 활용. - Code → Figma 방향: Figma Plugin(예: Variables Import)으로
design-tokens.json을 Figma에 import. 디자이너가 수동 작업할 부분이 줄어듦.
지금은 P0/P1 정합성만 회복했고, 자동화는 P2~3 백로그로 분류.
이 문서는 Figma 작업 완료 후 archive 또는 sync 자동화 가이드로 업데이트.