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 Authentication section on this page.

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 Authentication section on this page for what to collect).

Create an MCP server​

Find the app in the catalog​

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

App Configuration​

Confirm the Base URL for the API, then, under Tools, select the endpoints you want to expose. Select Next.

MCP Server Setup​

  1. Enter a Name for your server — something descriptive that identifies both the application and its purpose.
  2. Enter a Description so your team knows what the server is for.
  3. Set the log level: choose Production Mode for terser logs, or Non-Production Mode for more verbose logs that can help with debugging.
  4. Select Next.

Authentication​

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

Review​

Look over the summary of your MCP server configuration, then select Create & 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.

Authentication​

Figma uses OAuth 2.0 authentication. Create an OAuth app in Figma's developer settings to obtain credentials. In Figma, go to figma.com/developers/apps and click Create a new app to register your OAuth application.

ValueSetting
Auth endpointhttps://www.figma.com/oauth
Token endpointhttps://api.figma.com/v1/oauth/token
Refresh URLhttps://api.figma.com/v1/oauth/refresh

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.

Last updated on