Claude Code + Figma: Connect It, Then Draw the Project

A real Claude Code session, start to finish: connect Figma through its plugin, check which account and plan you're on, have Claude Code read a project and write its agentic diagram as Mermaid, draw that as a FigJam board, then compare the board against the code. The session hit real friction along the way: a revoked login, a second Figma team with only a View seat, a board that kept every box but flattened every label, and a duplicate prompt.

The first ask was the smallest possible one: use Figma's whoami tool, tell me which account I'm on. The answer was a 401 — Claude Code's own login had been revoked, not Figma's. Nothing was connected yet, not even Claude. The better question this video is built around isn't "can Claude Code read my Figma" — it's whether it can draw your project: write the diagram as text in the repo, put it on a FigJam board, then check the board against the code. Connect first. Then draw. Then check.

Four terms: MCP, the standard plug that lets an agent call outside tools; the Figma plugin, Figma's package for Claude Code — its MCP server settings plus a set of skills; FigJam, Figma's whiteboard; Mermaid, a diagram written as plain text.

Fixing the actual break came first: /login, then /plugin to confirm Figma's plugin was current. A second ask still failed — Claude Code was logged in, but Figma wasn't — so Claude started Figma's own sign-in and printed a one-time link. That click had to happen by hand; Claude can't make it. A third try returned whoami: two plans, a Student-tier Full-seat Admin team, and a second Starter-tier View-seat team — real evidence of which account was connected.

With Figma connected, the actual project came first, in text: a prompt naming the pipeline steps, the human approval gates, and the instruction not to touch Figma yet produced a 106-line DIAGRAM.md with an executive summary above the Mermaid. Only then did the same Mermaid get drawn into a new FigJam board, with the link written back into DIAGRAM.md.

The real test was comparing the board against the code, in both directions, without fixing anything. Four things on the board weren't in the code — including one gate that came from house rules, not the collector itself, and a reference document mistakenly drawn as a runtime input. Fourteen things in the code weren't on the board — two-phase logic, a from-raw replay mode, an allowed-hosts list, per-company ignore words, exit codes, and more. The board kept every section, gate, and connector; it dropped the detail. A duplicate prompt sent by accident got caught, too — Claude recognized the repeat and asked if a follow-up was intended instead of re-running or inventing a second answer.

Your Turn: Paste into Claude Code, in a repo of your own: "Read this repo and write its structure as Mermaid in a new file, DIAGRAM.md. Then use the Figma MCP server to draw it as a FigJam board, and add the link to the file. Then compare the board with the code: list what's on the board but not in the code, and what's in the code but not on the board. Don't fix anything." Keep DIAGRAM.md in the repo as the source of truth — the board is a view of it.

Sources: Figma, "Claude Code and Figma: Set up the MCP server"; Figma MCP server tools and prompts; rate limits and access (help.figma.com, developers.figma.com). Every factual claim checked against these sources and the real session transcript before rendering. An independent series, not affiliated with or endorsed by Figma or Anthropic.

0:00 Cold open: a revoked login 0:22 The idea 0:37 Four terms 0:56 /login and /plugin 1:26 Signing in to Figma 1:43 whoami: which team, which seat 2:03 Reading the project, writing the Mermaid 2:52 Drawing the FigJam board 3:20 Checking the board against the code 4:33 A duplicate prompt 4:46 What connects to what 5:04 What survived the trip 5:24 The board itself 5:44 Who did what 6:44 Verdict 7:10 Your turn

Series: Figma for Educational AI. @NikBearBrown

Claude Code Figma, Figma MCP server whoami, Claude Code FigJam board, Mermaid diagram Claude Code, revoked OAuth token Claude, Figma plugin Claude Code, compare board against code, agentic system diagram, Claude Code plugin setup, Figma team seat plan, DIAGRAM.md Mermaid, Claude Code real session, Figma education account, FigJam vs code accuracy, Claude Code troubleshooting Figma

What this video covers

