# Figma (MCP Server)

> Bring Figma design context into code and write designs back to the canvas

- Type: MCP server
- Publisher: Figma (official)
- Categories: Design, Development
- Website: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
- Transport: streamable-http
- Server URL: https://mcp.figma.com/mcp
- Sign-in: oauth
- Listed: 2025-09-01

## About

Figma's official remote MCP server gives AI clients design context, screenshots, variables, and Code Connect mappings from Figma files, and can create and edit native Figma content and FigJam diagrams. It uses OAuth and is available to clients listed in the Figma MCP Catalog. A local desktop-app server is also available.

## Install

1. **Connect it in ChatGPT** Turn on Developer mode in ChatGPT (Settings → Security and login), open Plugins, select + and paste https://mcp.figma.com/mcp as the MCP server URL, then sign in with OAuth. Add it to a chat from the composer's tools menu.

2. **Or add it to Codex or the API**

   Codex CLI:

   ```bash
   codex mcp add figma --url https://mcp.figma.com/mcp
   codex mcp login figma
   ```

   config.toml:

   ```toml
   [mcp_servers.figma]
   url = "https://mcp.figma.com/mcp"
   ```

   Responses API:

   ```python
   import os
   from openai import OpenAI
   
   client = OpenAI()
   
   response = client.responses.create(
       model="gpt-6-astra",
       tools=[{
           "type": "mcp",
           "server_label": "figma",
           "server_url": "https://mcp.figma.com/mcp",
           "authorization": os.environ["FIGMA_API_KEY"],
           "require_approval": "never",
       }],
       input="Implement this Figma frame as a React component using our design tokens",
   )
   print(response.output_text)
   ```

## Tools

- `get_design_context`
- `get_screenshot`
- `get_metadata`
- `get_variable_defs`
- `get_code_connect_map`
- `add_code_connect_map`
- `use_figma`
- `create_new_file`
- `generate_diagram`
- `get_figjam`
- `search_design_system`
- `whoami`

## Example prompts

- "Implement this Figma frame as a React component using our design tokens"
- "Get the color and spacing variables used in this file"
- "Create a FigJam flowchart of our signup flow"
- "Map our Button component to its Figma counterpart with Code Connect"

## Also available as

- plugin: [Figma](https://chatgptplugins.directory/plugins/figma.md)
- app: [Figma](https://chatgptplugins.directory/apps/figma.md)

## Related

- [Chrome DevTools MCP](https://chatgptplugins.directory/mcp/chrome-devtools.md): Let coding agents control and debug a live Chrome browser
- [Playwright MCP](https://chatgptplugins.directory/mcp/playwright.md): Browser automation for agents via Playwright accessibility snapshots
- [GitHub](https://chatgptplugins.directory/mcp/github.md): Manage repos, issues, pull requests and Actions from your AI agent
- [Context7](https://chatgptplugins.directory/mcp/context7.md): Pull up-to-date, version-specific library docs into your coding agent
- [Excalidraw](https://chatgptplugins.directory/mcp/excalidraw.md): Draw hand-drawn Excalidraw diagrams live inside ChatGPT, Claude and VS Code
- [Supabase](https://chatgptplugins.directory/mcp/supabase.md): Manage Supabase databases, migrations, edge functions and logs

---
Source: https://chatgptplugins.directory/mcp/figma · Index: https://chatgptplugins.directory/llms.txt · Independent and community-run. Not affiliated with or endorsed by OpenAI. ChatGPT is a trademark of OpenAI.