How to Install Figma MCP in OpenAI Agents SDK
Official Figma integration — access design files, components, and tokens directly in your AI coding workflow
What Figma MCP does
The official Figma MCP server gives AI coding agents direct access to Figma design files, eliminating the gap between design and implementation. Extract tokens, components, layouts, and styles without switching context. Features: - Read file contents, frames, and component definitions - Extract design tokens (colors, typography, spacing, border radius) - Get component variants and their properties - Export specific frames as images - Access Auto Layout constraints and responsive properties - Read comments and annotations on frames - Navigate file structure and page hierarchy - Get precise measurements and coordinates Real-world impact: Before Figma MCP: Describe the design verbally, AI guesses styles After Figma MCP: AI reads the exact hex values, font weights, and spacing from the Figma file and implements pixel-perfect components One of the January 2026 launch partners for Anthropic's MCP Apps — renders interactive design previews directly inside Claude.
Installation steps
- 1Install: pip install openai-agents
- 2Copy the snippet below into your agent code
- 3Replace placeholder env values with your real keys
- 4Pass mcp_servers=[mcp_server] to your Agent()
Python snippet
from agents import Agent
from agents.mcp import MCPServerStdio
mcp_server = MCPServerStdio(
command="npx",
args=["-y", "figma-developer-mcp"],
env={
"FIGMA_API_KEY": "figd_...",
},
)
agent = Agent(
name="My Agent",
model="gpt-4o",
mcp_servers=[mcp_server],
)Install in other clients
For maintainers
If you maintain Figma MCP, add this badge to your README to show it's verified on CuratedMCP:
[](https://curatedmcp.com/marketplace/figma-mcp)