| name | ui-analysis-figma-analysis |
| description | null |
Figma Analysis
Category: ui-analysis · Status: 🟢 Active
When to use
Khi đọc một file/frame Figma trước khi hiện thực hóa thành code.
Steps
- Đọc layout tổng: cấu trúc auto-layout, hướng, padding, gap giữa phần tử.
- Trích token: color, typography, spacing, radius — map sang biến design system.
- Nhận diện component có thể tái sử dụng và các variant (size, state).
- Liệt kê state: default, hover, focus, active, disabled, loading, error.
- Suy ra ý đồ responsive từ constraint/auto-layout (hug, fill, fixed).
- Ghi chú điểm mơ hồ (thiếu state, spacing lệch) để hỏi designer.
Template
## Phân tích frame: <tên>
- Layout: <auto-layout, direction, gap, padding>
- Token: color=…, type=…, space=…, radius=…
- Component/variant: <Button: size×state>
- State: default/hover/focus/disabled/loading/error
- Responsive intent: <hug/fill/fixed>
- Câu hỏi designer: <…>
Example
Good: Map spacing 16px → --space-4, liệt kê đủ state, đánh dấu chỗ thiếu empty state.
Avoid: Đọc pixel cứng 16px rồi hardcode, bỏ qua hover/disabled.
Checklist