Figma + Brand Guide MCP — integration research

Status: research / stretch — not confirmed working end-to-end yet Created: 2026-05-06 Last updated: 2026-05-06 (added public-proof gap analysis + extended sources) Trigger question (Eric): "How can we integrate our MCP with Figma? How are devs/designers doing this and how might we?"

⚠️ Honest framing: the canvas-write half of Path A is publicly proven (see azukiazusa.dev below) but the combination — Figma's MCP + a hosted brand-guide MCP working together in one Claude Code session — has not been demonstrated publicly that we can find. We'd be the ones producing the canonical tutorial. Treat this as a stretch POC: build it, hand it to a developer to test, expect surprises.

TL;DR

There are three viable integration paths. The cheapest is already shipping; the most user-friendly is a 1-2 week build; the most strategic is gated on Figma Make's roadmap.

Path What it is Designer experience Build cost Recommended
A. Dual MCP in Claude Code Designer configures BOTH Figma's Dev Mode MCP and our brand-guide MCP in their Claude Code "Hey Claude, fill this frame with our primary color" → Claude calls both, writes to canvas ~1-2h docs + 1 demo video ✅ Ship now
B. Native Figma plugin We build a sidebar plugin that hits our MCP over HTTPS Designer never leaves Figma — clicks "apply primary color" on selected layers ~1-2 weeks ✅ Strategic — Q3
C. Figma Make integration Brand-guide MCP attached to Figma Make's Anthropic-powered design loop Designer prompts Make ("a poster on-brand for the spring launch") → Make grounds in our brand content Gated on Make's MCP support ⏸ Wait for Figma

1. Landscape — what's actually shipping in May 2026

Figma's first-party Dev Mode MCP (mature)

Released 2025, expanded throughout 2026. Exposes Figma's data to AI agents (Claude Code, Cursor, Windsurf, VS Code Copilot, ChatGPT). Read side: get_design_context, get_variable_defs, get_metadata, get_screenshot. Write side (added late March 2026): use_figma runs JavaScript directly via the Figma Plugin API — agents can create frames, components, variables, auto-layout. (Figma blog, Help Center, Developer docs, Make + MCP)

The big shift: it's no longer just "AI reads Figma to generate code." Now it's "AI reads Figma AND writes back to Figma," which makes brand-guide grounding much more interesting.

Figma MCP Catalog — NOT a third-party MCP marketplace

figma.com/mcp-catalog/ looks like it should be where we list our brand-guide MCP. It's not. It's a list of MCP clients (Claude Code, Cursor, etc.) certified to consume Figma's MCP. There's a "Submit your app for review" path but it's for client tools, not server tools. We can't list our brand-guide MCP there.

Figma + Anthropic plugin for Claude

claude.com/plugins/figma is a Claude Code plugin (skill, basically) that connects Claude Code to Figma files. Installed in Claude Code, not in Figma. Same pattern as our gm-brand-guide skill — markdown trigger + MCP config. Validates the dual-MCP-in-Claude-Code pattern as Path A.

Third-party Figma MCP servers

These are all Figma-as-source MCPs (read Figma data). Not brand-guide-as-source.

Anthropic UI Kit for MCP apps in Figma

