AI Product Design · Agentic UX

Making Figma’s AI edits easier to understand and control

Over 15 days, I studied how 7 designers used Figma’s AI Agent, identified 16 gaps in the editing experience, and developed 4 principles to guide my redesign.

Figma AI Agent: Attribution Layer

What makes AI-generated edits difficult to manage in Figma today?

Figma’s AI Agent can edit multiple layers at once, but it isn’t always clear what changed or how to fix an unwanted edit without undoing the rest.

I explored a workflow that lets designers preview, track, and correct individual AI-generated changes.

RoleUX Researcher & Product Designer
Timeline15 days · Independent project
ScopeResearch, synthesis, interaction design & concept development

What if designers could see and manage every AI-generated edit?

I identified 16 gaps while studying 7 designers using Figma’s AI Agent. My redesign explores how to address them before, during, and after the agent makes edits.

Today vs proposed

Today: Designers piece together what the agent changed.
Proposed: Preview the plan, follow the edits, and review the results.

Before the agent actsCan I review what the agent plans to do?
Figma now
Tidy trip cardsShared
AI
3 selected

Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

  • Polishing trip cards
  • Discovered top library assets
  • Planning next steps

Ask for changes

Designers can’t review the plan before edits begin.

It’s unclear which layers the agent will change or where it’s making assumptions.

Proposed
Tidy trip cardsShared
AI
3 selected

Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

Plan2 backed·1 guess

1Rename layers✓✕

Name: Frame 12 → Trip card / Rome

2Add a streak card✓✕

GuessYou didn’t ask for one.

0 accepted · 2 to review

Accept allRun accepted

Reply to the agent

Review the plan before anything changes.

See affected layersFlag assumptionsApprove individual steps
While the agent actsCan I follow what the agent is changing?
Figma now
Tidy trip cardsShared
AI
3 selected

Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

  • Polishing trip cards
  • Discovered top library assets
  • Editing 3 cards

Reply to the agent

Limited visibility into edits as they happen.

Designers see progress updates, but not a clear record of individual changes.

Proposed
Tidy trip cardsShared
AI
3 selected

Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

Plan1 of 4 done

  1. 1Round card cornersApplied

    Radius: 3 → 12

  2. 2Recolor buttons2 of 3
  3. 3Bolder headingsQueued

0:16 elapsed

Stop

Reply to the agent

Follow each edit as it happens.

Track live progressSee individual changesStop the run
After the agent actsCan I review and fix what the agent changed?
Figma now
Align card stylesShared
AI

Align the styles of Rome, Kyoto and Lisbon

Done! I updated 3 cards: rounded the corners, recoloured the buttons, made the headings bolder and evened out the spacing.

Ask for changes

Correcting one edit can mean undoing more.

The final summary doesn’t provide a layer‑level record for reviewing and reversing individual edits.

Proposed
Align card stylesShared
AI

Align the styles of Rome, Kyoto and Lisbon

Done12 edits

Undo runKeep changes

Reply to the agent

Review the results and keep what works.

See every changeAccept or reject editsHold uncertain changes

Were other designers struggling with the same things?

After running into issues myself, I wanted to know whether other designers faced the same problems. I explored this through usability sessions, community discussions, and Figma’s documentation.

Personal experience

It started with my own experience.

While using Figma’s AI Agent for everyday design tasks, I kept running into moments where I couldn’t easily follow or correct its changes. That prompted me to investigate further.

01 Usability sessions

I observed 7 designers adding content, replacing placeholders, and making batch edits, focusing on where they needed to check or correct the agent’s work.

02 Community evidence

I reviewed Figma Community discussions, Reddit, and user reviews to see whether similar issues appeared beyond my sessions.

03 Figma documentation

I checked Figma’s documentation to distinguish the agent’s documented behavior from issues reported by users.

Human oversight challenges

When did designers encounter the most friction with Figma’s AI Agent?

