Skip to main content

Figma MCP server

Figma is the leading collaborative design platform enabling design-to-code workflows with API access to design files, components, variables, and code mappings. With this MCP server, AI agents can extract design information, generate code from designs, access design tokens, manage Code Connect mappings, and export design assets through natural language commands.

Setting up an MCP server

This article covers the standard steps for creating an MCP server in AI Gateway and connecting it to an AI client. The steps are the same for every integration — application-specific details (API credentials, OAuth endpoints, and scopes) are covered in the individual application pages.

Before you begin​

You'll need:

  • Access to AI Gateway with permission to create MCP servers
  • API credentials for the application you're connecting (see the relevant application page for what to collect)

Create an MCP server​

Find the API in the catalog​

  1. Sign in to AI Gateway and select MCP Servers from the left navigation.
  2. Select New MCP Server.
  3. Search for the application you want to connect, then select it from the catalog.

Configure the server​

  1. Enter a Name for your server — something descriptive that identifies both the application and its purpose (for example, "Zendesk Support — Prod").
  2. Enter a Description so your team knows what the server is for.
  3. Set the Timeout value. 30 seconds works for most APIs; increase to 60 seconds for APIs that return large payloads.
  4. Toggle Production mode on if this server will be used in a live workflow.
  5. Select Next.

Configure authentication​

Enter the authentication details for the application. This varies by service — see the Authentication section of the relevant application page for the specific credentials, OAuth URLs, and scopes to use.

Configure security​

  1. Set any Rate limits appropriate for your use case and the API's own limits.
  2. Enable Logging if you want AI Gateway to record requests and responses for auditing.
  3. Select Next.

Deploy​

Review the summary, then select Deploy. AI Gateway provisions the server and provides a server URL you'll use when configuring your AI client.

Connect to an AI client​

Once your server is deployed, you'll need to add it to the AI client your team uses. Select your client for setup instructions:

Tips​

  • You can create multiple MCP servers for the same application — for example, a read-only server for reporting agents and a read-write server for automation workflows.
  • If you're unsure which OAuth scopes to request, start with the minimum read-only set and add write scopes only when needed. Most application pages include scope recommendations.
  • You can edit a server's name, description, timeout, and security settings after deployment without redeploying.

Authentication​

Figma uses OAuth 2.0 authentication. Create an OAuth app in Figma's developer settings to obtain credentials.

  • Authorization URL: https://www.figma.com/oauth
  • Token URL: https://api.figma.com/v1/oauth/token
  • Refresh URL: https://api.figma.com/v1/oauth/refresh
  • Client ID: Generated from Figma OAuth app
  • Client Secret: Generated from Figma OAuth app

Available tools​

The Figma MCP server exposes design content, component libraries, variables, Code Connect mappings, and file management APIs.

ToolPurpose
Design ContextExtract design structure; get layers and frames; retrieve component information; access design hierarchies
Screenshots & ExportCapture design screenshots; export frames as PNG or SVG; render design previews
Design TokensRetrieve color variables; extract typography tokens; get spacing scales; access component tokens
Code ConnectView design-to-code mappings; create and update mappings; manage component documentation
File OperationsGet file metadata; list pages; access version history; manage file sharing permissions
FigJam ContentExtract whiteboard content; retrieve sticky notes; access brainstorming boards

Tips​

Use consistent naming conventions between design and code, maintain Code Connect mappings updated, document component variations, and keep design systems aligned with code implementations.

Export colors, typography, and spacing as design tokens, use tokens in code for consistency, keep design tokens synchronized, and version token changes.

Document component usage and variations, maintain clear component structure, use descriptive names, and include usage examples.

Use consistent page and layer naming, organize by feature or product section, maintain clean folder structures, and document design system conventions.

Grant OAuth scopes based on actual needs, regularly review app permissions, use separate keys for different environments, and implement secure credential management.