Pick a depth. Each prompt opens in your AI pre-loaded with the lesson. Click a row to preview the prompt.
A static screen is a picture; a prototype is an experience, and the leap between them is a single connection you are about to draw. This matters now because clickability is what makes your work testable: a picture gets vague reactions, but a prototype someone can tap reveals exactly where they get confused. It is also the deliverable that impresses investors, hiring managers, and teammates, because it feels like a real app without a line of code. The mechanic is genuinely simple, duplicate a screen, change one thing, and draw an arrow from a button to the new screen, and once you have done it once you can wire up flows of any length.
You need a second screen to navigate to. Select your frame in the layers panel and press Command/Ctrl+D to duplicate it; drag the copy to sit beside the original. Rename them clearly, for example Profile and Profile-Following. On the second frame, change one thing so it is obviously a different state: switch the Follow button's text to Following and its fill from indigo to gray #9CA3AF. Now switch to prototype wiring. In the top-right of Figma there are tabs labeled Design and Prototype; click Prototype. Select the Follow button on your first frame; a small blue circle (the connection node) appears on its right edge. Click and drag from that node across to the second frame, Profile-Following, and drop it. A blue arrow appears, and an interaction panel opens showing On tap, Navigate to Profile-Following. Leave the defaults (Instant, or pick a Smart animate transition if you want it to feel smooth). That is it: tapping Follow now takes the user from the not-following state to the following state. The pattern for any app is identical, one trigger (on tap), one action (navigate to), one destination frame.