Three screens, a component library and a tested prototype

The situation

Design the phone screens of a real thing — a fee payment flow, a course listing, a student profile — the way a working designer does: an 8-point grid, a small type scale, components with variants and styles, a clickable prototype tested on one real person, and a file organised for handoff that a developer could build from without asking you.

What you'll be able to show

• Build screens on an 8-point grid with auto layout that survives long text
• Turn repeated elements into components with variants and styles, and prove the payoff
• Prototype a flow and watch one real person attempt a task
• Prepare a file for handoff and learn from a professional system

What you need

• A Figma account (free)
• Your phone, to open the prototype
• One person who has not seen the design

Tasks

1. 1Frames and discipline
   Three phone-sized frames named Home, Details and Login. Draw a few rectangles and text layers, then rename every single layer meaningfully.
   A correct result: Three named frames; no layer called Rectangle 12.
2. 2One complete screen
   Design one screen for real: spacing only in multiples of 8, no more than five text sizes, no more than six colours, auto layout on the buttons, one card and one list. Then paste a much longer text into a field and confirm the layout adapts.
   A correct result: A screen that reflows with long text instead of breaking.
3. 3Components and styles
   Convert into components: button (primary, secondary, disabled variants), input field, card. Create colour and text styles for everything used. Then change the primary colour style and the button corner radius and watch every screen update.
   A correct result: A component set with variants, styles defined, and a before/after of the global change.
4. 4Prototype and test
   Link the screens with at least four connections, one overlay and one scrolling screen. Open the share link on your phone. Give one real person a task, say nothing while they work, and write down where they hesitated.
   A correct result: A prototype link, and a written note of the hesitations.
5. 5Handoff-ready
   Every state of every component present, two screen sizes, notes on non-obvious behaviour, icons exportable as SVG, pages and frames named so a stranger can navigate. Hand the link to somebody who has not seen it and ask them to describe what they would build; their questions are your gaps.
   A correct result: A file a stranger navigated, and the list of questions they asked.
6. 6Learn from a real system
   Duplicate a professionally built community design system and take it apart: component structure, variants, style naming. Write half a page on what you would change in your own file, then apply it.
   A correct result: Half a page of comparison and the changes applied to your file.

What to hand in

The Figma file link (view access), the prototype link, the hesitation notes, the stranger's questions, and the half-page comparison.

How it is marked