figma.com/community/file/1597641111449594397/mcp-apps-for-claude — component library for designing MCP apps. Different angle entirely (we'd use it if we built a Claude app surface), worth filing for when we design the brand-bot UI.

Claude Code → Figma direction

Designers in Claude Code can now generate Figma content (frames, components, variables) from prompts that ground in their codebase. This is the bridge: same agent loop, brand-guide MCP attached on the input side, Figma MCP attached on the output side, agent calls both.

2. Integration matrix (detail)

Path A — Dual-MCP in Claude Code (already works)

Setup: Designer configures their Claude Code with two MCPs: - Figma Dev Mode MCP (Figma desktop app must be running) - Our brand-guide MCP via claude mcp add (the install snippet we shipped today at /portal/[tenantId]/integrations)

Workflow examples: - "Apply our primary brand color to the selected frame's fill" → Claude calls get_colors (us) → use_figma (Figma) → done - "Write a tagline in our voice that fits this poster" → Claude calls get_voice + get_messaging (us) → use_figma to insert the text layer with proper typography from get_typography - "Audit this slide for brand compliance" → Claude calls get_screenshot (Figma) + get_colors/check_text (us) → returns a compliance report - "Build a 6-slide deck cover set on-brand" → Claude calls our MCP for colors+tagline+typography → uses Figma use_figma to scaffold the frames

Cost to us: Documentation only. Add a "Figma + Claude Code combo" section to docs/MCP-INSTALL.md and mention it on /portal/[tenantId]/integrations. Plus one short Loom showing the workflow end-to-end.

Where it falls short: The designer has to be Claude-Code-comfortable. Most designers aren't. This is the technical-designer / design-engineer audience. Won't reach the "I just want to make a deck cover" designer.

Path B — Native Figma plugin (1-2 weeks)

What it looks like: A panel inside Figma. Designer opens it from the plugin menu. Sees their tenant's brand foundation, palette, typography. Clicks "Apply primary" on a selected layer's fill — done. No prompt- writing, no AI, no terminal.

Architecture:

Figma Plugin (sidebar UI)
  ↓ HTTPS, bearer token in plugin storage
brand-guide-mcp (us) — new /api/figma/[tenantId] route OR direct MCP
  ↓ JSON-RPC tools/call
Brand guide content (existing)

The plugin doesn't need to speak JSON-RPC directly. We could expose a small REST shim under /api/figma/[tenantId] that returns already-shaped JSON for the plugin to render, OR we can have the plugin call /api/mcp/[tenantId] directly with the per-tenant key. Either works; REST shim is friendlier for the plugin developer (us) and lets us version the plugin contract independently.

Per-tenant identity in Figma plugin: - Plugin has a sign-in flow: "Sign in to your brand bot" → opens a popup to /portal/[tenantId]/figma-link (new route) → magic-link email → user clicks → portal sets a per-user JWT → plugin polls and gets the JWT back → stored in Figma clientStorage. - This reuses the magic-link primitive we already shipped for the portal (lib/auth/end-user.ts) and the per-tenant API key. - Surface tag for usage attribution: new figma_plugin entry in EXTERNAL_SURFACES.

Plugin distribution: - Submit once to Figma Community as "Brand Bot" plugin. - Multi-tenant: plugin is one piece of code, but signs the user into their tenant on first launch. The tenant slug becomes part of the per-user JWT. - manifest.json#networkAccess needs to allowlist app.heybrandbot.com (single domain — easy).

Build estimate: 1-2 weeks. Bulk of the work is the sign-in flow + the panel UI. Tools API is straightforward.

Path C — Figma Make integration (gated on Figma)

What it is: Figma Make (their Lovable/v0 competitor, Anthropic- powered) generates designs from prompts. If we can attach our brand-guide MCP to Make's agent loop, designer prompts get grounded in their brand automatically — "a hero section about X" produces something in their colors, fonts, and voice.

Status: Make + MCP has been announced (Figma blog) but it's currently focused on Make exposing prototypes to coding agents (export direction), not Make consuming external MCPs at design time. There's no evidence as of May 2026 that a designer using Make can add our MCP to their Make session.

Cost: zero today; pure waiting game on Figma's roadmap. Worth re-checking in Q3 2026.

If/when it ships: the integration is small — Make would call our /api/mcp/[tenantId] over HTTP with a per-user-issued bearer. New surface tag figma_make. Same auth as Path A.

3. What other tools are doing

The brand-guide-as-MCP space is largely empty. Our angle (multi-tenant hosted, brand content including non-token stuff like voice + messaging) doesn't have a direct competitor today. The closest is internal tooling at large companies (Atlassian, Shopify) that's not productized.

4. Public-proof gap analysis (added 2026-05-06)

Before committing to Path A, I went looking for an actual real-world example of someone doing what we're proposing. Here's what I found.

What's been publicly proven

Figma's use_figma write tool actually works. The strongest concrete demo is azukiazusa — Design with AI Agents: Manipulating the Figma Canvas via MCP. The author runs /figma-generate-library and /figma-generate-design with specific requirements ("place a section at the top displaying user avatar and name", form fields, toggles). Outcomes shown in screenshots: 18 button variants, design tokens populated in the Variables panel, a working profile screen rendered. Crucially, the post documents the iteration loop — author catches an alert clipping issue and corrects via follow-up prompts. That's the part that distinguishes a real demo from a marketing screenshot.

This proves the load-bearing piece: canvas writes via use_figma work, the iteration loop is sane, and figma-generate-library / figma-generate-design are real working skills.

What hasn't been publicly proven

The combination we want — Figma MCP + a hosted brand-guide MCP — isn't in any tutorial I could find. The azukiazusa demo grounds Claude in a codebase (existing local token files), not in a remote brand-guide MCP. Every other piece I checked is announcement-tier or explainer-tier:

The gap is real. Likely cause: there are very few hosted brand-guide MCPs to demo with as the "second MCP" in such a tutorial. Stdio MCPs that pair with Figma MCP are popping up (token sync, codebase context); hosted brand-content MCPs aren't in the public ecosystem that I can see.

What this means for our decision

Two implications, neither of them blocking:

  1. Risk: more original work than a typical "pair of MCPs" combo would carry. We'll be the first to find the rough edges in this exact configuration (e.g. how Claude routes between Figma's tools and ours when both could plausibly answer a prompt).

  2. Opportunity: if we make it work and write it up, we own the canonical "brand-guide MCP + Figma MCP" content — first-mover SEO, conference-talk material, Guardify case study, recruiting story for hiring designers/developers who care about AI-native workflows.

