Figma MCP and Claude
Learn how to retrieve design data from Figma through the Model Context Protocol, adapt it with source receipts, and verify the result before release. We follow one design value across the tool boundary: who grants access, what Claude reads, what gets built, and which independent checks catch what. Liam, in for Bear,…
Figma MCP and Claude
Learn how to retrieve design data from Figma through the Model Context Protocol, adapt it with source receipts, and verify the result before release. We follow one design value across the tool boundary: who grants access, what Claude reads, what gets built, and which independent checks catch what. Liam, in for Bear, narrates.
Chapters 0:00 Opening 0:15 Terms 0:27 Connect the Boundary 1:44 Read the Design 3:02 Build with Receipts 4:21 Check Before Release 5:42 Recap 5:53 Your turn
Your turn. Paste this into Claude: Using read-only Figma access, inspect one frame and its variables. Record the intended mode and source receipt. Propose one implementation using my existing components. Flag missing values, then suggest data, visual, and behavior checks. Do not deploy. Check: values match the recorded source. Check: missing data is never guessed.
Evidence: real public Figma developer documentation captured 2026-10-08; archived local design experiments; newly executed local adapter checks. This is not a new authenticated Claude/Figma session. The adapter produces representation artifacts, not completed production apps or a validated physical print.
Sources https://developers.figma.com/docs/figma-mcp-server/ https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/ https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/
Professor Bear · Liam, in for Bear (Kokoro am_onyx narration). An independent series by Nik Bear Brown, not affiliated with or endorsed by Figma.
AI disclosure: Codex assisted authoring and local tooling; Kokoro generated Liam narration. Humans retain source ownership and release authority. Not endorsed by Figma. No live Figma or Claude session was run for this film.
What this video covers
- 0:00 — Opening
- 0:15 — Terms
- 0:27 — Connect the Boundary
- 1:44 — Read the Design
- 3:02 — Build with Receipts
- 4:21 — Check Before Release
- 5:42 — Recap
- 5:53 — Your turn
Transcript
A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.
Opening
[0:00] Agentic Figma with Professor Bear, Figma MCP and Claude. Learn how to retrieve design data, adapt it with source receipts and verify the result. Hello, this is Liam in forbear. Now we will follow the design data across the tool boundary. Useful terms host the
Terms
[0:16] Application running the agent model context protocol. A protocol exposing tools to agents node one identified design item. Receipt a record of the retrieved source. Connect the boundary.
Connect the Boundary
[0:29] Keep the roles visible. The designer works in Figma. Claude runs inside a compatible host. The host can make authorized MCP tool requests and receive design context. This is the documented boundary. We are not inventing the server's internal sequence of calls. Figma's current setup guide prefers its clawed code plug-in and also gives manual connection steps. The remote endp point is shown here. This public documentation explains setup. It is not a recording of a newly connected account. Authentication belongs to the human. In Clawed Code, the documented MCP management flow asks the user to authenticate and allow access. Do not paste secrets into a film or a shared prompt. Check what the actual account can access before promising a classroom workflow. Give the remote server a link to the intended frame or layer. The target identifies what to retrieve. Desktop selectionbased prompting is a different path. A vague request for the whole file gives the agent too much to interpret and too little declared intent. State the task before asking for implementation. Name the target, the repository and framework, existing components, the intended mode, and the allowed actions. Our example is red, adapt, and inspect. It grants no authority to modify Figma or deploy production changes. Raid the design.
Read the Design
[1:45] Begin with design context. Figma's tool reference describes the entry point for a layer or selection. Its default code oriented response is not a finished implementation for every repository. Ask for the framework you use then adapt rather than blindly paste. If the selection is too large, use metadata to inspect the outline and narrow the request. The outline tells you which nodes exist. It does not supply every styling detail. Retrieve context for the relevant node after locating it. Read variables and styles for the selected context as well. Mode matters. In our archived mode experiment, the per frame response gave resolved values without naming all collection modes. Record which frame and mode you intended. Do not assume you fetched every possible variant. Also obtain a screenshot. The two forms answer different questions. Structured data supplies named values and constraints. The image shows the visual result. Use both. A screenshot is not obsolete and sampling its pixels is not a replacement for the underlying contract. Repository rules finish the interpretation. Figma's guidance emphasizes using real assets and existing components, then checking the result. Code connect can help map design components to code, but only where those mappings have actually been configured. Do not claim mappings you never verified. Bel with receipts. Now inspect
Build with Receipts
[3:04] A real saved response. This is archived MCP data from our card experiment, not a fresh call. It contains two named color values. The response is the input to the local demonstration. No invented agent dialogue stands in for evidence. The adapter writes these exact values into CSS custom properties. It also creates mobile token and print reference JSON. These are small representation artifacts, not a completed application or physical print. Print conversion remains a separate profile specific step. The same principle applies when Claude does the adaptation. Preserve names and values, respect the codebases components, and record the source receipt. A response hash pins one snapshot. It is not a live subscription and it cannot prove that the approved design itself is correct. Run the checks and show the output. The deliberately stale value fails. Rebuilding the three representations passes. Missing required data is rejected. These are newly executed local assertions over saved data, not a claim that Claude just built and tested a production site. When a field is absent, stop guessing. Ask for the correct node or mode or fail the required field check. A plausible fallback can hide the very disagreement this workflow is supposed to expose. Missing evidence should remain visible until the owner resolves it. Check
Check Before Release
[4:22] Before release. Then compare the rendered interface with the source. Our one card comparison improved from 4 to 26 exact property matches with saved context. Yet the button width remained wrong. Better input helped. It did not remove the need for browser inspection. Token comparisons test data fidelity. Screenshot comparisons test visual layout. Interaction and accessibility tests ask whether people can use the result. An exact color copied from a poor design is still a poor color choice. None of these tests substitutes for all the others. Treat an approved source change as a new build event. Retrieve a new snapshot. Regenerate through the adapters and rerun the checks. MCP supplies tool access, not automatic continuous synchronization across all consumers. Keep old receipts so a reviewer can explain what changed. Keep access ownership and release separate. Current Figma documentation includes write tools, so specify readonly scope when that is the task. Verify the actual accounts limits and permissions. This film used archived data and free local execution. It consumed no live MCP requests. The complete pattern is simple. Identify the source, read the design, adapt with receipts, and verify before release. Start with one token and one consumer. The reason to connect Claude and Figma is controlled use of design data, not permission to accept whatever the agent produces.
Recap
[5:43] Let's recap with Claude. Connect only with authorized access. Read context values and visuals. Adapt with a pinned source receipt. Check independently before release using readonly Figma
Your turn
[5:54] Access. Inspect one frame and its variables. Record the intended mode and source receipt. Propose one implementation using my existing components. Flag missing values. then suggest data visual and behavior checks do not deploy.
