Capstone: Designing a Complete App Screen From Wireframe to Developer Handoff

Every prior chapter introduced one concept at a time. This capstone designs a single real app screen end to end, applying each of those concepts in sequence, with Figma's own workflow and Penpot's own equivalent workflow shown side by side at every step — closing the course the way it began, treating both tools as genuinely capable implementations of the same underlying discipline, even given the lopsided gap Chapter 2 named honestly.

The Scenario

A mobile app needs a Settings screen — a scrollable list of toggleable options, each row following the same visual pattern, ending in a working prototype reviewed by stakeholders and handed off to a developer ready to build it.

Step 1 — Building the Screen's Frame (Chapter 3)

Create a Frame at a standard mobile device size, giving the whole screen a defined, exportable boundary — the same dual-purpose container Chapter 3 described, doubling here as both this composition's own canvas and the responsive parent everything else in this capstone gets built inside.

Step 2 — Laying Out Content with Auto Layout (Chapter 4)

Apply Auto Layout to the screen Frame, stacking rows vertically with consistent padding and gap, and set the settings list itself to Fill the available width while each row Hugs its own content height — exactly the resizing behavior Chapter 4 described, ensuring the layout holds together correctly regardless of how many settings rows actually end up in the list.

Step 3 — Building a Reusable Settings-Row Component (Chapter 5)

Build one settings row as a main component, with a toggle switch, then create Variants for its On and Off states. Every actual row placed in the list becomes an instance of this one component, so any future styling change to the row only ever needs to happen once, in the main component.

Step 4 — Applying the Design System's Styles (Chapter 6)

Apply the shared library's own color styles (for the toggle's on/off states, background, and dividers) and text styles (for each row's label) rather than one-off values — keeping this screen visually consistent with every other screen already built from the same design system.

Step 5 — Prototyping the Screen's Interactions (Chapter 7)

Connect each toggle row with an On Click trigger that switches its own Variant between On and Off states, and connect a "Notifications" row to Navigate To a dedicated notifications sub-screen — giving stakeholders something genuinely clickable rather than a static image to imagine interacting with.

Step 6 — Sharing for Review and Comments (Chapter 8)

Share the prototype's own link with the product team, who click through it live, leaving pinned comments directly on specific rows — a request to reorder two settings, a note about a label's own wording — each addressed by editing the actual design, then marking the resolved threads as done.

Step 7 — Handing Off to a Developer via Dev Mode (Chapter 9)

Once revisions are complete, a developer opens the same file in Dev Mode, inspecting exact spacing and reading the design tokens behind each color and text style, then exports any icons used in the settings rows as SVG — the final, concrete deliverable this capstone was building toward the whole time.

Hands-On Exercises