Figma MCP Server

Create a powerful Model Context Protocol (MCP) server for Figma in minutes with our AI Gateway. This guide walks you through setting up seamless Figma integration with enterprise-grade security and OAuth authentication for design-to-code workflows.

About Figma API

Figma is the leading collaborative design platform used by millions of designers and developers worldwide. The Figma REST API provides programmatic access to design files, enabling powerful design-to-code workflows:

• File Content: Access layers, frames, components, and design structure
• Image Rendering: Export designs as PNG, SVG, or other formats
• Design Tokens: Retrieve variables, styles, and design system definitions
• Dev Resources: Access Code Connect mappings between designs and code
• Metadata: File information, version history, and permissions
• FigJam: Access collaborative whiteboard content

Key Features

• REST API: Comprehensive RESTful interface for design data
• OAuth 2.0: Secure user-centric authorization flow
• Real-time Sync: Access latest design changes instantly
• Code Connect: Map design components to code implementations
• Design Tokens: Export colors, typography, spacing as variables
• Image Export: Render any frame or node as images

What You Can Do with Figma MCP Server

The MCP server transforms Figma's API into a natural language interface, enabling AI agents to understand and work with your designs:

Design-to-Code Workflows

• Component Generation

  • "Generate a React component from this Figma frame"
  • "Create TypeScript interfaces for the design system components"
  • "Build a responsive layout matching this design"
  • "Extract the button styles and create a CSS module"

• Design Analysis

  • "Describe the layout structure of this page"
  • "List all the components used in this design"
  • "Identify the color palette from this design system"
  • "Analyze the typography hierarchy"

Visual Documentation

• Screenshots & Exports

  • "Take a screenshot of the login page design"
  • "Export the hero section as a PNG for the README"
  • "Capture all button variants for documentation"
  • "Generate preview images for the component library"

• Design Specifications

  • "Get the exact dimensions and spacing for this component"
  • "Extract the border radius and shadow values"
  • "List all the font sizes used in this design"

Design System Management

• Variable Definitions

  • "Extract all color variables from the design system"
  • "Get the spacing scale definitions"
  • "List typography tokens with their values"
  • "Export design tokens as CSS custom properties"

• Code Connect

  • "Map this Figma component to Button.tsx"
  • "Show which code files are connected to this design"
  • "Update the Code Connect mapping for the Card component"
  • "List all design-to-code connections in this file"

File & Metadata Operations

• File Information

  • "Get the last modified date for this design file"
  • "Show who has access to this Figma file"
  • "List all pages in this design document"
  • "Check the current version of this design"

• FigJam Integration

  • "Extract the content from this FigJam board"
  • "Get all sticky notes from the brainstorming session"
  • "List action items from the retrospective board"

Prerequisites

• Access to Cequence AI Gateway
• Figma account (Free, Professional, Organization, or Enterprise)
• Figma team or organization (required for OAuth apps)
• Files you want to access through the MCP server

Step 1: Create Figma OAuth App

Before setting up the MCP server, you need to create a Figma OAuth App.

1.1 Access Figma Developer Settings

1. Log in to your Figma account
2. Navigate to figma.com/developers/apps
3. Or click My Apps in the top toolbar of the Figma developer documentation

1.2 Create New OAuth App

1. Click Create a new app in the upper-right corner
2. Enter a name for your OAuth app (e.g., "AI Gateway MCP Integration")
3. Select a team or organization to associate with the app
   • Note: Users of your app don't need to be part of this team/org
4. Click Create
5. Important: Copy the Client ID and Client Secret immediately
   • The Client Secret is only shown once!
   • Store these credentials securely

1.3 Configure OAuth App

After creating the app, configure it:

1. On the OAuth credentials page, click Add a redirect URL

2. Add the callback URL:

   https://auth.aigateway.cequence.ai/v1/outbound/oauth/callback

3. On the OAuth scopes page, select the required scopes (see OAuth Scopes section below)

4. On the Publish page:

   • Select Private for internal/team use
   • Select Public if building for general Figma users (requires Figma review)

5. Complete the configuration and publish your app

1.4 OAuth App States

• Draft: Only you and plan admins can test; cannot make requests for other users
• Private: Available to users in your team/organization; no Figma review required
• Public: Available to all Figma users; requires Figma review and approval

Step 2: Access AI Gateway Apps

1. Log in to your Cequence AI Gateway dashboard
2. Navigate to Apps in the left sidebar
3. You'll see the list of available third-party applications

Step 3: Find and Select Figma API

1. In the Apps section, browse through the Third-party category
2. Look for Figma or use the search function
3. Click on the Figma API card to view details

The Figma API card shows:

• Number of available endpoints
• Integration capabilities
• Quick description of functionality

Step 4: Create MCP Server

1. Click the Create MCP Server button on the Figma API card
2. You'll be redirected to the MCP Server creation wizard

Step 5: Configure API Endpoints

In the App Configuration step:

1. Base URL is pre-filled: https://api.figma.com
2. Select API endpoints to expose to your MCP server:
   • File content and nodes
   • Image rendering
   • Styles and variables
   • Dev resources (Code Connect)
   • User information
