Figma-First or Figma-Last?
The subject is film twelve's tutor answer card. Four states: the agent found a clear answer in the textbook, found half of one, found nothing, or needs a teacher's eye before showing anything. One card, four variants, four accent colors, four action buttons.
Figma-First or Figma-Last?
The subject is film twelve's tutor answer card. Four states: the agent found a clear answer in the textbook, found half of one, found nothing, or needs a teacher's eye before showing anything. One card, four variants, four accent colors, four action buttons.
Series: Figma for Educational AI Topic: FIGMA · WORKFLOW
Chapters
0:00 Introduction 0:31 Introduction 2:05 Your Turn
YOUR TURN
Your turn. Paste this into Claude: I have a UI card with four states. Here is the Confident-state design context from Figma, paste it. Here is a FigJam state table with all four rows, paste it. Build a single self-contained HTML file showing all four states in a two-by-two grid. Then score your own output: for each state, list which accent colors,
@NikBearBrown
Part of the Figma for Educational AI series.
Sources and citations: see the reel's SOURCES.md in the open textbook.
▶ The full series playlist — Brutalist https://www.youtube.com/playlist?list=PLG9H-C6rp5RU
What this video covers
- 0:00 — Introduction
- 0:31 — Introduction
- 2:05 — Your Turn
Transcript
A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.
Introduction
[0:00] Mingalaba, this is Liam in for Bear. Design the frames first, then spec them, or write the spec first, then build? Better question, which way leaves the headless agent something it can actually use? Three terms: a design context, what Figma's MCP server returns when you read a frame TSX code, spacing every color value straight from the file. A FigJam spec, a flow diagram and a state table built before any frame exists to lock down states and values. And a headless build, a Claude session with no tools, only text. What can it make from what you hand it? The subject
Introduction
[0:31] Is Film 12's tutor answer card. Four states: the agent found a clear answer in the textbook, found half of one, found nothing, or needs a teacher's eye before showing anything. One card, four variants, four accent colors, four action buttons. Path A, polished frames, no spec. One call to the MCP server and all four frames exist in the design file. Clean, done. To hand that to a headless builder, you give it the design context for one state, the code Figma returns for the confident frame, and trust the builder to infer the other three. Path B, FigJam spec first. A state flow, five shapes, five connectors from question to result. Then a table, four rows, five columns, one cell for each value, accent color, status text, tint, action label. Then frames derived from the table. Three artifacts, the frames look the same,
But the table came before them. The FigJam MCP tool reads the table back. 25 of 25 cells whole. Every accent color, every action label, a complete machine-readable state spec. That confirms Film 21's finding. For a board, an agent will read draw a table, not a sticky. A sticky comes back as its first line only. Both paths were run headless, a fresh Claude session, no tools, only text. Both scored 16 of 16 accent colors, tints, status labels, action buttons, all correct. Same score because both prompts spelled out every spec value explicitly. The difference is not in the score, it is where the spec lives. Path A spec was prose in a chat window. It evaporates when the chat ends. Path B spec is a fig jam table, a Figma artifact persistent versionable readable by any tool that can call get fig jam.
Your Turn
[2:05] Your turn, paste this into Claude. I have a UI card with four states. Here is the confidence state design context from Figma, paste it. Here's a fig jam state table with all four rows, paste it. Build a single self-contained HTML file showing all four states in a 2 by 2 grid. Then score your own output. For each state, list which accent colors, status labels, and action button is match the spec and which do not. Then try it both ways. Give it the design context alone and then add the spec table. Check whether the second run gets all four accent colors right. Figma first or Figma last at Nick Bear Brown.
