Testing Debrief

What surprised you most from testing your paper prototype?

What did users struggle with that you didn't anticipate?

Be ready to share one insight that changed your design.

Prayer

[Name], will you pray for us today?

Unit B: Make It Better App

AI can help you explore ideas fast, but it lacks intuition and taste

Today

Testing Debrief
AI Tools for Prototyping
Figma Prototyping Demo
Work Session — B3 Digital Prototype

By the end of today...

AI Tools

You'll know the current landscape of AI prototyping tools and what each is good (and bad) at

Digital Prototyping

You'll start translating your paper prototype into an interactive digital prototype in Figma

AI Policy

You'll understand the B3/B4 AI policy: AI is welcome for B3, but B4 must be your own Figma work

AI Tools for Prototyping

The good, the bad, and the ugly

You have tested paper prototypes with clear design intent.

B4 requires a high-fidelity prototype indistinguishable from native iOS/Android.

How do you get there?

Design is the forming and rendering of intent

AI is a rendering tool,
not a forming tool.

You must put in the work to form your intent.

AI Prototyping Tools

A non-exhaustive list

Figma Make

AI built into Figma; generates UI from text prompts within your existing file

v0 by Vercel

Generates React-based UIs from text or image; free tier; produces running code

Lovable

Chat-based full-stack prototype builder; iterate in real time with a live preview

Play

iOS-specific; real native elements; exports to SwiftUI/Xcode; free education program

Articulating your intent is key

  1. Go to Figma Make
  2. Describe an app you want to make — keep it simpleReminder/to-do app  ·  Calendar app  ·  Library app
  3. Submit your prompt

Raise your hand when Figma Make has finished. Tell me about your results.

Writing better prompts

  1. Go to Claude.ai
  2. "Help me write a prompt for Figma Make. I'm designing a [same app]. Ask me clarifying questions first. I also have a reference image."
  3. Answer Claude's questions
  4. Take Claude's prompt to Figma Make — include your reference image

Raise your hand when Figma Make has finished. Tell me about your results.

AI Limitations

  1. Doesn't always follow platform conventions
  2. Makes stuff up to fill gaps and please you
  3. Doesn't always match your style
  4. Changes things you didn't ask it to change

AI is like an over-eager junior designer. The clearer your instructions, the better the output.

What are you noticing in the prototype it made for you?

AI Policy for B3 and B4

B3 — Digital Prototype

You may use AI tools freely — Figma Make, v0, Lovable, Play, etc.

B4 — Final High-Fidelity

Must be designed in Figma without AI tools.

B3 is where you learn what AI can do.
B4 is where you prove what you can do.

Figma Prototyping

Your final prototype must be built using Figma's prototyping tools. Let's do a quick demo.

Prototype mode  ·  Click/tap interactions  ·  Smart Animate  ·  Device preview

R rectangle T text F frame ⌘D duplicate ⇧A auto layout

Next up

B3 Digital Prototype — Translate your tested paper prototype into an interactive Figma prototype

Match the existing app's design language  ·  Try Figma Make, v0, or Lovable  ·  If iOS, explore Play

User Testing Round 2 — Test with at least 2 people (not classmates), can happen after class

If you used AI — Check every screen against your paper prototype and platform conventions

Don't forget the iOS and Material Design resource files!

B3 due before Day 8 on Learning Suite: PDF with Figma link + testing notes from 2 users

Resources

1 /