Half appeared before the agent made a single edit.

  1. Before the agent actsCan I tell what the agent is about to do?
  2. 01
    Unclear selection boundariesDesigners can’t tell if the agent will edit only selected layers.
    Scope & permission
  3. 02
    Changes beyond the requestThe agent may make edits that weren’t asked for.
    Scope & permission
  4. 03
    Unclear impact on shared componentsIt’s difficult to tell whether an edit will affect one instance or all instances.
    Scope & permission
  5. 04
    No way to check interpretationDesigners can’t review how the agent understood their request.
    Interpretation & planning
  6. 05
    No plan to reviewThe agent doesn’t clearly show its intended edits beforehand.
    Interpretation & planning
  7. 06
    Missing clarificationThe agent may proceed without resolving unclear instructions.
    Interpretation & planning
  8. 07
    Limited visibility into sourcesDesigners can’t easily see which files or libraries the agent used.
    Context & grounding
  9. 08
    References aren’t always followedThe agent may not use the components designers specify.
    Context & grounding

Control over time

How does a designer’s sense of control change as the agent works?

Confidence starts high, then declines as the work becomes harder to see, stop, and verify.

Before the agent acts

Set boundaries and review the plan.

HighUncertain about scope

“Will it change only what I asked?”

  • Unclear edit boundaries
  • No plan to review
  • Unknown context used
While the agent acts

Follow edits and intervene when needed.

FallingLosing track of changes

“What is it changing right now?”

  • Limited live visibility
  • Unclear stopping behavior
  • Limited selective undo
After the agent acts

Review results and correct mistakes.

LowUnsure what to keep

“What changed, and what needs fixing?”

  • No detailed change record
  • Unclear edit ownership
  • No prompt-to-edit history

Research synthesis

What did all these issues have in common?

The bigger problem wasn’t that the agent could make mistakes. It was how difficult those mistakes were to manage.

Designers couldn’t easily:

Set boundaries before a run

Follow changes as they happened

Undo individual edits afterward

How might we

Three questions to design for

Designers couldn’t easilyHow might we
Before

Set boundaries before a run

Make the plan clear

How might we help designers review what the agent understood and plans to change before it starts?

While

Follow changes as they happened

Make edits visible

How might we help designers follow the agent’s edits and step in when needed?

After

Undo individual edits afterward

Make mistakes easier to fix

How might we help designers review and correct individual edits without losing the changes they want to keep?

Four rules to help designers stay in control.

I used the research findings to define four principles for making AI edits easier to understand, follow, and correct.

01Show the plan before acting
02Make every change traceable
03Correct at the size of the mistake
04Flag what was assumed
01

Show the plan before acting

Show how the agent understood the request and which layers it plans to edit.

Stage

Before

Traces to 4 problems

ScopeInterpretationPlanningContext
02

Make every change traceable

Record what changed, where it changed, and whether a person or the agent made the edit.

Stage

WhileAfter

Traces to 5 problems

ScopeExecutionProvenance ×2History
03

Fix one edit without losing the rest

Let designers undo individual edits and stop a run without losing completed changes.

Stage

WhileAfter

Traces to 3 problems

ExecutionRecovery ×2
04

Make assumptions visible

Flag what the agent assumed and highlight edits that could affect more than intended.

Stage

BeforeAfter

Traces to 4 problems

ScopeInterpretationContextDrift

What could I realistically tackle in this redesign?

5In focus
  • Scope and permissions
  • Interpretation and planning
  • Execution visibility
  • Recovery and reversibility
  • Change verification and attribution
4Not now
  • Content and grounding: How the agent retrieves and uses context.
  • Collaboration and history: Broader team workflows.
  • Usage limits: Credits, pricing, and allowances.
  • Model behavior: The underlying AI’s accuracy and performance.

How are other tools solving similar problems?

I explored how other tools handle planning, change tracking, corrections, and uncertainty to see which patterns could work inside Figma’s canvas.

How did these patterns shape my redesign?

I brought together the most useful patterns from each tool and mapped them to four features across an agent run.

Stage 01 of 03

What if designers could review the plan before the agent acts?

Today, Figma’s AI Agent can begin editing without showing how it interpreted the request, which layers it plans to change, or how far those changes might reach.

The shift

