This lesson puts everything so far together on one real screen: a mobile sign-in screen, built the same way a working designer would build it.
Start with a Frame sized to a real device (covered in the Frames & Presets lesson) rather than an arbitrary rectangle — designing at the actual pixel size a phone screen will render at catches sizing problems immediately instead of after handoff.
Before any styling, place the content in the order a user reads it: a heading ("Sign In") announces what the screen is for, input fields come next, and the primary action (the button) sits last, visually weighted the heaviest — filled with color, while the inputs stay a neutral gray.
An input field starts as a simple rounded rectangle with a light gray fill — good enough to communicate "type here" at the wireframe stage. A real input component (with a border, a focus state, placeholder text) is exactly the kind of thing worth turning into a Component once the design settles, using the Components & Variants lesson's technique.
A screen with three buttons of equal visual weight leaves the user guessing which one matters. This screen has exactly one filled, colored button ("Continue") — everything else stays neutral, so there's no ambiguity about the next step.
In a real project, the input rectangles become real Input components with variants (Default/Focused/Error), the button becomes an instance of the Button component set from earlier in this course, and the whole screen gets wired into a prototype — covered in the Smart Animate and Overlays lessons that follow.