Figma-Context-MCP Documentation

Technical Documentation: GLips/Figma-Context-MCP

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

[See quickstart instructions →](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme)

Demo Copy Chapter

Watch a demo of building a UI in Cursor with Figma design data

How it works Copy Chapter

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 Cursor to do something with the Figma file—e.g. implement the design.
4. Cursor will fetch the relevant metadata from Figma and use it to write your code.

This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.

Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.

Getting Started Copy Chapter

Many code editors and other AI clients use a configuration file to manage MCP servers.

The figma-developer-mcp server can be configured by adding the following to your configuration file.

NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.

MacOS / Linux Copy Section

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

Windows Copy Section

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

Or you can set FIGMA_API_KEY and PORT in the env field.

If you need more information on how to configure the Framelink MCP for Figma, see the Framelink docs.

Star History Copy Chapter

Learn More Copy Chapter

The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site.

Overview (`src/extractors/README.md`) Copy Section

Flexible Figma Data Extractors

This module provides a flexible, single-pass system for extracting data from Figma design files. It allows you to compose different extractors based on your specific needs, making it perfect for different LLM use cases where you want to optimize context window usage.

Architecture Copy Chapter

The system is built in clean layers:

1. Strategy Layer: Define what you want to extract
2. Traversal Layer: Single-pass tree walking with configurable extractors
3. Extraction Layer: Pure functions that transform individual node data

Basic Usage Copy Chapter

import { extractFromDesign, allExtractors, layoutAndText, contentOnly } from "figma-mcp/extractors";

// Extract everything (equivalent to current parseNode)
const fullData = extractFromDesign(nodes, allExtractors);

// Extract only layout + text for content planning
const layoutData = extractFromDesign(nodes, layoutAndText, {
  maxDepth: 3,
});

// Extract only text content for copy audits
const textData = extractFromDesign(nodes, contentOnly, {
  nodeFilter: (node) => node.type === "TEXT",
});

Built-in Extractors Copy Chapter

Individual Extractors Copy Section

• layoutExtractor - Layout properties (positioning, sizing, flex properties)
• textExtractor - Text content and typography styles
• visualsExtractor - Visual appearance (fills, strokes, effects, opacity, borders)
• componentExtractor - Component instance data

Convenience Combinations Copy Section

• allExtractors - Everything (replicates current behavior)
• layoutAndText - Layout + text (good for content analysis)
• contentOnly - Text only (good for copy extraction)
• visualsOnly - Visual styles only (good for design systems)
• layoutOnly - Layout only (good for structure analysis)

Creating Custom Extractors Copy Chapter

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]);

Filtering and Options Copy Chapter

// Limit traversal depth
const shallowData = extractFromDesign(nodes, allExtractors, {
  maxDepth: 2,
});

// Filter to specific node types
const frameData = extractFromDesign(nodes, layoutAndText, {
  nodeFilter: (node) => ["FRAME", "GROUP"].includes(node.type),
});

// Custom filtering logic
const buttonData = extractFromDesign(nodes, allExtractors, {
  nodeFilter: (node) => node.name.toLowerCase().includes("button"),
});

LLM Context Optimization Copy Chapter

The flexible system is designed for different LLM use cases:

// For large designs - extract incrementally
function extractForLLM(nodes, phase) {
  switch (phase) {
    case "structure":
      return extractFromDesign(nodes, layoutOnly, { maxDepth: 3 });

    case "content":
      return extractFromDesign(nodes, contentOnly);

    case "styling":
      return extractFromDesign(nodes, visualsOnly, { maxDepth: 2 });

    case "full":
      return extractFromDesign(nodes, allExtractors);
  }
}

Benefits Copy Chapter

1. Single Tree Walk - Efficient processing, no matter how many extractors
2. Composable - Mix and match extractors for your specific needs
3. Extensible - Easy to add custom extractors for domain-specific logic
4. Type Safe - Full TypeScript support with proper inference
5. Context Optimized - Perfect for LLM context window management
6. Backward Compatible - Works alongside existing parsing logic

Migration Path Copy Chapter

The new system works alongside the current parseNode function. You can:

1. Start using the new extractors for new use cases
2. Gradually migrate existing functionality
3. Keep the current API for general-purpose parsing

The allExtractors combination provides equivalent functionality to the current parseNode behavior.

--- METRICS ---

• Files Extracted: 2
• Estimated Token Budget: ~2059 tokens
• Canonical Reference: https://codewiki.google/github.com/GLips/Figma-Context-MCP