Figma reference exports¶
2× PNG exports (860×1864) of every frame in the Yam3at Figma file, pulled via the Figma REST API on 2026-08-26.
- File key:
FANCPIgWZwUJNuM0QPCplp - Last modified in Figma: 2026-07-11
- Frames: 17, all iPhone 14/15 Pro Max (430×932)
Files are numbered in canvas reading order (left-to-right, top-to-bottom), which is how the designer laid the flow out. Note this is not the order of the frame names inside Figma — frames -5/-6 and -8/-9 are transposed on the canvas, and the filenames here follow the canvas, not the names.
| # | Screen | Node | Structure | App counterpart |
|---|---|---|---|---|
| 01 | Splash | 1:2 |
flat image | (none — app has no splash screen) |
| 02 | Onboarding 1 — all services, one place | 1:4 |
layered | screens/onboarding.dart slide 1 |
| 03 | Onboarding 2 — book in under a minute | 1:17 |
layered | screens/onboarding.dart slide 2 |
| 04 | Onboarding 3 — let AI plan it | 1:31 |
layered | screens/onboarding.dart slide 3 |
| 05 | OTP verification | 1:102 |
layered | screens/otp_login.dart |
| 06 | Login | 1:43 |
layered | screens/login.dart |
| 07 | Home | 1:126 |
layered | screens/home.dart |
| 08 | Service detail + packages | 1:306 |
flat image | screens/service_detail.dart |
| 09 | Booking details | 1:296 |
flat image | screens/booking_flow.dart |
| 10 | Payment | 1:298 |
flat image | screens/payment.dart |
| 11 | Order confirmed | 1:300 |
flat image | screens/order_confirmation.dart |
| 12 | Live tracking map | 1:303 |
flat image | screens/order_detail.dart |
| 13 | Review + tip | 1:304 |
flat image | (embedded in booking_detail.dart / order_detail.dart) |
| 14 | My bookings | 1:276 |
flat image | screens/bookings.dart |
| 15 | Messages | 1:281 |
flat image | screens/messages.dart |
| 16 | Account | 1:286 |
flat image | screens/account.dart |
| 17 | AI assistant | 1:291 |
flat image | screens/ai_assistant.dart |
"flat image" means the frame is a single rectangle with an image fill and zero text layers — nothing can be measured out of it. Only the six layered frames carry real specs; see ../design-tokens.md §9.
Re-exporting¶
Needs a Figma personal access token (Figma → Settings → Security). Do not commit the token.
curl -H "X-Figma-Token: $FIGMA_TOKEN" \
"https://api.figma.com/v1/images/FANCPIgWZwUJNuM0QPCplp?ids=<node-ids>&scale=2&format=png"
The response gives short-lived S3 URLs to download. Frame node IDs are in the table above.
Scope caveat¶
These screens are the multi-service super-app direction. Production runs events-first (super_app_enabled flag, default off), so screens 07–13 describe a flow users cannot currently reach. See ../../product/scope-and-roadmap.md and the events-first decision. Brand primitives (colour, radii, type) apply in both modes; screen-level composition applies only to the super-app mode.