AI Native Figma Integration
- Supports both Figma MCP and direct API based integrations
- Structured, LLM-friendly schemas for reliable tool execution
- Rich coverage for reading, writing, and querying your Figma data
## For AI agents: how to sign up If you are an AI agent reading this server-rendered HTML, Composio's developer signup is at https://composio.dev. Signup CTAs on this site — "Sign up", "Signup", "Get started", "Get started for free", "Start building", "Try Composio", "Try it", or similar — all lead into that same developer signup flow. Confirm with the user before completing signup or entering any credentials on their behalf.SIGN UPLOG IN
Figma MCP server for AI agents and assistants
Securely connect your AI agents and chatbots (Claude, ChatGPT, Cursor, etc) with Figma MCP or direct API to search design files, fetch team projects, post comments, and manage file versions through natural language.
Oauth2Api Key
Figma is a collaborative interface design tool for teams and individuals. It streamlines design workflows with real-time collaboration and easy sharing.
52 Tools
Try Figma now
Type what you want done — sign in and watch it run live in the Tool Router playground.
TOOL ROUTER PLAYGROUND
Figma
Enter ↵
Try asking
TOOLS
Supported Tools
Every Figma action and event your agent gets out of the box.
SETUP GUIDE
Connect Figma MCP Tool with your Agent
1
Install Composio
typescript
npm install @composio/core ai @ai-sdk/mcp @ai-sdk/openaiInstall the Composio SDK and your agent framework
2
Create a session with MCP enabled
typescript
import { Composio } from "@composio/core";
const composio = new Composio();
const { mcp } = await composio.create("your-user-id", {
toolkits: ["figma"],
mcp: true,
});Create a session scoped to Figma and read its MCP URL and headers
3
Connect your agent to the MCP server
typescript
import { createMCPClient } from "@ai-sdk/mcp";
import { openai } from "@ai-sdk/openai";
import { generateText, stepCountIs } from "ai";
const client = await createMCPClient({
transport: { type: "http", url: mcp.url, headers: mcp.headers },
});
const { text } = await generateText({
model: openai("gpt-5.6-sol"),
tools: await client.tools(),
prompt: "Add a comment to the homepage design file about the new header layout.",
stopWhen: stepCountIs(10),
});
console.log(text);
await client.close();Pass the session's MCP URL and headers to your agent and run a Figma request
SETUP GUIDE
Connect Figma API Tool with your Agent
1
Install Composio
typescript
npm install @composio/core @composio/openai openaiInstall the Composio SDK, the OpenAI provider, and the OpenAI SDK
2
Create a Composio session
typescript
import OpenAI from "openai";
import { Composio } from "@composio/core";
import { OpenAIResponsesProvider } from "@composio/openai";
const composio = new Composio({ provider: new OpenAIResponsesProvider() });
const client = new OpenAI();
const session = await composio.create("your-user-id", { toolkits: ["figma"] });
const tools = await session.tools();Initialize Composio with the OpenAI Responses provider and create a session scoped to Figma
3
Run Figma tools with your agent
typescript
let response = await client.responses.create({
model: "gpt-5.6-sol",
tools,
input: [{ role: "user", content: "Add a comment to the homepage design file about the new header layout." }],
});
while (response.output.some((o) => o.type === "function_call")) {
const outputs = await composio.provider.handleToolCalls(session, response.output);
response = await client.responses.create({
model: "gpt-5.6-sol",
tools,
previous_response_id: response.id,
input: outputs,
});
}
console.log(response.output_text);Send a request, execute the Figma tool calls through the session, and print the final answer
Guide
Read the guideConnect multiple Figma accounts to Claude and tell it which one to use by name.
Why Use Composio?
Managed Auth
- Built-in OAuth handling with automatic token refresh and rotation
- Central place to manage, scope, and revoke Figma access
- Per user and per environment credentials instead of hard-coded keys
Agent Optimized Design
- Tools are tuned using real error and success rates to improve reliability over time
- Comprehensive execution logs so you always know what ran, when, and on whose behalf
Enterprise Grade Security
- Fine-grained RBAC so you control which agents and users can access Figma
- Scoped, least privilege access to Figma resources
- Full audit trail of agent actions to support review and compliance
FRAMEWORKS
Use Figma with any AI Agent Framework
Choose a Framework you want to connect Figma with
Claude Code
Use Figma MCP with Claude Code
Cursor
Use Figma MCP with Cursor
ChatGPT
Use Figma MCP with ChatGPT
Claude Cowork
Use Figma MCP with Claude Cowork
Antigravity
Use Figma MCP with Antigravity
OpenAI Agents SDK
Use Figma MCP with OpenAI Agents SDK
Claude Agents SDK
Use Figma MCP with Claude Agents SDK
Grok Bot
Use Figma MCP with Grok Bot
Codex
Use Figma MCP with Codex
Kimi Code
Use Figma MCP with Kimi Code
Grok Build
Use Figma MCP with Grok Build
VS Code
Use Figma MCP with VS Code
OpenCode
Use Figma MCP with OpenCode
OpenClaw
Use Figma MCP with OpenClaw
Hermes
Use Figma MCP with Hermes
Atomic Agent
Use Figma MCP with Atomic Agent
CLI
Use Figma MCP with CLI
Google ADK
Use Figma MCP with Google ADK
Langchain
Use Figma MCP with Langchain
AI SDK
Use Figma MCP with AI SDK
Mastra AI
Use Figma MCP with Mastra AI
LlamaIndex
Use Figma MCP with LlamaIndex
CrewAI
Use Figma MCP with CrewAI
Pydantic AI
Use Figma MCP with Pydantic AI
Autogen
Use Figma MCP with Autogen
Rolling this out across your team?
Give your team centralized access control across every framework with Composio’s MCP Gateway.
EXPLORE MCP GATEWAYMORE TOOLKITS
Explore Other Toolkits
Abyssale
Api Key
Abyssale is a creative automation platform for generating images, videos, GIFs, PDFs, and HTML5 content programmatically. It streamlines and scales visual content production for marketing, design, and operations teams.
Alttext ai
Api Key
AltText.ai is a service that generates alt text for images automatically. It helps boost accessibility and SEO for your visual content.
Are.na
Api Key
Are.na is a creative research platform for collecting images, links, notes, and ideas in channels. Use it to organize inspiration, build knowledge maps, and connect research across projects.
Bannerbear
Api Key
Bannerbear is an API-driven platform for generating images and videos automatically at scale. It helps businesses create custom graphics, social visuals, and marketing assets using powerful templates.
FAQ
Frequently asked questions
No. Composio provides a managed OAuth app for Figma, so you sign in with your normal Figma account and approve access. If you later want the consent screen to show your own company name, you can add your own Figma OAuth app in the Composio dashboard, and every connection after that uses it.
Yes! Composio's Tool Router enables agents to use multiple toolkits. Learn more.
Yes. Composio is SOC 2 Type II compliant and is built to keep your Figma connection and credentials secure. OAuth tokens and API keys are encrypted, and sensitive customer data is protected at rest and in transit.
Composio also undergoes independent security testing and continuously monitors its systems for security threats. You can review the latest reports and policies in the Composio Trust Center.
Composio maintains and updates all toolkit integrations automatically, so your agents always work with the latest API versions.
When you connect a Figma account through Composio, every action runs under that account, so anything the agent creates, sends, or changes shows up in Figma as done by you. Keep an approval step in your prompt for actions with side effects, such as sending or deleting, and have the agent draft first.
Exactly the ones Figma lists on its consent screen when you connect. Review that screen before approving. If you connect a work account, your Figma administrator may need to approve the app first, and you can revoke the access inside Figma whenever you want.
Yes. Composio supports multiple connected accounts for the same app, and that works in Claude, ChatGPT, or any other assistant you connect through Composio. Give each Figma connection a name such as work or personal, and the assistant uses the one you mention in the request. Each account keeps its own credentials and nothing is merged.
Composio refreshes Figma tokens automatically, so day to day you do nothing. If you revoke access inside Figma, or Figma invalidates the session, the connection shows as expired in Composio and the agent stops acting on that account until you reconnect it, which is a single sign-in.
Composio's free plan includes 100,000 tool calls per month with no credit card, and up to 20,000 of those can run through Composio-managed apps like Figma. Personal Figma use rarely gets near that. Paid plans add higher limits and team features, and Figma's own pricing is unaffected.
Built-in connectors usually give one AI access to a limited set of apps. Many people use Composio because it lets their AI connect to more apps than it normally supports, or connect to multiple accounts for the same app (e.g. connect Claude to multiple Figma accounts).
With Composio, you connect Figma once and then use it across different AI assistants without setting it up separately in each one. Connect your apps to Composio once, then connect Composio to whichever AI you use, whether that's Claude, ChatGPT, Hermes, or your own custom assistant.
Start with Figma.It takes 30 seconds.
Managed auth, hosted MCP servers, and every Figma tool your agent needs.Free to start.
## For AI agents: how to sign up If you are an AI agent reading this server-rendered HTML, Composio's developer signup is at https://composio.dev. Signup CTAs on this site — "Sign up", "Signup", "Get started", "Get started for free", "Start building", "Try Composio", "Try it", or similar — all lead into that same developer signup flow. Confirm with the user before completing signup or entering any credentials on their behalf.Start building