The Agent Draws, You Merge
Figma for Education has no branching. So how do you let an agent draw on your file safely? Duplicate the file, let the agent build in the copy, and merge by hand. Overnight the agent built a quiz results screen from the library: 5 of 5 components were instances, 13 of 17 colors bound to variables, and 8 fixes needed…
The Agent Draws, You Merge
Figma for Education has no branching. So how do you let an agent draw on your file safely? Duplicate the file, let the agent build in the copy, and merge by hand. Overnight the agent built a quiz results screen from the library: 5 of 5 components were instances, 13 of 17 colors bound to variables, and 8 fixes needed before a merge, 4 of them human decisions. Bear has since reviewed it from an educational perspective. The merge is still his.
Liam, in for Bear, narrates.
Series: Figma for Educational AI
Chapters
0:00 Cold open 0:14 The overview 0:25 No branching 0:38 The pattern 0:52 The system 1:04 The ask and the result 1:23 Instances 1:38 Colours 1:52 The rule 2:07 Cleanup 2:23 The checklist 2:41 Pending 2:52 Bear's review 3:17 Verdict 3:31 Your turn
YOUR TURN
Paste this into Claude:
"Audit this Figma frame before I merge it: count component instances versus raw layers, list every colour not bound to a variable, and check each component's description against how it's used."
Then check two things yourself:
- The script counts. You decide.
- Every loose value: bind it, add a token, or cut it.
Sources
- https://help.figma.com/hc/en-us/articles/360063144053-Guide-to-branching
- https://help.figma.com/hc/en-us/articles/20774752502935
Every factual claim in this video was checked against these sources and the experiment record before rendering. An agent ran the experiment on Bear's Figma for Education account; Bear reviewed the film from an educational perspective. An independent series, not affiliated with or endorsed by Figma.
@NikBearBrown
▶ The full series playlist — Brutalist https://www.youtube.com/playlist?list=PLG9H-C6rp5RU
What this video covers
- 0:00 — Cold open
- 0:14 — The overview
- 0:25 — No branching
- 0:38 — The pattern
- 0:52 — The system
- 1:04 — The ask and the result
- 1:23 — Instances
- 1:38 — Colours
- 1:52 — The rule
- 2:07 — Cleanup
- 2:23 — The checklist
- 2:41 — Pending
- 2:52 — Bear's review
- 3:17 — Verdict
- 3:31 — Your turn
Transcript
A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.
Cold open
[0:00] Ciao, this is Liam in Forbear. Last night at Bear's request, an agent ran this experiment on his Figma for education account. Bear has since reviewed it from an educational perspective. The question, with no branching, how do you let an agent draw safely? To let an agent draw in Figma,
The overview
[0:15] You need a copy and a checklist. Branching would be nicer, but an education account doesn't have it. So, the copy keeps you safe, and the checklist is the real work.
No branching
[0:25] Figma's branching aside copy you merge back comes with the organization and enterprise plans. Education doesn't get it, and the MCP server acts with your own sign-in, so an agent can edit any file you can, including the real one.
The pattern
[0:38] So, two files, the source which the agent never writes to, and a draft, the only file it may touch. The MCP server can't copy a file, so the agent built the same system in both with one identical script. A person carries the work back. The system is tiny on
The system
[0:53] Purpose. Five colors, three spacing and radius numbers, two text styles, a card, and a button. That's Figma's own render. Remember the button's description, primary action, one per screen.
The ask and the result
[1:04] Then the task, word for word, a quiz result screen from the file's own parts, a score, a progress bar, three cards to review, and two actions. Two, the button says one. And here's what came back in Figma's own render. One call, it looks finished, but looking finished is the trap. Before a merge, the question isn't how it looks, it's what it's made of.
Instances
[1:24] So, the agent audited its own screen. Read that as a friendly test. 12 top-level layers. Five are component instances, three cards and two buttons, and none are detached. Seven are raw, four texts, the progress bar's two pieces, and the frame around the buttons.
Colours
[1:38] Colors, 17 paints, and 13 are bound to variables. Four are hard-coded, the score, the progress track, a white fill left behind the buttons, and the second button's outline. Three are the system's own colors typed as raw hex. The track color isn't in the system at all.
The rule
[1:53] And the rule, the button says one per screen, the task asked for two, and the agent didn't push back. It placed a second button and restyled it by hand. It sits two pixels taller than its neighbor, and in Figma's generated code, it's no longer the button, it's a plain div.
Cleanup
[2:07] Add it up, eight fixes. Four are mechanical, bind two colors, delete the stray white fill, give the progress bar auto layout. Four are decisions, a style for the score, a token for the track, a spacing scale, and what the second action should be. An agent could do the first four, a person decides the rest.
The checklist
[2:23] That audit is the merge checklist. Before you paste, no edits to the source since the draft began, every card and button an instance, no restyled instances, descriptions obeyed, no raw hex, every text styled, auto layout everywhere, and one this run couldn't test, after pasting, do the instances point at the source's components or the draft's copies?
Pending
[2:41] The merge itself is pending bare. Nothing has been pasted into the source, and nothing has been timed. That matters, the copy kept the source safe for free. Checking and merging is where the time goes.
Bear's review
[2:52] Bare reviewed this the next day from an educational perspective, and he agrees with its point. His note isn't in a chat thread, it's a Figma annotation on the agent's draft on the quiz results frame, not on the source that stays untouched until the merge. And the next agent that reads the frame gets the note, too. The server hands it over with the code, and tells the agent not to ignore it. If someone else had to look, a small script would send them a link, not a copy. Nobody else did, so nothing was sent.
Verdict
[3:17] Let's recap with Claude. The verdict is middle. The copy kept the source safe, and the screen was mostly on system. Five of five instances, 13 of 17 colors bound, but it needed eight fixes, four of them judgment calls, and the merge is untested. Your turn. With the Figma
Your turn
[3:33] Server connected, point Claude code a frame an agent made, and paste this. Audit this Figma frame before I merge it. Count component instances versus raw layers, list every color not bound to a variable, and check each component's description against how it's used. That turns half the checklist into a script. The other half is yours, decide what each loose value should become. The agent draws, you merge at Nick Bare Brown.
