Figma Integration

Access Figma files, comments, and components

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

Go to Figma for Developers
Create a new OAuth application
Configure your redirect URI
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

export interface FigmaIntegrationConfig {
  /** Figma OAuth client ID (defaults to FIGMA_CLIENT_ID env var) */
  clientId?: string;

Tools

`figma_get_file`

Get a Figma file by key

export interface FigmaGetFileParams {
    /** Figma file key */
    file_key: string;

`figma_get_file_nodes`

Get specific nodes from a file

export interface FigmaGetFileNodesParams {
    /** Figma file key */
    file_key: string;

`figma_get_file_meta`

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

export interface FigmaGetFileMetaParams {
    /** Figma file key */
    file_key: string;

`figma_get_image_fills`

Get URLs of image fills used in a file

export interface FigmaGetImageFillsParams {
    /** Figma file key */
    file_key: string;

`figma_get_images`

Export rendered images for nodes in a file

export interface FigmaGetImagesParams {
    /** Figma file key */
    file_key: string;

`figma_get_file_versions`

Get version history of a file

export interface FigmaGetFileVersionsParams {
    /** Figma file key */
    file_key: string;

`figma_get_oembed`

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

export interface FigmaGetOembedParams {
    /** Figma file key */
    file_key: string;

`figma_get_me`

Get the current authenticated user

No parameters.

`figma_get_comments`

Get comments on a file

export interface FigmaGetCommentsParams {
    /** Figma file key */
    file_key: string;

`figma_post_comment`

`figma_delete_comment`

Delete a comment from a file

export interface FigmaDeleteCommentParams {
    /** Figma file key */
    file_key: string;

`figma_get_comment_reactions`

Get reactions on a comment

export interface FigmaGetCommentReactionsParams {
    /** Figma file key */
    file_key: string;

`figma_post_comment_reaction`

Add a reaction to a comment

export interface FigmaPostCommentReactionParams {
    /** Figma file key */
    file_key: string;

`figma_delete_comment_reaction`

Delete a reaction from a comment

export interface FigmaDeleteCommentReactionParams {
    /** Figma file key */
    file_key: string;

`figma_list_projects`

List projects in a team

export interface FigmaListProjectsParams {
    /** Team ID */
    team_id: string;

`figma_get_project_files`

Get files in a project

export interface FigmaGetProjectFilesParams {
    /** Project ID */
    project_id: string;

`figma_get_team_components`

Get published components for a team

export interface FigmaGetTeamComponentsParams {
    /** Team ID */
    team_id: string;

`figma_get_file_components`

Get components defined in a file

export interface FigmaGetFileComponentsParams {
    /** Figma file key */
    file_key: string;

`figma_get_component`

Get a single published component by key

export interface FigmaGetComponentParams {
    /** Component key */
    key: string;

`figma_get_team_component_sets`

Get published component sets for a team

export interface FigmaGetTeamComponentSetsParams {
    /** Team ID */
    team_id: string;

`figma_get_file_component_sets`

Get component sets defined in a file

export interface FigmaGetFileComponentSetsParams {
    /** Figma file key */
    file_key: string;

`figma_get_component_set`

Get a single published component set by key

export interface FigmaGetComponentSetParams {
    /** Component set key */
    key: string;

`figma_get_team_styles`

Get published styles for a team

export interface FigmaGetTeamStylesParams {
    /** Team ID */
    team_id: string;

`figma_get_file_styles`

Get styles defined in a file

export interface FigmaGetFileStylesParams {
    /** Figma file key */
    file_key: string;

`figma_get_style`

Get a single published style by key

export interface FigmaGetStyleParams {
    /** Style key */
    key: string;

`figma_list_webhooks`

List all webhooks for the authenticated user

export interface FigmaListWebhooksParams {
    /** Filter by plan API ID */
    plan_api_id?: string;

`figma_create_webhook`

Create a webhook

export interface FigmaCreateWebhookParams {
    /** Event type to subscribe to (e.g. FILE_UPDATE, FILE_VERSION_UPDATE) */
    event_type: string;

`figma_get_webhook`

Get a webhook by ID

export interface FigmaGetWebhookParams {
    /** Webhook ID */
    webhook_id: string;

`figma_update_webhook`

Update an existing webhook

export interface FigmaUpdateWebhookParams {
    /** Webhook ID */
    webhook_id: string;

`figma_delete_webhook`

Delete a webhook

export interface FigmaDeleteWebhookParams {
    /** Webhook ID */
    webhook_id: string;

`figma_get_team_webhooks`

Get all webhooks for a team

export interface FigmaGetTeamWebhooksParams {
    /** Team ID */
    team_id: string;

`figma_get_webhook_requests`

Get recent delivery requests for a webhook

export interface FigmaGetWebhookRequestsParams {
    /** Webhook ID */
    webhook_id: string;

`figma_get_local_variables`

Get local variables defined in a file

export interface FigmaGetLocalVariablesParams {
    /** Figma file key */
    file_key: string;

`figma_get_published_variables`

Get published variables available to a file

export interface FigmaGetPublishedVariablesParams {
    /** Figma file key */
    file_key: string;

`figma_post_variables`

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

export interface FigmaPostVariablesParams {
    /** Figma file key */
    file_key: string;

`figma_get_dev_resources`

Get dev resources linked to nodes in a file

export interface FigmaGetDevResourcesParams {
    /** Figma file key */
    file_key: string;

`figma_post_dev_resources`

Create dev resources linked to file nodes

export interface FigmaPostDevResourcesParams {
    /** JSON-encoded dev resources payload */
    payload_json: string;

`figma_put_dev_resources`

Update existing dev resources

export interface FigmaPutDevResourcesParams {
    /** JSON-encoded dev resources update payload */
    payload_json: string;

`figma_delete_dev_resource`

Delete a dev resource from a file

export interface FigmaDeleteDevResourceParams {
    /** Figma file key */
    file_key: string;

`figma_get_payments`

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

export interface FigmaGetPaymentsParams {
    /** One-time payment token from the plugin */
    plugin_payment_token?: string;

`figma_get_library_analytics_component_actions`

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

export interface FigmaGetLibraryAnalyticsComponentActionsParams {
    /** Library file key */
    file_key: string;

`figma_get_library_analytics_component_usages`

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

export interface FigmaGetLibraryAnalyticsComponentUsagesParams {
    /** Library file key */
    file_key: string;

`figma_get_library_analytics_style_actions`

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

export interface FigmaGetLibraryAnalyticsStyleActionsParams {
    /** Library file key */
    file_key: string;

`figma_get_library_analytics_style_usages`

Get analytics on style usages from a library file

export interface FigmaGetLibraryAnalyticsStyleUsagesParams {
    /** Library file key */
    file_key: string;

Notes

Category: Engineering
Authentication mode: OAuth