Table of Contents
UI Design Levels (Figma Mockup → Frontend Implementation)
Purpose
This page defines the UI design levels used when creating screens from Figma mockups. It helps PM, Designer, Frontend Developer, and AI-assisted coding workflows align on what level of design is required before implementation.
UI Design Levels
Level 1: Low-Fidelity (Lo-fi / Wireframe)
Purpose: Focus on layout, structure, and user flow.
Characteristics:
- Simple boxes / placeholders
- Basic screen sections
- Navigation position only
- No final colors
- No final typography
- No detailed icons/images
What to review:
- Page structure
- Section order
- Main CTA placement
- Navigation flow
Best for:
- Early requirement discussion
- Quick UX alignment
- Easy tasks
Example image:
- Add lo-fi wireframe screenshot here
- Example:
Level 2: Mid-Fidelity (Mid-fi)
Purpose: Validate screen structure with more realistic components before final polish.
Characteristics:
- Real component shapes
- Better spacing and hierarchy
- Text labels included
- Grayscale or limited colors
- More realistic forms / tables / cards / modals
What to review:
- Component arrangement
- Form/table structure
- Information hierarchy
- Usability before visual polish
Best for:
- Medium tasks
- UX review
- Component structure review
Example image:
- Add mid-fi mockup screenshot here
- Example:
Level 3: High-Fidelity (Hi-fi / Final Mockup)
Purpose: Provide near-final UI for implementation.
Characteristics:
- Final brand colors
- Final typography
- Real icons/images
- Final spacing
- Polished components
- Accurate visual design
What to review:
- Final look and feel
- Brand consistency
- Component sizing and spacing
- Visual approval for development handoff
Best for:
- Frontend implementation
- Stakeholder approval
- AI-assisted code generation from Figma
Example image:
- Add hi-fi mockup screenshot here
- Example:
Level 4: Prototype / Interaction Flow
Purpose: Show how the user interacts across screens.
Characteristics:
- Click flow between screens
- Modal open/close behavior
- Navigation transitions
- Dropdown / tab / filter behavior
- User journey from one screen to another
What to review:
- Screen transitions
- Interaction behavior
- UX flow correctness
- User journey completeness
Best for:
- Complex tasks
- UX validation
- Demo / testing before implementation
Example image:
- Add prototype / flow screenshot here
- Example:
Required UI Review Dimensions
1. Layout Level
Check:
- Page structure
- Grid / columns
- Section grouping
- Alignment
- Spacing consistency
2. Component Level
Check:
- Button
- Input
- Select / dropdown
- Modal
- Table
- Card
- Tabs
- Sidebar
- Navbar
- Pagination
- Toast / alert
3. Component States
Each important component should define states where applicable:
- Default
- Hover
- Active
- Focused
- Disabled
- Loading
- Error
- Success
- Empty state
Note: Static Figma without component states is usually not enough for frontend implementation.
4. Responsive Level
Recommended breakpoints:
- Desktop
- Tablet
- Mobile
Check:
- Sidebar collapse behavior
- Table overflow / card conversion
- Form stacking
- Modal scaling
- Header / navigation behavior
5. Interaction Level
Check:
- Navigation between screens
- Modal behavior
- Dropdown behavior
- Validation behavior
- Loading behavior
- Error handling behavior
- Empty state behavior
- Pagination / infinite scroll behavior
Recommended Definition of Done by Task Complexity
| Task Complexity | Minimum Required Design Level | Notes |
|---|---|---|
| Easy | Level 1 or Level 2 | Lo-fi or Mid-fi may be enough if UI is simple and existing design system is reused |
| Medium | Level 3 + Component States | Hi-fi design is recommended before frontend starts |
| Complex | Level 3 + Level 4 + Responsive + States | Hi-fi + Prototype + states required before implementation |
Frontend / AI Coding Handoff Checklist
Before development starts, confirm the following:
- Final screen or approved mockup exists
- Main user flow is defined
- Component states are defined
- Responsive behavior is defined
- Empty / loading / error states are defined
- Design tokens are available:
- Colors
- Typography
- Spacing
- Border radius
- Shadow
- Assets are available:
- Icons
- Images
- Logos
- Interaction notes are available:
- Modal open/close
- Validation rules
- Async loading behavior
- Navigation rules
Team Recommendation
For AI-assisted UI coding (Claude Code / Copilot / other agents):
- Easy task:
- Lo-fi or Mid-fi
- Existing design system reference
- Short interaction notes
- Medium task:
- Hi-fi
- Component states
- Responsive notes
- Complex task:
- Hi-fi
- Prototype / flow
- Component states
- Responsive behavior
- Edge cases (loading / error / empty)
Conclusion: A single static Figma screen is often not enough for reliable frontend implementation. For better quality and less rework, include:
- Hi-fi design
- Component states
- Responsive behavior
- Interaction notes
Storage Path Recommendation
Suggested wiki path:
- ``design:ui_levels``
or
- ``frontend:figma_handoff:ui_design_levels``
Attachments
Store example images under:
- ``design:ui_levels:lofi_example.png``
- ``design:ui_levels:midfi_example.png``
- ``design:ui_levels:hifi_example.png``
- ``design:ui_levels:prototype_example.png``