40 lines
3.6 KiB
Markdown
40 lines
3.6 KiB
Markdown
# FIGMA_<US-id>_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
|
||
|
||
```bash
|
||
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.
|