• 0:00 — Cold open: a revoked login 0:22 The idea 0:37 Four terms 0:56 /login and /plugin 1:26 Signing in to Figma 1:43 whoami: which team, which seat 2:03 Reading the project, writing the Mermaid 2:52 Drawing the FigJam board 3:20 Checking the board against the code 4:33 A duplicate prompt 4:46 What connects to what 5:04 What survived the trip 5:24 The board itself 5:44 Who did what 6:44 Verdict 7:10 Your turn

Transcript

A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.

Cold open: a revoked login 0:22 The idea 0:37 Four terms 0:56 /login and /plugin 1:26 Signing in to Figma 1:43 whoami: which team, which seat 2:03 Reading the project, writing the Mermaid 2:52 Drawing the FigJam board 3:20 Checking the board against the code 4:33 A duplicate prompt 4:46 What connects to what 5:04 What survived the trip 5:24 The board itself 5:44 Who did what 6:44 Verdict 7:10 Your turn

[0:00] This is Liam in for Bear. I want Claude code talking to Figma. So, the first thing I type is the smallest question I have. Use the Figma MCP servers who am I tool and tell me which account I'm on. The hook error is a local script and it's non-blocking. The next line is the real answer. A 401 OAuth access token has been revoked. That isn't Figma. That's Claude code's own login. Nothing is connected yet, not even Claude. Here's the idea of this film. People start by asking whether Claude code can read their Figma. The better question is whether it can draw your project, write the diagram as text in the repo, put it on a fig jam board, and then check the board against the code. Connect first, then draw, then check. Four terms: MCP, a standard plug that lets an AI agent call outside tools. The Figma plugin, Figma's package for Claude code, its MCP server settings plus a set of skills. Fig jam, Figma's whiteboard for

Diagrams and flows. Mermaid, a diagram written as plain text, boxes and arrows as lines in a file. Fix the thing that's actually broken first. {slash} login. Login successful. One note on accounts, this terminal runs on Bear's Northeastern Claude Enterprise account. The session header says so. Most students only have a university account, and that's the one you'd sign in with here. Then {slash} plugin to make sure the Figma plugin is current. Figma is already at the latest version. I'd updated it and reloaded plugins just before this. The plugin is what puts Figma's MCP server and its skills inside Claude code. Without it, there's nothing to call. Now I ask again, Claude code is logged in, but Figma isn't. Claude says the Figma MCP server still requires authentication and it starts the sign-in itself. It prints a link. I've blanked it here because it's one-time. I open it, sign in to Figma, and allow access. That click is mine. Claude can't make it for me. Third try, called Figma. Two plans

Come back. A team on the student tier, full seat admin, and a second team on the starter tier, view seat. The typo in that team name is Figma's record, not mine. That's my evidence the connection is real and which account it's using. On an education plan, Figma allows 200 MCP calls a day, 10 a minute, and who am I doesn't count against them. Now, the project, Lectern, is a small job board collector in Bear's course repo synced across three classes. Before anything touches Figma, I want its diagram as text in the repo. So, the prompt names what goes in, the human Claude code, the collector and its steps, the job boards, the three classes, and every point where a person approves something. And the last line, don't draw anything in Figma yet. Claude reads seven files and lists one directory, then one write diagram.md, 106 lines, 3 minutes and 45 seconds. The executive summary sits above the mermaid where I asked for it. Here's what it says it wrote,

Seven pipeline steps, fetch through write outputs, and five human gates, A through E, config edit, output review, sync approval, push approval, and the frictional md log entry in the same commit. That's a claim about the code. I'm holding it, and I check it at the end. Now, draw it, same mermaid, into a new FigJam file with the name I choose, and the link written back into diagram.md. Claude loads Figma's FigJam skill first, the one the plugin ships, before it calls anything. Look at one line, the mermaid adapted for the tool's constraints. Left to right, no emojis, no line breaks inside a label. That's where the detail goes, called Figma. The file exists, and diagram.md gets four new lines, a FigJam heading and the link. The text stays the source. The board points back to it. Now, the step that makes this worth doing. Claude's summary is a claim, the board is a claim, the code is what runs. So, I ask for the difference both directions, and I

