Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents

by tothienbao6a0

29 stars

503 downloads

Not rated

GitHub Website

Media
AI

About

MCP server to generate design systems, tokens, and provide Figma layout information to AI coding agents like Cursor

Details

Author: tothienbao6a0
GitHub stars: 29
Downloads: 503
Categories: Media, AI

- Component intelligence: variant analysis, smart props, and atomic design classification.
- Design token extraction: colors, typography, spacing, effects in multiple formats.
- Automated WCAG accessibility checks with real contrast calculations.
- Design system documentation generation with component examples.
- Version comparison, validation, and design-code sync checking.
- Multi-format token migration: JSON, CSS, Tailwind, Style Dictionary, Figma Tokens.

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

From the repository

Install the npm package @tothienbao6a0/figma-mcp-server and configure your AI client to use it. Then paste a Figma file link in your IDE’s chat and ask the AI agent to implement the design, generate tokens, or create documentation. The server fetches and simplifies the relevant Figma metadata automatically.

`get_figma_data`

When the nodeId cannot be obtained, obtain the layout information about the entire Figma file

`download_figma_images`

Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes

`get_figma_variables`

Retrieves all variables and variable collections from a Figma file. Variables are different from design tokens - they are Figma's dynamic values system that can store colors, numbers, strings, and booleans with different modes/themes.

`generate_design_tokens`

Extracts design tokens (colors, typography, spacing, effects) from a Figma file and saves them as a JSON file.

`generate_design_system_doc`

Generates a comprehensive set of Markdown documents detailing the design system from a Figma file into a specified directory.

`compare_design_tokens`

Compare design tokens between two Figma files or token sets to identify changes, additions, and removals.

`validate_design_system`

Validate design tokens against design system best practices and rules.

`check_accessibility`

Check design tokens for accessibility compliance issues (contrast, text sizes, etc.).

`migrate_tokens`

Convert design tokens to different formats (Tailwind, CSS Variables, Style Dictionary, Figma Tokens).

`check_design_code_sync`

Compare Figma design tokens with code tokens to identify sync issues between design and implementation.

`analyze_figma_components`

Analyzes Figma components to understand structure, variants, and relationships for intelligent AI-driven code generation. This tool helps AI agents understand component semantics, props, variants, and implementation patterns.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "figma mcp by bao to   generate design systems & tokens in repos quickly for ai agents": {
            "Figma MCP Server by Bao To": {
                "command": "npx",
                "args": [
                    "-y",
                    "@tothienbao6a0/figma-mcp-server",
                    "--figma-api-key=YOUR-KEY",
                    "--stdio"
                ]
            }
        }
    }
}

McpServers

{
    "Figma MCP Server by Bao To": {
        "command": "npx",
        "args": [
            "-y",
            "@tothienbao6a0/figma-mcp-server",
            "--figma-api-key=YOUR-KEY",
            "--stdio"
        ]
    }
}

<div align="center">
<h1>Figma MCP Server by Bao To</h1>
<h2>Pull Component, Frames, Design Systems from Figma for Contextual AI-Powered Development</h2>
<p>
The most advanced Figma Model Context Protocol (MCP) server for extracting design systems, analyzing components, and maintaining design-code consistency. Built specifically for AI agents and modern design workflows.
</p>
<p>
🌐 Available in:
<a href="README.md">English</a> |
<a href="README.ko.md">한국어 (Korean)</a> |
<a href="README.ja.md">日本語 (Japanese)</a> |
<a href="README.zh.md">中文 (Chinese)</a> |
<a href="README.es.md">Español (Spanish)</a> |
<a href="README.vi.md">Tiếng Việt (Vietnamese)</a> |
<a href="README.fr.md">Français (French)</a>
</p>
<h3>From Figma files to comprehensive design systems and semantic tokens in one command.<br/>Complete with documentation, accessibility compliance, and component intelligence.</h3>
<a href="https://npmcharts.com/compare/@tothienbao6a0/figma-mcp-server?interval=30">
weekly downloads
</a>
<a href="https://github.com/tothienbao6a0/Figma-Context-MCP/blob/main/LICENSE">
MIT License
</a>


<br />


</div>

<br/>

> Note: This server is a fork of the original Framelink Figma MCP server, building upon its foundation to offer enhanced capabilities for AI-driven design workflows. We acknowledge and appreciate the foundational work of the original Framelink team.

What Makes This Different

This isn't just another Figma data extractor. It's an intelligent design system generation, analysis and documentation platform that provides deep insights into your Figma files:

Comprehensive Design System Documentation Generation

