Session 6: The Art of Iteration

Duration: 2 hours
Prerequisites: Sessions 1-5 completed, anti-slop rules working
You'll need: Leigher project running, Figma connected via MCP

Part 1: The 70/30 Principle (20 min)

Two Ways to Iterate

You've always iterated in Figma—moving things, trying options, refining until it feels right.

Now you have a second path: iterating via conversation. You describe what's wrong, Claude fixes it, you verify in the browser.

Both work. The skill is knowing when to use each.

The 70/30 Split

In practice, roughly:

70% of iterations work via prompts (Path 2)
30% of iterations benefit from going back to Figma first (Path 1)

This isn't a rule—it's an observation. Some projects are 90/10, others are 50/50. You'll find your own ratio.

When to Prompt

Use prompts when:

You can describe it in one sentence
You know exactly what you want
It's a refinement, not a reimagining
It's logic, behavior, or content

Examples:

"Add 8px more padding to the header"
"Make the hover state more subtle"
"Show an error message when the field is empty"
"Change the button text to 'Save Changes'"

When to Go to Figma

Go to Figma when:

You're not sure what you want
You need to see multiple options
It's a layout or composition question
You're exploring, not refining

Examples:

"Should this be a sidebar or a modal?"
"What's the right visual hierarchy here?"
"How should these elements be grouped?"
"Let me try a few different layouts"

Part 2: Prompt-Based Iteration (40 min)

Describe What You See

You don't know what's in the code. You know what's in the browser.

Describe the visual problem, not the technical fix.

Not this: "Change the padding from 16px to 24px"

This: "The content feels cramped. Add more breathing room."

Not this: "Add a CSS transition with 200ms ease"

This: "The hover state is too abrupt. Make it smoother."

Claude figures out the implementation. You describe the intent.

Be Specific

Vague feedback leads to vague results.

Too vague: "Make it better"

Better: "The hierarchy isn't clear"

Best: "The title and description look the same weight. The title should stand out more."

Chain Refinements

You don't have to get it right in one prompt. Build up through iterations.

You: "Create a user profile card"
Claude: [creates card]

You: "The avatar is too small. Make it larger."
Claude: [adjusts]

You: "Good. Now add more space between the name and the bio."
Claude: [adjusts]

You: "The stats at the bottom need more visual separation from the bio."
Claude: [adjusts]

You: "Perfect."

Each prompt builds on the previous state. This is how refinement actually works.

Know When You're Done

It's tempting to keep tweaking forever. Signs you're done:

Changes are getting smaller
You're second-guessing changes you just made
It matches your Figma design
A colleague wouldn't notice remaining issues

Ship it. You can always refine later.

Part 3: Figma-Based Iteration (40 min)

When to Go Back

Sometimes prompting isn't enough. You need to see options.

Scenario: You're building a dashboard header. You've prompted several variations but none feel right. You need to explore.

This is when you go back to Figma.

The Figma Iteration Loop

Work in Figma — Try different layouts, compositions, hierarchies
Find something promising — Doesn't have to be perfect
Tell Claude to fetch it — "Implement this header from Figma"
Refine via prompts — Fine-tune in the browser
Repeat if needed — Big changes in Figma, small changes via prompts

Keeping Figma and Code in Sync

When you make significant changes in Figma:

Option A: Have Claude re-implement

I've updated the header design in Figma. Re-implement it from the current selection.

Option B: Describe the delta

The Figma design now has the nav items on the right instead of left. 
Update the code to match.

Option A is cleaner but slower. Option B is faster for targeted changes.

When Figma Exploration Helps

Layout decisions — Grid vs. stack, sidebar vs. top nav
Visual hierarchy — What should be most prominent?
Component composition — How should pieces fit together?
Spacing rhythm — How much air between sections?
States and variations — What does hover/active/disabled look like?

When Figma Exploration Doesn't Help

Logic and behavior — Just describe it
Content changes — Just say the new content
Single property tweaks — Faster to prompt
Bug fixes — Describe what's wrong

Part 4: Choosing Your Path (20 min)

Quick Decision Framework

Ask yourself: "Can I describe what I want in one sentence?"

Yes → Prompt it. "Add a divider between sections." "Make the cancel button secondary style." "Show a loading spinner while saving."

No → Go to Figma. "I'm not sure how to structure this settings page." "I need to see what a two-column layout would look like." "Let me explore some header variations."

Practice Scenarios

For each scenario, decide: Prompt or Figma?

"The button needs to be the primary color instead of gray." → Prompt. One sentence, clear intent.
"This form feels overwhelming. Too many fields visible at once." → Figma. Need to explore grouping, progressive disclosure, layout options.
"Add an icon to the left of the title." → Prompt. Clear, specific change.
"I'm not sure whether this should be a modal or inline editing." → Figma. Need to see both options.
"The error message should appear below the field, not above." → Prompt. Clear positional change.
"This dashboard needs better visual hierarchy." → Figma. Hierarchy is about composition—need to explore.

Building Intuition

The decision becomes automatic with practice. After a few projects, you won't think about it—you'll just know.

The 70/30 ratio might shift based on:

Project complexity — More exploratory work means more Figma
Design maturity — Established patterns means more prompting
Your confidence — More certainty means more prompting

Session 6 Checklist

[ ] Understand the 70/30 principle
[ ] Know when to prompt vs. when to use Figma
[ ] Practiced describing visual problems (not technical fixes)
[ ] Practiced chaining refinements
[ ] Practiced Figma iteration loop
[ ] Applied decision framework to scenarios
[ ] Completed at least one component using both paths

What's Next

Session 7: Git for Designers

You've been making changes, but they're not saved permanently. Session 7 teaches you the minimum Git knowledge needed to save your work, share it, and ship it.

Session 6 of 10 • The Shipping AI Designer Course
Next: Session 7 — Git for Designers

The Art of Iteration