We're not validating a paved path. We're paving it.

5. Recommendation

Now (this week, ~1-2h)

Ship Path A as a documented combo:

  1. Add a "Figma + Claude Code" section to docs/MCP-INSTALL.md — shows how to register both MCPs in one Claude Code config and includes 3 prompt examples (apply colors, write copy, audit).
  2. On /portal/[tenantId]/integrations, add a callout next to the Claude Code snippet: "Designers: pair this with Figma's Dev Mode MCP — see [link]."
  3. Record a 60-90 second Loom showing the workflow with Guardify's real brand content. This is the artifact we can hand to a designer to actually try it.

This is zero new code on our side. It's pure product positioning. It also tests the hypothesis that designers will adopt the dual-MCP pattern at all — if the answer is "no, this is too technical," that informs whether we invest in Path B.

Strategic (Q3, ~1-2 weeks)

Build Path B — Brand Bot Figma plugin:

Trigger to build: after we've measured Path A adoption for a month. If surface=claude_code traffic from Guardify designers stays > N calls/week, Path B is justified. If it's silent, the dual-MCP pattern isn't reaching the designer audience and we should rethink before building a plugin.

Defer (revisit Q3-Q4)

6. Gotchas

Issue Detail
Per-tenant identity in plugins A Figma plugin runs in the user's browser/desktop and can't durably hold a server-side secret. Per-tenant API keys can't be hardcoded. Solution: per-user magic-link flow that gets a per-user JWT, scoped to one tenant. Reuses our existing lib/auth/end-user.ts + portal magic-link.
networkAccess allowlist Figma plugin manifest must declare every domain the plugin will hit. Single domain (app.heybrandbot.com) is fine; per-tenant subdomains would force a wildcard or per-tenant plugin builds. Use the platform domain, not tenant subdomains, for the plugin's API endpoint.
Cross-tenant key safety A designer at G&M who's also at Guardify should not see Guardify's content with the G&M key. Plugin sign-in flow has to scope to one tenant per session; switching tenants = re-sign-in.
Surface attribution discipline The dual-MCP-in-Claude-Code pattern (Path A) attributes traffic to claude_code. A Figma plugin needs its own figma_plugin surface. Don't conflate them in the usage chart — that's the whole point of the surface taxonomy we shipped today.
Designers vs design engineers Most production designers (the ones making decks, posters, social tiles) won't pick up Claude Code in 2026. Path A reaches design engineers and AI-curious designers. Path B reaches everyone else. Don't assume Path A adoption proxies for designer-wide demand.
Figma plugin review cycle Figma Community plugin submission has a review queue. Plan ~1 week of review delay on top of build time when scoping Path B.

7. What to skip

Sources

Strongest concrete proof (read these first)

Figma official — capability + setup

Anthropic / Claude side

Tutorials and explainers (lower-tier evidence)

Third-party Figma MCP servers

Adjacent (FigJam + Claude)

Open questions