- Unique End-to-End Solution: The only MCP that automatically generates rich, multi-faceted design system documentation from a Figma link. This includes component deep-dives, interactive overviews, validation reports, accessibility checks, and token specifications, all intelligently integrated. - Living Design System Hub: Transforms static Figma files into a dynamic, explorable, and maintainable design system knowledge base.

Component Intelligence

- Semantic Understanding: Analyzes Figma components to understand their structure, variants, and relationships - Smart Props Inference: Automatically detects component properties and maps them to TypeScript interfaces - Atomic Design Classification: Organizes components into atoms, molecules, organisms for scalable architecture - Implementation Readiness: Tells you which components are ready to build vs. need more specification

AI-Optimized Workflows & Developer Experience

- Perfect for AI Agents: Cursor, Claude, and other AI tools get semantic component data instead of raw JSON - One-Command Setup: From Figma link to complete design system documentation and tokens - Design-Code Sync: Automated checking to ensure design and implementation stay aligned - Accessibility Built-in: WCAG compliance checking and proper ARIA roles included automatically - Streamlined Operations: From Figma link to a full suite of design system assets – tokens, comprehensive documentation, and validation reports – with minimal effort.

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server, Figma MCP Server by Bao To.

When Cursor has access to Figma design data, it can be significantly better at implementing designs accurately compared to alternative approaches like pasting screenshots.

Demo

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

How it works

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 your AI agent to do something with the Figma file—e.g. implement the design.
4. The AI agent, configured to use Figma MCP Server by Bao To, will fetch the relevant metadata from Figma via this server and use it to write your code.

This MCP server is designed to simplify and translate responses from the Figma API so that only the most relevant layout and styling information is provided to the AI model.

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

Key Features

AI-Driven Development

- Component Intelligence: Understands Figma component structure, variants, and relationships - Atomic Design Classification: Categorizes components into atoms, molecules, organisms - Smart Props Inference: Analyzes component variants to understand component properties - Accessibility Integration: Identifies accessibility requirements and best practices

Design Token Extraction

- Complete Token Analysis: Extract colors, typography, spacing, border radius, and effects - Smart Categorization: Automatically groups related tokens (primary colors, text sizes, etc.) - Deduced Variables: Enterprise Variables API workaround for non-Enterprise accounts - Multiple Export Formats: JSON, CSS Variables, Tailwind, Style Dictionary, Figma Tokens

Design System Tools

- Comprehensive Documentation: Generate design system docs with component examples - Version Comparison: Track changes between design system versions - Validation & Governance: Check consistency and adherence to best practices - WCAG Compliance: Real accessibility analysis with proper contrast calculations - Design-Code Sync: Ensure design tokens match code implementation

Available Tools

Design Token Extraction

- get_figma_data - Extract complete Figma file structure and design data - download_figma_images - Download images, icons, and graphics from Figma - get_figma_variables - Get Figma Variables (IMPORTANT: Enterprise plans only) - generate_design_tokens - Extract and structure design tokens (colors, typography, spacing, effects)

Component Intelligence

- analyze_figma_components - NEW! Intelligent component analysis for AI-driven development

📚 Design System Management

- generate_design_system_doc - Generate comprehensive design system documentation - compare_design_tokens - Compare design tokens between files or versions - validate_design_system - Validate design system consistency and best practices - check_accessibility - Check WCAG accessibility compliance with real contrast calculations - migrate_tokens - Convert tokens to different formats (Tailwind, CSS Variables, Style Dictionary) - check_design_code_sync - Compare design tokens with code implementation

🎯 NEW: Advanced Design System Tools

…

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

get_figma_data

download_figma_images

get_figma_variables

generate_design_tokens

generate_design_system_doc

compare_design_tokens

validate_design_system

check_accessibility

migrate_tokens

check_design_code_sync

analyze_figma_components

Claude Desktop / Cursor

McpServers

What Makes This Different

Comprehensive Design System Documentation Generation

Component Intelligence

AI-Optimized Workflows & Developer Experience

Demo

How it works

Key Features

AI-Driven Development

Design Token Extraction

Design System Tools

Available Tools

Design Token Extraction

Component Intelligence

📚 Design System Management

🎯 NEW: Advanced Design System Tools

Install

More like this

Google Maps

Context 7

1Panel

🔎 GPT Researcher

Serena

FastMCP v2 🚀

`get_figma_data`

`download_figma_images`

`get_figma_variables`

`generate_design_tokens`

`generate_design_system_doc`

`compare_design_tokens`

`validate_design_system`

`check_accessibility`

`migrate_tokens`

`check_design_code_sync`

`analyze_figma_components`