Tell it not to fix anything. This is still Claude checking Claude's work, so I treat the answer as a list of places to look, not a verdict. Four things on the board aren't in the code. Gate B, review outputs before sync, implicit in neither file states it. Gates D and E come from Claude.md, the house rules, not from the collector. And ats.md is drawn as a runtime input, but collect.py never opens it. It's a reference document for people. So the mermaid was already wrong there and the board copied it faithfully. The other direction is longer in collect.py and not on the board. The loop really runs in two phases, not one straight line. From raw mode that refilters saved responses with no network calls. What happens when a board fails? The allowed hosts list per company ignore words, the flex annotation. Smart recruiters call pattern about 249 calls, exit code three and two flags. And from sync ML the brandings files land in a different folder. Run outputs are

Never synced. Sync never commits. There's a recovery procedure and a note that the master started behind, 14 gaps in all. The board is a picture of the shape. The rules live in the code. Then I sent the same prompt again by accident. Claude didn't rerun the comparison and it didn't invent a second answer. It said this is the same question it just answered and asked if I meant a follow up. 5 seconds, that's friction I want. Here's what got built drawn. It starts in the repo diagram. D, the mermaid file Claude code wrote, that's the source. Then the path to the board, Claude code in the terminal. The Figma plugin, the MCP server settings in the skills. Figma's remote server on the far side of the sign in. And the fig jam board it drew from the mermaid. The board is a copy. And what survived the trip? In diagram MD greenhouse lists 11 boards and one API call each. On the board greenhouse 11 boards step one names

Its three allowed hosts. The board says fetch board. Gate D says a word is required every time. The board says approve it push. Every section gate and connector made it across. The detail didn't. This is the board itself, Figma's own export of the whole fig jam file, not a screen recording. Look at how little each box says. Greenhouse 11 boards, one fetch board, the seven steps in a row, then the outputs, the three classes and the gates as diamonds. Follow the pan to gate D, its label is cut off at right friction. That's the finished board and it's why the mermaid file is the one I keep. Who did what? Step one was mine, log in, check the plug-in, sign in to Figma, tool orchestration. Step two, Claude, who am I? The handoff. It names the student to your team. Step three, mine mermaid first, no Figma yet, problem formulation. Step four, Claude read seven files, write diagram MD. That's the dangerous middle. It looked complete. It drew

ATS.md as a runtime input and the board inherited it. Step five, Claude draws the board. The handoff is the link in diagram MD. Step six, mine ask what's different. Step seven, Claude four on the board 14 in the code, interpretive judgment and executive integration, zero so far. I haven't decided which of the 14 matter. So, what was mine? Claude can read seven files in one pass. It can write the mermaid and draw the board, and it should flag a duplicate question, which it did. I must log in and sign in to Figma. Claude can print the link, not click it. I must choose the order text first. I must ask what the board left out because the board looks finished, and I should decide which gaps matter. Next time I write the list of gates myself. Two of the five came from house rules, not from the code. Let's recap with Claude. Connect first. Log Claude code in. Keep the Figma plug-in current. Sign in to Figma and prove

It with who am I. Then write the diagram as mermaid in the repo, and only then draw it in FigJam. The board kept every section and gate and dropped the detail. Asked to compare, Claude found four things on the board that aren't in the code and 14 in the code that aren't on the board. What would prove this wrong? A board drawn from the same mermaid that keeps every label whole. Your turn. Pick a repo you know, open Claude code with the Figma plug-in connected and paste this. Read this repo and write its structure as mermaid in a new file server to draw it as a FigJam board and add the link to the file. Then compare the board with the code. List what's on the board but not in the code and what's in the code but not on the board. Don't fix anything. Then read the list yourself against the code. Claude code plus Figma, connect it, then draw the project. Liam Infrabear at Nick Bear Brown.