sys-analysis-design/.claude/skills/ba-design/templates/figma-package/README-import.md

FIGMA__v1.0 — Gói nhập vào Figma

Sinh bởi	skill ba-design, activity figma
Nguồn	HIFI_<US-id>_v1.0.html · DS_<PROJECT>_v1.0.md (00-index/ds/tokens.json) · WF_<US-id>_v1.0.md · SRS_<US-id>_v1.0.md
Vì sao không có file .fig	.fig là định dạng nhị phân độc quyền; REST API của Figma không cho tạo node thiết kế. Gói này gồm các định dạng Figma nhập được và giữ được layer/text/token.

Nội dung gói

File	Định dạng	Nhập vào Figma bằng	Sửa được trong Figma
SCR-xx.<view>[.<state>].svg	SVG, một file mỗi màn hình × khung nhìn (× trạng thái khác default)	Kéo thả vào canvas, hoặc File → Place image / Import	✅ Layer vector, text, tên layer = Zn/Cnn
tokens.dtcg.json	Design token chuẩn W3C DTCG (bản sao 00-index/ds/tokens.json)	Plugin Tokens Studio for Figma → Import → JSON; hoặc Variables → Import nếu tài khoản có API variables	✅ Thành Figma Variables / Styles
png/SCR-xx.<view>.<state>.png	Ảnh chụp HIFI bằng Chrome headless (scripts/render-figma.sh)	Kéo thả	❌ Chỉ để tham chiếu và đối chiếu pixel
../HIFI_<US-id>_v1.0.html	HTML tự chứa	Plugin html.to.design (divRIOTS) → Import from file hoặc from URL khi host tạm bằng python3 -m http.server	✅ Layer đầy đủ theo DOM, auto-layout

Thứ tự nhập khuyến nghị

1. Token trước: nhập tokens.dtcg.json bằng Tokens Studio → Create Styles / Variables để có bảng màu, chữ, khoảng cách trùng tên --ds-*.
2. Component sheet: nhập ../../00-index/ds/components.html bằng html.to.design vào page Components; hoặc dựng component từ SVG và gán style vừa tạo.
3. Màn hình: kéo các file SVG vào page Screens, mỗi khung nhìn một frame (Desktop 1440×900 · Tablet 834×1112 · Mobile 390×844). Đổi tên frame theo SCR-xx · <Tên màn hình> · <view>.
4. Trạng thái: đặt các SVG .<state>.svg cạnh frame default, hoặc dùng Variants.
5. Đối chiếu: mở png/ cạnh frame để kiểm tra khoảng cách và màu khớp HIFI.

Lưu ý

• Font: SVG ghi font <tên font base trong tokens.json>; máy không có font ⇒ Figma thay bằng font gần nhất và báo Missing fonts. Cài font brand trước khi nhập.
• Màu trong SVG là mã nguyên văn từ tokens.json (Figma không đọc biến CSS); thuộc tính data-token ghi tên token để tra ngược. Sửa màu ⇒ sửa tokens.json rồi chạy lại figma, không sửa tay SVG.
• Hành vi không nằm trong Figma. Prototype link trong Figma chỉ mô phỏng điều hướng theo SRS §2.2; điều kiện, validation, mã lỗi đọc ở SRS. Khi Figma và SRS lệch: SRS thắng về tồn tại/hành vi/text, Figma thắng về bố cục (W11) — ghi lệch vào WF §5.
• Không dùng gói này để thay HIFI. HIFI là nguồn sự thật về visual đã duyệt; Figma là bản làm việc của Designer. Designer sửa trong Figma ⇒ báo BA để chạy lại hifi + figma với --proto <link Figma>.

Kiểm tra trước khi giao

node .claude/skills/ba-design/scripts/design-check.mjs --tokens 00-index/ds/tokens.json --svg-dir 03-specification/design/FIGMA_<US-id>_v1.0

Phải in ok cho: mọi mã màu trong SVG thuộc tập token · mọi SCR của SRS §2.1 có ít nhất desktop + mobile · tập id="Cnn" trong SVG ⊆ tập data-c của HIFI.