# 03. Figma starter guide

Use this structure to keep your prototype focused.

## Frame map

1. Cover
2. Brief summary
3. User flow map
4. Screen 01: onboarding
5. Screen 02: home
6. Screen 03: core task start
7. Screen 04: core task completion
8. Screen 05: history or dashboard
9. Screen 06: settings or profile
10. Error and empty states
11. Prototype links map
12. Handoff notes

## Wireframe rules

- Start grayscale. Add color only when hierarchy is clear.
- Use one type scale across all screens.
- Keep one primary action per screen.
- Reuse components (buttons, cards, inputs).
- Keep spacing consistent (8px grid or similar).
- Keep each screen to one core decision.

## Prototype rules

- Connect one happy path first.
- Add one edge path (error or empty).
- Ensure button labels describe outcome.
- Add comments where behavior is ambiguous.

## Done criteria

- A reviewer can click from first screen to success without dead ends.
- Every screen has a clear title and single primary CTA.
- At least one empty or error state is linked.