Lesson 12 of 12Article20 min
Project: App Screen + Landing Hero
Create one Figma file with two frames: (1) a mobile home screen for a learning app, and (2) a desktop landing hero. Use Auto Layout, components, and color/text styles throughout.
01Build this mini portfolio piece
Create one Figma file with two frames: (1) a mobile home screen for a learning app, and (2) a desktop landing hero. Use Auto Layout, components, and color/text styles throughout.
- Frame A — iPhone: status-safe header, course card list, bottom tab bar
- Frame B — Desktop 1440: navbar, headline + CTA, feature row of three cards
- Components: Button (Primary/Secondary), CourseCard, NavItem
- Styles: brand primary, neutrals, Heading and Body text styles
- Prototype: tap a course card → detail frame (optional third screen)
02Acceptance checklist
- No unnamed Rectangle layers on final screens
- Buttons are components with at least two variants
- Spacing uses consistent 4/8pt rhythm
- Text contrast passes a basic WCAG eye check
- Share link works in View mode for feedback
03Continue learning
- Subject hub: /learn/ui-ux-design
- Workflow article: /knowledge/figma-ui-design-workflow
- Full guide mirror: /knowledge/figma-fundamentals
- Next: practice design systems — expand your button and input library
- Pair with HTML/CSS or Tailwind courses to implement your screens in code