MCP Servers for Figma

Figma is a collaborative design platform for creating, testing, and shipping better designs from start to finish.

View all MCP Servers

  • Why this server?

    Allows AI coding agents to access Figma files and prototypes directly, providing capabilities to retrieve components, specific nodes, and workflow connections from Figma designs using the Figma API.

    A
    security
    A
    license
    A
    quality
    Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993 1. Access all figma pages 2. Access all figma components 3. Access figma prototype flows
    3
    49
    Python
    MIT License
  • Why this server?

    Allows analyzing Figma file structures by extracting node hierarchies through the Figma API

    A
    security
    A
    license
    A
    quality
    Facilitates the analysis of Figma file structures by extracting node hierarchies, accessible via REST API or MCP protocol.
    1
    2
    TypeScript
    MIT License
  • Why this server?

    Provides tools for creating and modifying Figma designs through natural language prompts, including capabilities to create basic design elements, design complete page layouts, and modify existing designs.

    A
    security
    F
    license
    A
    quality
    A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.
    5
    640
    2
    JavaScript
  • Why this server?

    Retrieves and optimizes design data from Figma files, extracts design tokens (typography and colors), converts design elements to CSS, and generates CSS class names based on design properties.

    A
    security
    F
    license
    A
    quality
    A tool that integrates Figma with Cursor through the Model Context Protocol, allowing users to retrieve, optimize, and convert design data from Figma files into structured CSS and design tokens.
    1
    JavaScript
  • Why this server?

    Enables control of the cursor in Figma through verbal commands, allowing users to interact with the design tool using AI-powered voice instructions for a more streamlined design workflow.

    A
    security
    F
    license
    A
    quality
    Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
    19
    5,006
    1
    JavaScript
  • Why this server?

    Provides integration with Figma's API for read-only access to Figma files and projects, with architecture supporting design token and theme management features

    A
    security
    F
    license
    A
    quality
    Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
    2
    106
    TypeScript
    • Apple
  • Why this server?

    Provides comprehensive access to Figma's API, enabling file operations, comments management, team/project management, component and style access, and image extraction from Figma designs.

    A
    security
    F
    license
    A
    quality
    A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
    18
    34
    1
  • Why this server?

    Provides tools for interacting with the Figma API, including file data retrieval, file listing, version history, comment management, component and style retrieval, with memory-efficient chunking and pagination capabilities for handling large Figma files.

    A
    security
    F
    license
    A
    quality
    A Model Context Protocol server for interacting with the Figma API that handles large Figma files efficiently through memory-aware chunking and pagination capabilities.
    7
    1
    TypeScript
  • Why this server?

    Enables AI assistants to interact with Figma files, providing tools for viewing file content, reading and posting comments, replying to comments, and viewing specific nodes in Figma designs.

    A
    security
    F
    license
    A
    quality
    Enables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.
    5
    640
    119
    TypeScript
    • Apple
  • Why this server?

    Allows access to Figma files, components, styles, and various Figma API operations including getting file information, nodes, images, comments, team projects, and more

    -
    security
    A
    license
    -
    quality
    A comprehensive toolkit that enhances LLM capabilities through the Model Context Protocol, allowing LLMs to interact with external services including command-line operations, file management, Figma integration, and audio processing.
    13
    Python
    Apache 2.0
    • Linux
    • Apple
  • Why this server?

    Provides complete access to the Figma API, allowing interaction with files, comments, teams, projects, components, styles, webhooks, and library analytics. Enables retrieving file content, managing comments and reactions, accessing design components, and monitoring usage analytics.

  • Why this server?

    Fetches design data from Figma files and converts it to AI-friendly formats, retrieving layouts, styles, and images for use in code generation.

    -
    security
    A
    license
    -
    quality
    A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
    124
    6
    TypeScript
    MIT License
    • Linux
    • Apple
  • Why this server?

    Fetches design data from Figma files, frames, or groups, translating layout and styling information to help AI-powered coding tools generate more accurate implementations from Figma designs.

    -
    security
    A
    license
    -
    quality
    Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
    16,854
    TypeScript
    MIT License
  • Why this server?

    Planned integration for accessing and potentially modifying Figma designs through the MCP server

    -
    security
    F
    license
    -
    quality
    A tutorial MCP server implementation that provides country information, demonstrating the Model Context Protocol for building AI-powered applications with external service integration capabilities.
  • Why this server?

    Extracts components from Figma designs and transforms them into a standardized JSON format that can be used to reconstruct interfaces programmatically. Supports organizing components into logical sections, normalizing positions, and extracting assets.

    -
    security
    F
    license
    -
    quality
    Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
    TypeScript
  • Why this server?

    Enables creating and manipulating designs in Figma through either a Figma plugin or directly via the Figma API, supporting operations like creating projects, frames, components, layouts, interactions, retrieving file information, and exporting assets.

    -
    security
    F
    license
    -
    quality
    A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
    TypeScript
  • Why this server?

    Extracts components from Figma designs and converts them to React Native components with proper typing and styling, maintaining component hierarchy and handling component props.

    -
    security
    F
    license
    -
    quality
    Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
    111
    1
    TypeScript
  • Why this server?

    Enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data, converting Figma styles to CSS/styled-components, handling image assets and SVG components, and translating Figma auto-layout to Flexbox.

    -
    security
    F
    license
    -
    quality
    A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
    640
    TypeScript
  • Why this server?

    Fetches designs and components from Figma projects using the Figma API and extracts component information for conversion to React.

    -
    security
    F
    license
    -
    quality
    Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.
    3
    TypeScript
  • Why this server?

    Provides integration with Figma's API, enabling file operations (information retrieval, version history, components), comment management (listing, adding, deleting), project and team features (listing projects, getting files, accessing published styles), and webhook management.

    -
    security
    F
    license
    -
    quality
    A Model Context Protocol server that integrates with Figma's API, allowing interaction with Figma files, comments, components, projects, and webhook management.
    640
    JavaScript
  • Why this server?

    Allows Cursor AI to communicate with Figma for reading designs and modifying them programmatically, including creating elements (rectangles, frames, text), styling (colors, strokes, corner radius), manipulating layout, working with components, and exporting nodes as images.

    -
    security
    F
    license
    -
    quality
    Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
    TypeScript
  • Why this server?

    Connects to Figma's API to extract components, styles, and text from designs, analyze design system consistency, manage UI content, and generate development documentation.

    -
    security
    F
    license
    -
    quality
    A Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.
    TypeScript
    • Apple