Figma Integration

The Figma integration provides access to access Figma files, comments, and components through the Integrate MCP server.

Installation

The Figma integration is included with the SDK:

import { figmaIntegration } from "integrate-sdk/server";

Setup

1. Create a Figma OAuth App

1. Go to Figma for Developers
2. Create a new OAuth application
3. Configure your redirect URI
4. Note your Client ID and Client Secret

2. Configure the Integration on Your Server

Add the Figma integration to your server configuration. The integration automatically reads FIGMA_CLIENT_ID and FIGMA_CLIENT_SECRET from your environment variables:

import { createMCPServer, figmaIntegration } from "integrate-sdk/server";

export const { client: serverClient } = createMCPServer({
  apiKey: process.env.INTEGRATE_API_KEY,
  integrations: [
    figmaIntegration({
    }),
  ],
});

You can override the environment variables by passing explicit values:

figmaIntegration({
  clientId: process.env.CUSTOM_FIGMA_ID,
  clientSecret: process.env.CUSTOM_FIGMA_SECRET,
});

3. Client-Side Usage

The default client automatically includes all integrations. You can use it directly:

import { client } from "integrate-sdk";

await client.authorize("figma");
const result = await client.figma.getFile({
  file_key: "value",
});

console.log(result);

If you're using a custom client, add the integration to the integrations array:

import { createMCPClient, figmaIntegration } from "integrate-sdk";

const customClient = createMCPClient({
  integrations: [figmaIntegration()],
});

Configuration Options

Tools

figma_get_file

Get a Figma file by key

figma_get_file_nodes

Get specific nodes from a file

figma_get_file_meta

Get file metadata (name, last modified, version, etc.) without the full document tree

figma_get_image_fills

Get URLs of image fills used in a file

figma_get_images

Export rendered images for nodes in a file

figma_get_file_versions

Get version history of a file

figma_get_oembed

Get oEmbed data for a Figma file (embed metadata for external sites)

figma_get_me

Get the current authenticated user

No parameters.

figma_get_comments

Get comments on a file

figma_post_comment

Post a comment on a file

figma_delete_comment

Delete a comment from a file

figma_get_comment_reactions

Get reactions on a comment

figma_post_comment_reaction

Add a reaction to a comment

figma_delete_comment_reaction

Delete a reaction from a comment

figma_list_projects

List projects in a team

figma_get_project_files

Get files in a project

figma_get_team_components

Get published components for a team

figma_get_file_components

Get components defined in a file

figma_get_component

Get a single published component by key

figma_get_team_component_sets

Get published component sets for a team

figma_get_file_component_sets

Get component sets defined in a file

figma_get_component_set

Get a single published component set by key

figma_get_team_styles

Get published styles for a team

figma_get_file_styles

Get styles defined in a file

figma_get_style

Get a single published style by key

figma_list_webhooks

List all webhooks for the authenticated user

figma_create_webhook

Create a webhook

figma_get_webhook

Get a webhook by ID

figma_update_webhook

Update an existing webhook

figma_delete_webhook

Delete a webhook

figma_get_team_webhooks

Get all webhooks for a team

figma_get_webhook_requests

Get recent delivery requests for a webhook

figma_get_local_variables

Get local variables defined in a file

figma_get_published_variables

Get published variables available to a file

figma_post_variables

Create, update, or delete variables and variable collections in a file

figma_get_dev_resources

Get dev resources linked to nodes in a file

figma_post_dev_resources

Create dev resources linked to file nodes

figma_put_dev_resources

Update existing dev resources

figma_delete_dev_resource

Delete a dev resource from a file

figma_get_payments

Get payment status for a plugin, widget, or community file.

figma_get_library_analytics_component_actions

Get analytics on component insert/detach actions from a library file

figma_get_library_analytics_component_usages

Get analytics on component usages (instances) from a library file

figma_get_library_analytics_style_actions

Get analytics on style insert/detach actions from a library file

figma_get_library_analytics_style_usages

Get analytics on style usages from a library file

Notes

• Category: Engineering
• Authentication mode: OAuth