Figma Mcp Server By Jamess Mark
About
MCP server to generate design systems, tokens, and provide Figma layout information to AI coding agents like Cursor
Details
- Author
- Jamessmark
- GitHub stars
- 1
- Downloads
- 243
- Categories
- Media
Jump to
- Component Intelligence with semantic understanding and smart props inference
- Atomic design classification (atoms, molecules, organisms)
- Complete design token extraction (colors, typography, spacing, effects)
- Design system documentation generation with component examples
- Version comparison and validation of design system consistency
- WCAG accessibility compliance checking with contrast calculations
- Multi‑format token migration (Tailwind, CSS Variables, Style Dictionary)
- Design‑code sync checker to maintain alignment
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 Server By Jamess MarkCommand (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
Install the npm package (@tothienbao6a0/figma-mcp-server) and configure it in your MCP‑compatible client (e.g., Cursor). In the chat, paste a Figma file, frame, or group link, then instruct your AI agent to perform an action such as implementing the design or generating design tokens. The server fetches relevant metadata from the Figma API and returns structured, context‑optimised data.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"figma mcp server by jamess mark": {
"Figma MCP Server by Jamess mark": {
"command": "npx",
"args": [
"-y",
"@Jamessmark/figma-mcp-server",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}
}McpServers
{
"Figma MCP Server by Jamess mark": {
"command": "npx",
"args": [
"-y",
"@Jamessmark/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.
