logo
Free, unlimited AI code reviews that run on commit
git-lrc git-lrc GitHub Install Now We'd appreciate a star git-lrc - Free, unlimited AI code reviews that run on commit | Product Hunt git-lrc - Free, unlimited AI code reviews that run on commit | Product Hunt

mcp-figma-bridge

Establish a communication pathway to the Figma application programming interface utilizing a WebSocket server, specifically engineered for the development and integration of Figma extensions and visual components. Provides a comprehensive suite of interaction utilities and ensures smooth incorporation of external platforms.

Author

mcp-figma-bridge logo

sichang824

No License

Quick Info

GitHub GitHub Stars 3
NPM Weekly Downloads 3098
Tools 1
Last Updated 2026-02-19

Tags

figmawebsocketwidgetfigma apifigma pluginsinteract figma

MSeeP.ai Security Assessment Badge

Figma Model Context Protocol Gateway

An implementation of a Figma API intermediary layer adhering to the Model Context Protocol (MCP) specification, facilitating seamless connectivity for Figma extensions and embedded graphical elements.

Core Capabilities

  • Interface with the Figma API via MCP standards
  • Operates a WebSocket endpoint for extension communication within Figma
  • Native support for crafting Figma embedded visual assets (widgets)
  • Configuration flexibility achieved through command-line argument manipulation of environment variables
  • Expansive collection of utilities for Figma object manipulation

Deployment Instructions

  1. Obtain a local copy of the source code repository:
git clone <repository-url>
cd figma-mcp
  1. Install required software packages:
bun install

Setup Directives

Runtime Environment Variables

Create a configuration file named .env and populate it with the subsequent settings:

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

Acquiring a Figma Authorization Key

  1. Navigate to the official Figma website
  2. Access Account Preferences > Security > Personal Access Tokens area
  3. Generate a novel authorization credential
  4. Integrate the copied credential into your .env definition or supply it through runtime command parameters

Operational Procedures

Compiling the Application

bun run build

Launching the Development Listener

bun run dev

Utilizing Command-Line Switches

Ability to define environmental settings using the -e flag:

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

Alternatively, use a dedicated parameter for the secret key:

bun --watch src/index.ts --token your_token

Or the abbreviated notation:

bun --watch src/index.ts -t your_token

Configuring MCP within Cursor IDE

Incorporate the following stanza into your .cursor/mcp.json file:

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
      "-e",
      "PORT=6000"
    ]
  }
}

Accessible Operational Utilities

The server exposes the following functions for interacting with Figma:

  • File Management: Retrieval of file metadata, version history, and related data.
  • Element (Node) Operations: Querying and modification of Figma objects.
  • Annotation Handling: Management of in-file discussions/comments.
  • Visualization Export: Rendering Figma regions into image formats.
  • Information Discovery: Capabilities to search file contents.
  • Template/Asset Management: Control over reusable component instances.
  • Layout Construction: Programmatic creation of basic shapes (rectangles, text, etc.) on the canvas.
  • Widget Lifecycle: Management tasks related to embedded graphical user interfaces.

Figma Extension Creation

Extension Overview

Figma extensions are bespoke modules that augment Figma's native feature set, facilitating automated tasks, introduction of novel capabilities, or interfacing with external digital resources. This MCP gateway provides a streamlined environment for prototyping, validating, and deploying these custom extensions.

Building and Testing Extensions

Execute the build process for the extension:

bun run build:plugin

Start the development iteration environment:

bun run dev:plugin

Loading the Extension within Figma

  1. Open the context menu in Figma (Right-click) -> Select Plugins -> Development -> Choose 'Import plugin from manifest...'
  2. Point to the extension's manifest.json descriptor file.
  3. The newly installed extension will now appear within Figma's Plugins menu structure.

Extension Interfacing with the MCP Server

Extensions can establish a WebSocket session with the MCP server to enable:

  • Sophisticated data transformations and processing routines.
  • Direct integration with third-party web services.
  • Maintaining data state across multiple user sessions.
  • Incorporating advanced cognitive (AI) features.

Development Cycles

Compiling Embedded Visual Assets

bun run build:widget

Compiling Extensions

bun run build:plugin

Iterative Development Modes

bun run dev:widget  # Mode optimized for widget iteration
bun run dev:plugin  # Mode optimized for extension iteration

Licensing

MIT

== Overview == Business management tools encompass the entire spectrum of systems, software modules, control mechanisms, computational frameworks, and operational philosophies utilized by enterprises to successfully navigate evolving market conditions, secure a competitive stance, and elevate overall organizational efficacy.

There exists a functional categorization for tools corresponding to specific organizational divisions, which can be further segmented by management aspect, such as strategic planning aids, workflow management utilities, record-keeping systems, personnel administration resources, analytical engines, and performance monitoring apparatuses. A functional breakdown often highlights these broad areas:

Tools dedicated to data ingress and integrity verification across all departments. Utilities focused on oversight and refinement of organizational workflows. Systems for aggregating information and supporting executive judgments. Modern business tools have undergone a profound technological transformation in the last decade, driven by rapid technological advancement, making the selection of optimal tools for a given corporate context increasingly complex. This complexity stems from the relentless pursuit of cost reduction and revenue growth, the imperative to deeply comprehend client requirements, and the challenge of delivering requisite products exactly as demanded. Within this dynamic environment, leadership must adopt a strategic viewpoint regarding business management solutions, rather than merely adopting the newest available technology. Misapplication, often involving the unadjusted deployment of standard tools, risks destabilizing operations. Consequently, business management solutions must be chosen with deliberation and subsequently tailored precisely to the entity's specific operational requirements, reversing the common practice.

== Most Popular Selections == In 2013, a comprehensive study by Bain & Company illuminated the global deployment patterns of business tools, reflecting how their resultant value propositions align with regional demands, factoring in economic downturns and corporate market positioning. The leading ten categories identified were:

Strategic planning frameworks Client relationship management platforms Personnel morale assessment mechanisms Comparative performance analysis (Benchmarking) Integrated performance measurement (Balanced Scorecard) Core capability identification External resource deployment (Outsourcing) Organizational transition management programs Logistics and material flow oversight (Supply Chain Management) Defining corporate purpose and vision statements Customer base division analysis (Market Segmentation) Comprehensive quality improvement methodologies (Total Quality Management)

== Corporate Software Applications == Software, or an integrated set of computational programs designed for organizational personnel, is termed business software (or a business application). These applications are deployed to augment productivity metrics, quantitatively assess performance results, and execute numerous other corporate functions with high precision. The evolution proceeded from rudimentary Management Information Systems (MIS) to comprehensive Enterprise Resource Planning (ERP) suites. Subsequently, Customer Relationship Management (CRM) capabilities were integrated, leading the entire package into the domain of cloud-based enterprise management solutions. While a tangible link exists between Information Technology investments and organizational success metrics, two critical factors determine value addition: the proficiency of the implementation process and the judicious selection and customization of the required tools.

See Also

`