Pick a depth. Each prompt opens in your AI pre-loaded with the lesson. Click a row to preview the prompt.
The single mental unlock in visual design is that a frame is a screen: a phone-sized rectangle is the boundary of what a user sees, and everything inside it is your design. Once that clicks, designing stops feeling mysterious, because you are just placing boxes and text inside a known-size window. This task matters now because every polished app you admire started as exactly this, a plain frame with gray boxes and placeholder text, and building one yourself in the next ten minutes proves you can do it. You will use the frame-as-screen model in every task for the rest of the course, so this is the foundation everything else stacks on.
Press F (the frame tool), then in the properties panel on the right choose a preset device; pick iPhone 16 (roughly 393 by 852 pixels). A phone-shaped frame appears named Frame 1 in your layers panel, and that is now your screen. Build a simple profile card inside it. Press R for the rectangle tool and draw a wide rectangle across the top third of the frame; this is your header block. Press O for the ellipse tool, hold Shift to keep it a perfect circle, and draw a circle overlapping the header, this is the avatar placeholder. Press T for text, click below the avatar, and type a name like Jordan Lee at size 24. Press T again and add a line of body text under it, such as Product designer, Bangalore at size 16. Add one more rectangle near the bottom, give it rounded corners (set corner radius to 8 in the properties panel), and put centered text on it reading Follow, this is your button. That is a real screen: a device frame, a header, an image placeholder, a heading, body text, and a button, all built from four tools (F, R, O, T) in under ten minutes. Rename each layer in the panel (header, avatar, name, role, follow-button) so future-you can find things.