Figma-Context-MCP server in LangChain design data for programmatic agents.
No config file here — LangChain connects to MCP servers in code via langchain-mcp-adapters. A few lines of Python give your agent Figma file access as ordinary tools.
Editors consume Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars) interactively; LangChain lets you consume it programmatically. That opens different use cases — a pipeline that audits every published design file for token drift, an agent that regenerates UI code when a design changes, a batch job that extracts copy from frames for localization. The server's compact translation of Figma's API output is what makes those payloads tractable for the model in the loop.
Unlike every desktop client, LangChain has no MCP config file. Configuration is code: the langchain-mcp-adapters package spawns or connects to servers and converts their MCP tools into LangChain tool objects your agent can bind like any other.
Install the adapter
You need three pieces: the adapter package (pip install langchain-mcp-adapters), Node.js on the machine since the Figma server is an npm package spawned via npx, and a Figma personal access token from Figma Settings > Security > Personal access tokens. The server package itself, figma-developer-mcp, needs no preinstall — npx resolves it at spawn time.
The code
MultiServerMCPClient takes a dict of server definitions — the same shape as a desktop client's JSON config, expressed in Python. With stdio transport, the client manages the subprocess lifecycle for you:
from langchain_mcp_adapters.client import MultiServerMCPClient
from langgraph.prebuilt import create_react_agent
client = MultiServerMCPClient({
"figma": {
"transport": "stdio",
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {"FIGMA_API_KEY": "YOUR_FIGMA_TOKEN"},
}
})
tools = await client.get_tools()
agent = create_react_agent("anthropic:claude-sonnet-4-5", tools)Using the tools
After get_tools(), the server's capabilities — fetching translated file data and downloading image assets — are plain LangChain tools, so anything that accepts tools accepts them: a LangGraph ReAct agent as above, a custom graph node, or direct .ainvoke() calls if you want deterministic fetches without an agent deciding.
Pass Figma selection links (right-click a frame > Copy link to selection) in your prompts or tool arguments rather than bare file links. The node ID scopes the fetch to one frame's subtree, which matters double in pipelines where you're paying per token across many runs.
Troubleshooting in LangChain
Failures here are Python failures, which at least means real stack traces. get_tools() hanging or raising on connect usually means the subprocess never started: confirm npx runs in the same environment as your script — virtualenvs and containers frequently lack Node even when your interactive shell has it. In Docker, install Node in the image; the server can't spawn otherwise.
An async-context error means you've called the client outside an event loop — the adapter API is async-first, so wrap entry points in asyncio.run(). And if tools load but every Figma call returns an authorization error, the FIGMA_API_KEY env var didn't reach the subprocess or the token can't access the target file; print the env dict you're passing and test the token with a direct curl to Figma's REST API.
Server details and siblings
The server's live listing — with its probed tool list — is at https://loomal.ai/marketplace/figma-context-mcp. It's the flagship of Loomal's design tools category; if you're building agents that act on designs rather than just read them, the same MultiServerMCPClient dict takes additional servers as extra keys, so composing it with browser or filesystem servers is one entry away.
FAQ
How do I connect Figma-Context-MCP to LangChain?
Install langchain-mcp-adapters, instantiate MultiServerMCPClient with a stdio entry that runs npx -y figma-developer-mcp --stdio and passes FIGMA_API_KEY in env, then await client.get_tools() and bind the result to your agent. There's no config file — the dict in code is the configuration.
Does this work from LangChain.js too?
Yes — the JavaScript ecosystem has its own MCP adapter that loads MCP servers as LangChain tools with an equivalent server-definition object. The server command and env are identical; only the adapter import changes.
Why does get_tools() fail to connect?
The subprocess almost certainly didn't start. Check that node and npx exist in the exact environment running your script — containers and CI runners are the usual gap — and that you're calling the async API inside an event loop. The adapter surfaces the subprocess stderr in the raised exception, which names the real cause.
Can I run this in a long-lived service?
Yes, and stdio transport is fine for it: the client keeps the subprocess alive across calls. For multi-replica deployments, consider running the server once in HTTP mode (it supports a non-stdio mode) and pointing each replica at it with a streamable_http transport entry instead of spawning one subprocess per replica.
Browse more MCP servers for LangChain.
Probed tool lists for every server before you write a line of adapter code.