What if designers could check the agent’s intentions before anything changes?

  1. Tidy and polish Trip card / Rome, Trip card / Kyoto and Button / Primary

    01Name the layersReference specific layers directly in the prompt and highlight them on the canvas.
  2. How far should “polish” go?

    Layout onlyColour and type too
    02Clarify the requestAsk a focused question when instructions are unclear.
  3. Plan2 backed·1 guess

    1Rename layers✓✕

    Name: Frame 12 → Trip card / Rome

    2Add a streak card✓✕

    GuessYou didn’t ask for one.

    03Review the planPreview proposed edits, flag assumptions, and approve changes before execution.
Before the agent acts / 01 of 02The flow, end to end

Nothing changes without the designer’s approval.

Five checkpoints help designers review the agent’s intentions before editing begins.

    Before the agent acts / 02 of 02Up close, piece by piece

    How does each interaction improve the editing experience?

    Six comparisons show the current Figma experience alongside my proposed interactions.

    Referencing layers in a prompt

    Figma now
    New chatShared
    AI
    3 selected

    Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon. Keep Lisbon title on one line, use Button / Primary for the buttons, and keep the photos as they are.

    Proposed
    New chatShared
    AI

    Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon. Keep Lisbon title on one line, use Button / Primary for the buttons, and keep the photos as they are.

    Selected layers appear as a count, making individual references harder to distinguish.

    Mention layers directly in the prompt, with their names and icons attached to each reference.

    Seeing which layers are referenced

    Figma now
    Home
    12 EXPERIENCES
    Rome5 days · $3,500
    Book trip
    Kyoto7 days · $4,200
    Book trip
    Lisbon4 days · $2,100
    Book trip
    Paris6 days · $3,900
    Book trip
    Proposed
    Home
    12 EXPERIENCES
    Rome5 days · $3,500
    Book trip
    Kyoto7 days · $4,200
    Book trip
    Lisbon4 days · $2,100
    Book trip
    Paris6 days · $3,900
    Book trip

    Selection highlights can disappear when designers click elsewhere on the canvas.

    Keep referenced layers outlined, even when the selection changes. Hovering a mention highlights its layer.

    Clarifying unclear requests

    Figma now
    Tidy trip cardsShared
    AI
    3 selected

    Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

    Analyzing

    Thinking

    Weighing options

    Working on it

    • Polishing trip cards
    • Discovered top library assets
    • Planning next steps

    Ask for changes

    Proposed
    Tidy trip cardsShared
    AI

    Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

    One question before I plan.

    How far should “polish” go?

    Type your own answer

    Skip, you decide

    The agent may interpret vague instructions without asking what the designer intended.

    Ask one focused question, with suggested answers and an option to write a custom response.

    Reviewing edits before execution

    Figma now
    Tidy trip cardsShared
    AI
    3 selected

    Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

    • Polishing trip cards
    • Discovered top library assets
    • Editing 3 cards

    Reply to the agent

    Proposed
    Tidy trip cardsShared
    AI

    Layout only

    Here’s my plan as 3 suggestions, previewed on the canvas. Nothing changes until you run the ones you accept.

    Plan3 steps

    1. 1Rename layers✓✕

      Rome, Kyoto, Lisbon · 9 layers

      Name: Frame 12 → Trip card / Rome

    2. 2Add auto layout✓✕

      Trip card × 3

      Padding: 12 → 16

      Even spacing that holds when the text changes.

    3. 3Keep Lisbon’s title on one line✓✕

      Trip card / Lisbon / Title

      Width: Fixed → Hug

    0 accepted · 0 rejected · 3 to review

    Accept allRun accepted

    Reply to the agent

    Suggest

    The agent can begin making edits before designers review the intended steps.

    Preview proposed changes on the canvas and approve the plan before execution.

    Identifying the agent’s assumptions

    Figma now
    Tidy trip cardsShared
    AI
    3 selected

    Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

    • Polishing trip cards
    • Discovered top library assets
    • Editing 3 cards

    Reply to the agent

    Proposed
    Premium upsellShared
    AI

    Here’s my plan as 5 suggestions. Two parts are my guesses, so check those first.

    Plan8 backed·2 guesses

    1. 1Shrink the hero✓✕

      Shrink the Hero card from 180 to 132px so the topics stay above the fold.

    2. 2Add a streak card✓✕

      Add a streak card under the hero showing the current streak.

      GuessYou didn’t ask for one. Streaks are a common upgrade hook.

    3. 3Add a 7-day trial banner✓✕

      Add a 7-day free trial banner to push paid upgrades.

    4. 4Rename the section✓✕

      Rename “Browse topics” to “Free topics”.

      GuessYou didn’t name it. “Free” sets them apart from the Pro topics.

    5. 5Lock two topics behind Pro✓✕

      Add a Pro variant to the Topic card main component and switch Energy and Creativity to it.

    0 accepted · 0 rejected · 5 to review

    Accept allRun accepted

    The agent’s assumptions aren’t clearly separated from the designer’s instructions.

    Mark inferred steps with a purple indicator and a short explanation.

    Managing changes beyond the selection

    Figma now
    Tidy trip cardsShared
    AI
    3 selected

    Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

    • Polishing trip cards
    • Discovered top library assets
    • Editing 3 cards

    Reply to the agent

    Proposed
    Premium upsellShared
    AI

    PlanSteps 3–4 · this file

    1. 3Add a 7-day trial banner✓✕

      Explore: + Trial banner

    2. 4Rename the section✓✕

      Text: Browse topics → Free topics

    0 of 4 accepted

    Accept allRun

    Component changeRuns on its own

    5Lock two topics behind Pro

    Topic card: + Pro variant

    9 instances here change when it runs. Sleep app and Focus app get it after you publish.

    These 2 onlyRun on component

    The impact of editing a shared component may not be obvious before changes are made.

    Show affected instances and require separate approval for shared-component edits. Publishing remains a distinct action.

    Stage 02 of 03

    What if designers could follow every edit as it happens?

    Today, Figma’s AI Agent offers limited visibility into which step it’s working on, what it’s changing, and what happens when a run is stopped.

    The shift

    What if designers could follow the agent’s work and stop without leaving unfinished edits?

    1. Plan1 of 4 done

      1. 1Round card cornersApplied

        Card × 3

        Radius: 3 → 12

      2. 2Recolor buttons2 of 3
      3. 3Bolder headingsQueued

        Weight: Regular → Semibold

      4. 4Even the spacingQueued

        Gap: 16 → 28

      0:16 elapsed

      Stop
      01Follow the live planTrack each step as it runs, with Stop always within reach.
    2. Edits5 of 12
      Round card corners3
      1. RomeRadius3→120:03
      2. KyotoRadius3→120:04
      3. LisbonRadius3→120:05
      Recolor buttons2 / 3
      1. RomeFill→0:11
      2. KyotoFill→0:13
      3. LisbonFill→
      Bolder headingsQueued
      Even the spacingQueued
      02See every editFollow layer and property changes as they appear on the canvas.
    3. Plan1 of 4 kept

      1. 1Round card cornersKept

        Card × 3

        Radius: 3 → 12

      2. ↩Recolor buttonsRolled back

        2 of 3 edits undone

        ResumeSkip step
      3. –Bolder headingsNot started

        Weight: Regular → Semibold

      4. –Even the spacingNot started

        Gap: 16 → 28

      Stopped at 0:16

      03Stop without losing progressKeep completed steps, roll back unfinished edits, and resume when ready.
    While the agent acts / 01 of 02The flow, end to end

    Stop anytime. Keep what’s finished.

    Six checkpoints show how designers can follow, stop, inspect, and resume an agent run.

      While the agent acts / 02 of 02Up close, piece by piece

      How does the agent keep designers informed while editing?

      Four comparisons show the current experience alongside my proposed interactions.

      Following the agent’s progress

      Figma now
      Tidy trip cardsShared
      AI
      3 selected

      Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

      • Polishing trip cards
      • Discovered top library assets
      • Editing 3 cards

      Reply to the agent

      Proposed
      Align card stylesShared
      AI

      Align the styles of Rome, Kyoto and Lisbon

      Running your plan. I’ll tick off each step as it lands.

      Plan1 of 4 done

      1. 1Round card cornersApplied

        Card × 3

        Radius: 3 → 12

      2. 2Recolor buttons2 of 3
      3. 3Bolder headingsQueued

        Weight: Regular → Semibold

      4. 4Even the spacingQueued

        Gap: 16 → 28

      0:16 elapsed

      Stop

      Applying step 2 of 4…

      Reply to the agent

      Progress updates don’t clearly show each planned step, affected layer, or property change.

      The approved plan becomes a live checklist, showing completed steps, ongoing edits, and a Stop option.

      Seeing where edits happen

      Figma now
      Home
      12 EXPERIENCES
      Rome5 days · $3,500
      Book trip
      Kyoto7 days · $4,200
      Book trip
      Lisbon4 days · $2,100
      Book trip
      Proposed
      Home
      12 EXPERIENCES
      Rome5 days · $3,500
      Book trip
      Kyoto7 days · $4,200
      Book trip
      Lisbon4 days · $2,100
      Book trip

      Layers can change without a clear indicator of where the agent is currently working.

      Highlight the active layer with an agent-colored outline linked to the current plan step.

      Tracking individual changes

      Figma now
      Tidy trip cardsShared
      AI
      3 selected

      Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

      • Polishing trip cards
      • Discovered top library assets
      • Edited 3 cards

      Reply to the agent

      Proposed
      Edits5 of 12
      Round card corners3
      1. RomeRadius3→120:03
      2. KyotoRadius3→120:04
      3. LisbonRadius3→120:05
      Recolor buttons2 / 3
      1. RomeFill→0:11
      2. KyotoFill→0:13
      3. LisbonFill→

      2 steps queued

      Run summaries don’t provide a detailed record of every changed layer and property.

      A live log records each edit with its layer, property, and before-and-after values, grouped by step.

      Stopping without losing progress

      Figma now
      Tidy trip cardsShared
      AI
      3 selected

      Tidy and polish Trip card / Rome, Trip card / Kyoto and Trip card / Lisbon…

      • Polishing trip cards
      • Discovered top library assets
      • Editing 3 cards

      Reply to the agent

      Proposed

      Stopping doesn’t clearly explain which edits were completed or what state the file was left in.

      Keep completed steps, roll back unfinished edits, and let designers revise or skip a step before resuming.

      Stage 03 of 03

      What if designers could review and correct every AI-generated edit?

      Today, Figma’s AI Agent provides a summary when it finishes, but reviewing individual changes and correcting one unwanted edit can still be difficult.

      The shift

      What if designers could keep what works and undo only what doesn’t?

      1. Align card stylesShared
        AI
        01Review the full runSee every step, affected layer, and edit in one place.
      2. 02Decide what staysAccept or reject individual edits without losing the rest.
      3. 03Control shared changesHold high-impact edits until they’re reviewed and published.
      After the agent acts / 01 of 02The flow, end to end

      The agent is done. Now it’s your turn.

      Five checkpoints show how designers can review, correct, and publish the agent’s work.

        After the agent acts / 02 of 02Up close, piece by piece

        How can designers review and correct the final result?

        Four comparisons show how my redesign makes reviewing, correcting, and publishing edits more manageable.

        Reviewing the completed run

        Figma now
        Align card stylesShared
        AI

        Align the styles of Rome, Kyoto and Lisbon

        Done! I updated 3 cards: rounded the corners, recoloured the buttons, made the headings bolder and evened out the spacing.

        Proposed
        Align card stylesShared
        AI

        Align the styles of Rome, Kyoto and Lisbon

        Done. Here’s what changed, step by step.

        Reply to the agent

        The final summary offers limited detail about which layers and properties changed.

        A review summary groups edits by step, with counts and links to individual changes.

        Keeping only the changes you want

        Figma now
        Align card stylesShared
        AI

        Align the styles of Rome, Kyoto and Lisbon

        Done! I updated 3 cards: rounded the corners, recoloured the buttons, made the headings bolder and evened out the spacing.

        Proposed

        Individual edits aren’t presented as separate proposals that designers can accept or reject.

        Accept or reject entire steps or individual edits, keeping unrelated changes intact.

        Comparing edits visually

        Figma now
        Proposed

        The canvas shows the result, while existing version comparisons don’t directly organize changes by agent run.

        Compare the canvas before and after the run, inspect property values, and revert individual changes.

        Controlling changes beyond the file

        Figma now
        Align card stylesShared
        AI

        Align the styles of Rome, Kyoto and Lisbon

        Done! I updated 3 cards and changed the Button main component to coral, so every button follows.

        Proposed

        The impact of edits to shared components may not be clear within the agent’s response.

        Hold shared changes for separate review, show their reach, and require deliberate publishing.

        Could designers actually stay in control of their AI edits?

        After designing the three-stage workflow, I wanted to test whether it worked beyond the happy path. Could designers catch unwanted changes, follow the agent’s progress, and correct mistakes without losing good work?

        Concept validation / 01 of 03Study setup

        How did I put the concept to the test?

        I designed five realistic editing scenarios to evaluate what designers could notice, understand, and do without guidance.

        Study setup

        Moderated usability testing

        Interactive Figma concept

        Inspect Dev Mode

        /* Moderated usability testing */
        participants: 8 designers;
        session-duration: 35 minutes;
        scenarios: 5;
        format: "Five scenario-based tasks";
        prototype: "Interactive Figma concept";
        focus: comprehension, error-detection,
               recovery, efficiency;
        Concept validation / 02 of 03Test scenarios

        Where could the redesigned workflow still fall short?

        I designed each scenario around a moment where the agent might misunderstand a request, make an unwanted change, or require designer intervention.

        Layers 5 scenarios

        Scenario 01

        Before the agent acts

        Catch an unwanted change

        Can designers spot and correct the mistake before execution?

        Scenario
        The agent plans to change the button color, even though the designer only requested layout improvements.
        Tests
        Intent previewAssumptionsScope boundaries
        Concept validation / 03 of 03Results

        What happened when designers tried the workflow?

        8 designers×5 scenarios=40 tasks35 minutes each

        Overall task success

        82.5%

        of scenario goals met

        33 / 40 tasks

        Median task duration

        2m 15s

        Average task ease (out of 7)

        5.8 / 7

        By scenario

        Layers 5 scenarios

        1. Catch an unwanted change01 · Before the agent acts · Unwanted edits caught

          7/8
        2. Stop and redirect the agent02 · While the agent acts · Stop behavior understood

          6/8
        3. Fix one edit, keep the rest03 · After the agent acts · Selective recovery completed

          7/8
        4. Recognize wider impact04 · Risk flags · Shared impact recognized

          5/8
        5. Complete a simple edit05 · Efficiency · Simple-edit completion

          8/8

        Qualitative findings

        1. ✓ Worked

          The plan helped surface mistakes before execution.

          Keep affected layers and assumptions visible within the plan.

        2. ! Friction

          Stopping the agent wasn’t immediately predictable.

          Explain what will be kept and rolled back beside the Stop control.

        3. ! Friction

          Keeping and publishing weren’t clearly distinguished.

          Separate local approval from publishing and show affected files and instances.

        Interactive prototype · about 2 minutes

        Send the prompt. Then steer.

        Click Send to start. The next click is always highlighted.
        Interactive prototype Open in a new tab

        How much control is enough when working with an AI Agent?

        More control also meant more decisions for designers.

        1. 01 · What I learned

          Control should match the stakes.

          A text edit shouldn’t get the same review as a shared component change.

        2. 02 · What I’d reconsider

          More visibility, more noise.

          Surface what needs attention. Keep the rest on demand.

        3. 03 · What’s next

          Recovery is the harder problem.

          Edits depend on each other, so selective undo isn’t simple yet.

        My biggest takeaway

        Designing for AI isn’t about making every action visible. It’s about helping people understand what matters, decide when to step in, and move forward without second-guessing the tool.