Skip to main content

​
​What is Figr MCP

MCP (Model Context Protocol) lets AI assistants access external tools and data. Figr MCP connects your Figr projects to AI coding environments, so you can reference designs, extract code, and understand design decisions without leaving your editor. With Figr MCP you can:
  • Access artifact code from your IDE
  • Read design decisions and context
  • Search across project files
  • Explore project structure
  • Get design-to-code context for implementation

​
Setup an MCP client

  1. Open Cursor → Settings → Cursor Settings
  2. Click on Tools & Integrations
  3. Under MCP Tools, click + to add a custom MCP server
  4. Paste the code snippet into the mcp.json file and save
{
  "mcpServers": {
    "figr": {
      "type": "http",
      "url": "https://mcp.figr.design/mcp"
    }
  }
}

​
Connect the MCP server to your editor

Follow instructions for your specific editor to connect to the Figr MCP server,
ClientSupport
Android Studio✓
Claude Code✓
Codex by OpenAI✓
Cursor✓
Google Antigravity✓
Kiro✓
Replit✓
VS Code✓
Warp✓

​
Prompt your MCP Server

To use Figr MCP, share your project link first. This tells the AI which Figr project to look at. 
"Here's my Figr project: https://app.figr.design/..."
Once connected, you can explore everything in that project.

​
What You Can Do

  • See what’s in your project Ask to see all your designs, past conversations, and files.
  • Read any design Open any artifact to see the code and how it was built.
  • Understand why something was designed that way Get the full story behind a design, including the decisions and reasoning from your conversations with Figr.
  • Search across everything Find specific elements, patterns, or text across all your designs at once.
  • Check file details See when something was created, modified, or get other details about any file.

​
Use Cases

  • Implementing designs: Get design context → understand decisions → implement with full context
  • Finding patterns: Search across artifacts → read relevant files → apply consistent patterns
  • Extracting code: Read artifact → copy component code → adapt to your codebase