Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents
About
MCP server to generate design systems, tokens, and provide Figma layout information to AI coding agents like Cursor
Details
- License
- MIT
Explore
- 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 AgentsCommand (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
From the repository
Your AI coding client (like Cursor) can be configured to use this MCP server. Add the following to your client's MCP server configuration file, replacing YOUR-KEY with your Figma API key.
> 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.
To compare design tokens between versions: "Compare the design tokens between [Figma link 1] and [Figma link 2] using the 'Figma MCP Server by Bao To'." The agent should call the compare_design_tokens tool.
To validate design system compliance: "Validate the design system compliance for [Figma link] using the 'Figma MCP Server by Bao To'." The agent should call the validate_design_system tool.
To check accessibility compliance: "Check the accessibility compliance for [Figma link] using the 'Figma MCP Server by Bao To'." The agent should call the check_accessibility tool.
To migrate tokens to different formats: "Convert the design tokens from [Figma link] to Tailwind format using the 'Figma MCP Server by Bao To'." The agent should call the migrate_tokens tool with the desired target format.
To check design-code sync: "Check if the design tokens from [Figma link] are in sync with my code tokens file at [file path] using the 'Figma MCP Server by Bao To'."* The agent should call the check_design_code_sync tool.
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.
- 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
Design Token Comparison (compare_design_tokens):
Compare design tokens between different Figma files or versions
Identifies added, removed, and modified tokens with detailed change tracking
Perfect for design system version control and migration planning
Outputs structured comparison reports for team collaboration
Design System Validation (validate_design_system):
Validates design tokens against design system best practices and rules
Checks color naming conventions, typography scale consistency, spacing patterns
Identifies potential issues and inconsistencies before they reach production
Provides actionable recommendations for design system improvements
Accessibility Compliance Checker (check_accessibility):
Analyzes design tokens for accessibility compliance issues
Checks text sizes, color contrasts, touch target sizes
Provides specific suggestions for WCAG compliance improvements
Essential for building inclusive, accessible digital products
Multi-Format Token Migration (migrate_tokens):
Convert design tokens to popular formats: Tailwind, CSS Variables, Style Dictionary, Figma Tokens
Seamless integration with existing development workflows and tools
Maintains token relationships and semantic meaning across formats
Supports batch conversion for large design systems
Design-Code Sync Checker (check_design_code_sync):
Compare Figma design tokens with your actual codebase tokens
Identifies discrepancies between design specifications and implementation
Supports JSON, JavaScript, and TypeScript token file formats
Helps maintain perfect alignment between design and development
To compare design tokens between versions: "Compare the design tokens between [Figma link 1] and [Figma link 2] using the 'Figma MCP Server by Bao To'." The agent should call the compare_design_tokens tool.
To validate design system compliance: "Validate the design system compliance for [Figma link] using the 'Figma MCP Server by Bao To'." The agent should call the validate_design_system tool.
To check accessibility compliance: "Check the accessibility compliance for [Figma link] using the 'Figma MCP Server by Bao To'." The agent should call the check_accessibility tool.
To migrate tokens to different formats: "Convert the design tokens from [Figma link] to Tailwind format using the 'Figma MCP Server by Bao To'." The agent should call the migrate_tokens tool with the desired target format.
To check design-code sync: "Check if the design tokens from [Figma link] are in sync with my code tokens file at [file path] using the 'Figma MCP Server by Bao To'." The agent should call the check_design_code_sync tool.
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">
</a>
<a href="https://github.com/tothienbao6a0/Figma-Context-MCP/blob/main/LICENSE">
</a>
<!-- Link to your Discord or social if you have one, otherwise remove -->
<!-- <a href="https://framelink.ai/discord">
</a> -->
<br />
<!-- Link to your Twitter or social if you have one, otherwise remove -->
<!-- <a href="https://twitter.com/glipsman">
</a> -->
</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 specificationAI-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 practicesDesign 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 TokensDesign 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 implementationAvailable 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
…
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