3. Click Next to proceed

Step 6: MCP Server Basic Setup

Configure your MCP server details:

1. MCP Server Name: Enter a descriptive name

   • Example: "Figma Design System Integration"
   • This name will identify your server in the dashboard

2. Description (Optional): Add details about the server's purpose

   • Example: "Design-to-code workflows for the product team"

3. Production Mode: Toggle based on your needs

   • ON for production environments
   • OFF for development/testing

4. Click Next to continue

Step 7: Configure Authentication

This is where you'll use your Figma OAuth App credentials:

1. Authentication Type: Select OAuth 2.0

2. Fill in the OAuth configuration:

   • 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: Paste from Figma OAuth App
   • Client Secret: Paste from Figma OAuth App
   • Redirect URI:

     https://auth.aigateway.cequence.ai/v1/outbound/oauth/callback

3. Scopes: Select from the available Figma scopes (see next section)

Available Figma OAuth Scopes

Configure the appropriate scopes based on your application needs:

User Information

• current_user:read
  • Read the current user's information
  • Required for whoami functionality
  • Access user profile and email

File Access

• file_content:read

  • Read content of files the user can access
  • Required for design-to-code workflows
  • Access layers, frames, components, and structure
  • Essential for get_design_context tool

• file_metadata:read

  • Read file metadata (name, last modified, etc.)
  • Access version history
  • Required for get_metadata tool

Design System

• library_content:read
  • Read published library content
  • Access shared components and styles
  • Required for design system integration
  • Enables get_variable_defs tool

Dev Resources (Code Connect)

• file_dev_resources:read

  • Read dev resources linked to files
  • View Code Connect mappings
  • Required for get_code_connect_map tool

• file_dev_resources:write

  • Create and update dev resources
  • Manage Code Connect mappings
  • Required for add_code_connect_map tool

Recommended Scope Combinations

For Design-to-Code Workflows (Recommended):

current_user:read
file_content:read
file_metadata:read
library_content:read
file_dev_resources:read
file_dev_resources:write

For Read-Only Access:

current_user:read
file_content:read
file_metadata:read
library_content:read
file_dev_resources:read

Minimal (Basic File Access):

current_user:read
file_content:read

Step 8: Configure Security

Set up API protection features:

1. API Protection: Toggle ON to enable

   • Protects against bot attacks, DDoS, and threats
   • Monitors for suspicious activity
   • Rate limiting and anomaly detection

2. Protection Features (when enabled):

   • Auto-scaling protection
   • Managed infrastructure
   • Built-in monitoring
   • Zero maintenance required

3. Click Next to continue

Step 9: Choose Deployment Method

Select your deployment preference:

Option A: Deploy to Cequence Cloud (Recommended)

• Fully managed deployment
• Automatic scaling and monitoring
• Built-in high availability
• Features included:
  • Auto-scaling
  • Managed infrastructure
  • Built-in monitoring
  • Zero maintenance

Option B: Deploy with Helm Chart

• Self-managed Kubernetes deployment
• Full control over infrastructure
• Requires:
  • Kubernetes cluster
  • Helm 3.x installed
  • Container registry access

Click Next after selecting your deployment method.

Step 10: Review and Deploy

Review your MCP server configuration:

• MCP Server Name: Your chosen name
• Base URL: https://api.figma.com
• Selected Endpoints: Number of endpoints selected
• Authentication: OAuth 2.0 (Configured)
• API Protection: Enabled/Disabled
• Deployment: Cequence Cloud or Helm

Click Create & Deploy to finalize the setup.

Step 11: Post-Deployment Setup

After successful deployment:

1. Note the MCP Server URL provided

2. Test the OAuth flow:

   • Click Test Connection
   • You'll be redirected to Figma authorization
   • Review and accept permissions
   • Confirm successful connection

3. Configure AI Agents:

   • The MCP server is now available for AI agent connections
   • Use the provided server URL in your AI agent configuration

MCP Tools Reference

The Figma MCP server provides these tools for AI agents:

Tool	Description	Required Scopes
get_design_context	Extract design information for code generation	file_content:read
get_screenshot	Capture visual screenshots of designs	file_content:read
get_variable_defs	Retrieve design tokens and variables	library_content:read
get_code_connect_map	View design-to-code mappings	file_dev_resources:read
add_code_connect_map	Create/update Code Connect mappings	file_dev_resources:write
get_metadata	Get file information and metadata	file_metadata:read
get_figjam	Access FigJam board content	file_content:read
whoami	Get current user information	current_user:read

Using Your Figma MCP Server

Setup Instructions:

• Claude Desktop
• Cursor
• Windsurf

Example Prompts

Once configured, try these prompts with your AI agent:

"Look at this Figma file and generate a React component for the header"

"Extract the color palette from the design system file"

"Take a screenshot of the mobile login screen"

"What components are used in this page design?"

"Map the Button component in Figma to src/components/Button.tsx"

Getting Help

• Documentation: AI Gateway Docs
• Support: support@cequence.ai
• Figma API Docs: developers.figma.com
• Figma MCP Server: Figma MCP Documentation
• Figma Status: status.figma.com

---