FIGMA_US002-003_v1.0 — Gói nhập vào Figma


Sinh bởi	skill `ba-design`, activity `figma`
US / màn hình	US-002 (Xem giỏ hàng nhóm theo seller), US-003 (Sửa số lượng / xoá sản phẩm trong giỏ) — cùng `SCR-04` Giỏ hàng
Nguồn	`../HIFI_US002-003_v1.0.html` (bố cục v1.1, 2026-09-09) · `00-index/DS_e-commerce_v1.0.md` (v1.1, `00-index/ds/tokens.json`) · `03-specification/WF_US002-003_v1.0.md` · `03-specification/SRS_US002-003_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.
Độ tin cậy visual	🔴 — token trong `tokens.dtcg.json` là placeholder trung tính của template `ba-design` (dự án chưa có brand guideline — SAD §7.0, chưa chọn design system — `OQ-022`). Designer/PO cần chốt trước khi coi các file SVG này là visual cuối cùng
v1.1 (2026-09-09)	Bổ sung `F01`/`C07` còn thiếu cho dòng "Balo du lịch" ở `SCR-04.desktop.svg`; cập nhật `SCR-04.mobile.svg` theo bố cục mobile mới (nhóm thao tác F01+C07 xuống hàng riêng — theo `ds-components` v1.1, tiện ích `.ds-m-full`); `png/` đã có 8 ảnh (xem bên dưới)

Nội dung gói

File	Định dạng	Nhập vào Figma bằng	Sửa được trong Figma
`SCR-04.desktop.svg`	SVG (1440×900), trạng thái mặc định — đủ `F01`/`C07` cho mọi dòng `CartItem` (kể cả "Balo du lịch", bổ sung ở v1.1)	Kéo thả vào canvas, hoặc File → Place image / Import	✅ Layer vector, text, tên layer = `Z1`/`Z2`/`Z3`/`C02`/`C03`/`C04`/`C05`/`C06`/`F01`/`C07`/`C08`/`C09`/`C11`
`SCR-04.mobile.svg`	SVG (390×844), trạng thái mặc định — cập nhật v1.1: nhóm thao tác (F01+C07) nằm hàng riêng dưới khối text, khớp `.ds-m-full` trong HIFI	Kéo thả	✅ Layer vector — `Z3` là footer sticky đáy màn hình (khác desktop: sidebar bên phải) theo `WF` §2
`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/`	8 ảnh chụp `HIFI_US002-003_v1.0.html` bằng Chrome headless (`scripts/render-figma.sh`, chụp 2026-09-09): `SCR-04.{desktop,mobile}.{default,loading,empty-none,error}.png`	Kéo thả	❌ Chỉ để tham chiếu và đối chiếu pixel — ảnh mobile chụp từ bản HIFI trước khi sửa lỗi bố cục §"v1.1" ở trên, nên chụp lại (xem "Việc còn lại")
`../HIFI_US002-003_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ị

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-*. Vì token còn placeholder (🔴), đặt tên style rõ ràng kiểu "e-commerce/placeholder/…" để không nhầm là bảng màu chính thức.
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.
Màn hình: kéo SCR-04.desktop.svg và SCR-04.mobile.svg vào page Screens, đổi tên frame thành SCR-04 · Giỏ hàng · desktop / SCR-04 · Giỏ hàng · mobile.
Trạng thái khác (đang tải, rỗng, lỗi tải — xem HIFI_US002-003_v1.0.html?scr=SCR-04&state=…): gói này chưa có SVG riêng cho từng trạng thái (chỉ có default) — Designer dựng thêm trong Figma dựa trên HIFI (mở với ?state=loading/empty-none/error để xem) nếu cần, hoặc yêu cầu chạy lại figma với các hậu tố trạng thái.
Đối chiếu: mở png/ cạnh frame để kiểm tra khoảng cách và màu khớp HIFI — đã có 8 ảnh (2026-09-09); ảnh mobile nên chụp lại sau bản HIFI v1.1 (xem "Việc còn lại").

Lưu ý

Font: SVG ghi font Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif (system stack, chưa có font brand); máy không có font ⇒ Figma thay bằng font gần nhất. Không cần cài thêm font đặc biệt ở lần chạy này.
Màu trong SVG là mã nguyên văn từ tokens.dtcg.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 00-index/ds/tokens.json rồi chạy lại ds + hifi + 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.A.2; điều kiện, validation, mã lỗi đọc ở SRS_US002-003_v1.0.md. 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_US002-003_v1.0.md §5 (đã có 4 dòng chờ PO/Tech Lead quyết, xem đó trước khi sửa SVG theo ý riêng).
Không dùng gói này để thay HIFI. HIFI_US002-003_v1.0.html là nguồn sự thật về visual đã đề xuất (🔴 chưa 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>.
Số liệu trong SVG là dữ liệu minh hoạ (VD "Áo thun basic", "250.000 ₫") để hình dung bố cục thật — không phải dữ liệu SRS quy định (SRS không có ví dụ số cụ thể ngoài AC_US-002_v1.0.md §Dữ liệu mẫu, vốn dùng bộ số khác). Không suy ra số liệu nghiệp vụ từ SVG/HIFI.

Việc còn lại — cần người điều phối (có Bash/Chrome)

#	Việc	Lệnh
1	Chụp lại PNG mobile sau bản HIFI v1.1 (sửa lỗi bố cục §"v1.1" ở trên) — desktop không đổi cấu trúc DOM, không bắt buộc chụp lại nhưng chụp lại toàn bộ cho đồng bộ cũng được	`.claude/skills/ba-design/scripts/render-figma.sh 03-specification/design/HIFI_US002-003_v1.0.html 03-specification/design/FIGMA_US002-003_v1.0/png`
2	Chạy lại phép kiểm máy đầy đủ (T1/T2/H1–H5/S1) trên bản HIFI/SVG v1.1 mới nhất — lần chạy 2026-09-09 (chép ở `DSPEC` §6) thực hiện trên bản trước khi sửa mobile	xem lệnh ở `DSPEC_US002-003_v1.0.md` §6

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_US002-003_v1.0

Kết quả chạy 2026-09-09 (người điều phối, trên bản SVG trước khi bổ sung F01/C07 dòng "Balo du lịch"):

✅ S1  SVG: 2 file, màu ⊆ token
✅ S1  SVG phủ desktop+mobile cho 1 SCR

Tự kiểm tay bản v1.1 (sau khi bổ sung component còn thiếu): 9 mã màu dùng trong hai SVG đều khớp tokens.json (#F6F7F9, #1B1F24, #5B6472, #FFFFFF, #D5DAE1, #EEF1F5, #767F8C, #B42318, #2456A6); tập id C02, C03, C04, C05, C06, F01, C07, C08, C09, C11 ⊆ tập data-c/data-f của HIFI_US002-003_v1.0.html (14 ID: C01…C13, F01) — khuyến nghị chạy lại lệnh trên bằng máy để có kết quả chính thức cho bản v1.1.

7.5 KiB Raw Blame History Unescape Escape