A
securityF
licenseA
qualityA Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
Last updated -
18
34
1
Transforms Figma designs into Angular code with support for standalone components, Signals, modern templates, and TypeScript.
Automatically generates CSS from Figma design properties including padding, margins, borders, and effects.
Converts Figma designs to Electron applications with security hardening, IPC patterns, and native integration.
Extracts design data from Figma, including layout properties, styling, structure, and responsive design specifications. Enables accessing designer comments, downloading design assets, and analyzing designs for code generation.
Converts Figma designs into React code with TypeScript, Hooks, Custom Hooks, and performance optimization support.
Converts Figma designs to Svelte code with support for Svelte 5 runes, TypeScript, SvelteKit, and Stores.
Supports downloading SVG assets from Figma designs with original export settings preserved.
Converts Figma designs to Swift code with support for SwiftUI patterns, state management, MVVM, and accessibility features.
Transforms Figma designs into Tauri applications with Rust commands, event system, security features, and WebView implementation.
Provides TypeScript support for various frameworks when converting Figma designs to code.
Transforms Figma designs into UIKit implementations with modern concurrency, SwiftUI interoperability, and Auto Layout support.
Figma MCP PRO
Professional Model Context Protocol (MCP) server for AI-optimized Figma design analysis. Clean 5-step workflow for comprehensive design-to-code conversion with smart comment processing and asset downloads.
🚀 Key Features
- 5-Step Workflow: Framework selection → Design data → Comments → Assets → Reference analysis
- AI-Optimized: Structured data specifically formatted for AI code generation
- 10 Framework Support: React, Vue, Angular, Svelte, HTML/CSS/JS, SwiftUI, UIKit, Electron, Tauri, NW.js
- Smart Comments: Coordinate-based matching of designer comments to UI elements
- Asset Downloads: Batch download with original Figma export settings
- CSS Generation: Automatic CSS from Figma properties (padding, margins, borders, effects)
📦 Installation
⚙️ Quick Setup
1. Get Your Figma API Key
Get your API token from Figma Account Settings → Personal access tokens
2. Copy & Paste MCP Configuration
📋 Use the copy button on the code block below, then replace your-api-key-here with your actual API key:
Configuration File Locations:
- Claude Desktop:
claude_desktop_config.json - Claude Code (VS Code): VS Code MCP settings
- Cursor, Windsurf, TRAE: Application MCP configuration settings
📝 Tool Reference
Core Tools
show_frameworks
Shows available frameworks. Call first to choose target framework.
get_figma_data
Extracts AI-optimized design data with framework-specific processing.
- Input: Figma URL + framework
- Output: Design structure, CSS properties, layout data
process_design_comments
Matches designer comments to design elements with AI implementation prompts.
- Input: Figma URL + framework
- Output: Comment-to-element mapping with actionable instructions
download_design_assets
Downloads export-ready assets with original Figma settings + reference image.
- Input: Figma URL + local path
- Output: Asset files + reference.png for visual context
check_reference
Analyzes reference.png for design understanding and development guidance.
- Input: Assets folder path + framework
- Output: Design analysis and framework-specific development recommendations
🎯 What You Get
Design Data
- Layout: Padding, margins, gaps, auto-layout properties
- Styling: Colors, borders, shadows, effects, typography
- Structure: Component hierarchy, semantic roles
- Responsive: Flexible sizing, constraints, breakpoints
Smart Comments
- Coordinate Matching: Comments linked to specific design elements
- AI Instructions: "Add hover animation to Button component"
- Implementation Context: Element details + positioning
Asset Downloads
- Export Settings: Respects Figma's configured export settings
- Original Names: Uses actual node names as filenames
- Visual Reference: reference.png shows complete design context
- Multiple Formats: SVG, PNG, JPG, PDF support
🌟 Framework Optimizations
- React: TypeScript, Hooks, Custom Hooks, Performance optimization
- Vue: Composition API, TypeScript, Pinia stores, Composables
- Angular: Standalone components, Signals, Modern templates, TypeScript
- Svelte: Svelte 5 runes, TypeScript, SvelteKit, Stores
- HTML/CSS/JS: Design tokens, Modern CSS, Accessibility-first
- SwiftUI: State management, MVVM, Accessibility, Modern patterns
- UIKit: Modern concurrency, SwiftUI interop, Auto Layout
- Electron: Security hardening, IPC patterns, Native integration
- Tauri: Rust commands, Event system, Security, WebView
- NW.js: Unified context, Node.js integration, Chromium APIs
📄 License
MIT License
🆘 Support
- Issues: GitHub Issues
- NPM: figma-mcp-pro
This server cannot be installed
Professional Model Context Protocol server that enables AI-optimized Figma design analysis and comprehensive design-to-code conversion through a structured 5-step workflow.
Related MCP Servers
- -securityFlicense-qualityA Model Context Protocol server that integrates with Figma's API, allowing interaction with Figma files, comments, components, projects, and webhook management.Last updated -997JavaScript
- -securityAlicense-qualityA Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.Last updated -1246TypeScriptMIT License
- AsecurityAlicenseAqualityA Model Context Protocol server for interacting with the Figma API that handles large Figma files efficiently through memory-aware chunking and pagination capabilities.Last updated -72TypeScriptMIT License