Framelink MCP for Figma

The extraction system is organized into three distinct layers to ensure efficiency and composability:

1. Strategy Layer: Where you define what you want to extract (e.g., choosing specific extractors).
2. Traversal Layer: A single-pass tree walking mechanism that visits nodes and applies the configured extractors.
3. Extraction Layer: Pure functions that perform the actual transformation of individual node data into the result object.

This architecture ensures that no matter how many extractors you use, the system only performs a single tree walk, making it highly efficient.

The Framelink MCP for Figma server provides AI-powered coding tools (like Cursor) with direct access to Figma design data. Instead of relying on screenshots, the agent can fetch precise layout and styling metadata.

Workflow:

1. Open your IDE's chat (e.g., agent mode in Cursor).
2. Paste a link to a Figma file, frame, or group.
3. Ask the agent to implement the design.
4. The agent uses the MCP server to fetch simplified, relevant metadata from the Figma API to write accurate code.

This process reduces context noise by translating raw Figma API responses into only the most relevant styling and layout information for the LLM.

To use the figma-developer-mcp server, you must add it to your MCP configuration file. You will need a Figma personal access token.

MacOS / Linux

Add the following to your configuration file:

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

Add the following to your configuration file:

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Alternative Configuration via Environment Variables

Instead of using command-line arguments, you can provide credentials via the env field in your configuration using:

• FIGMA_API_KEY
• PORT

The project uses a hierarchical resolution strategy to determine configuration values. This allows users to override settings easily without changing permanent environment variables.

Priority Order:

1. CLI Flags: Explicit arguments passed to the command line.
2. Environment Variables: Values found in the shell environment or loaded from a .env file.
3. Defaults: Hardcoded fallback values defined in the source code.

When getServerConfig is called, it also tracks the source (e.g., "cli", "env", or "default") for each setting, which is printed to the console in non-stdio mode to help with debugging.

The SimplifiedDesign interface represents the final, processed output of a Figma design extraction. It is a structured representation designed to be more compact and developer-friendly than the raw Figma API response.

Key components of SimplifiedDesign:

• nodes: An array of top-level SimplifiedNode objects.
• components & componentSets: Records of component definitions extracted from the design.
• globalVars: A collection of styles (text, fills, layout, strokes, effects) that are shared across the design.
• elements: A dictionary of deduplicated element bodies. To save space, if multiple nodes share the same visual properties, they are replaced by a template reference pointing to a key in this object (e.g., EL-xxxxxxxx).

You can extend the system by creating custom extractors that implement the ExtractorFn type. An extractor is a function that receives the current node, the result object (which you can mutate to add new properties), and a context object.

import type { ExtractorFn } from "figma-mcp/extractors";

// Custom extractor that identifies design system components
const designSystemExtractor: ExtractorFn = (node, result, context) => {
  if (node.name.startsWith("DS/")) {
    result.isDesignSystemComponent = true;
    result.dsCategory = node.name.split("/")[1];
  }
};

// Use it with other extractors
const data = extractFromDesign(nodes, [layoutExtractor, designSystemExtractor]);

The server handles proxying to api.figma.com based on the config.proxy value in ServerConfig:

Warning: If config.isStdioMode is true and imageDir is set to 'default', the server will warn via stderr that images will be saved in the server's current working directory. It is recommended to explicitly set IMAGE_DIR or pass --image-dir to avoid files being saved in unexpected locations (like an MCP client's installation directory).

When calling createServer, you can pass the following options to control the server's behavior:

type CreateServerOptions = {
  transport: ServerTransport; // "stdio" | "http"
  outputFormat?: OutputFormat;
  skipImageDownloads?: boolean;
  imageDir?: string;
};

The module provides several pre-defined extractors and convenience combinations for common use cases.

Individual Extractors

• layoutExtractor: Extracts layout properties like positioning, sizing, and flex properties.
• textExtractor: Extracts text content and typography styles.
• visualsExtractor: Extracts visual appearance including fills, strokes, effects, opacity, and borders.
• componentExtractor: Extracts component instance data.

Convenience Combinations

• allExtractors: Includes everything (replicates standard parseNode behavior).
• layoutAndText: Combines layout and text extraction.
• contentOnly: Extracts text content only.
• visualsOnly: Extracts visual styles only.
• layoutOnly: Extracts layout properties only.