@iflow-mcp/artemsvit-figma-mcp-pro 3.49.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Custom Figma MCP Server
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,126 @@
+[![MseeP.ai Security Assessment Badge](https://mseep.net/pr/artemsvit-figma-mcp-pro-badge.png)](https://mseep.ai/app/artemsvit-figma-mcp-pro)
+
+# Figma MCP PRO
+
+[![smithery badge](https://smithery.ai/badge/@artemsvit/figma-mcp-pro)](https://smithery.ai/server/@artemsvit/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
+
+### Installing via Smithery
+
+To install figma-mcp-pro for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@artemsvit/figma-mcp-pro):
+
+```bash
+npx -y @smithery/cli install @artemsvit/figma-mcp-pro --client claude
+```
+
+### Manual Installation
+```bash
+npm install -g figma-mcp-pro
+```
+
+## ⚙️ Quick Setup
+
+### 1. Get Your Figma API Key
+Get your API token from [Figma Account Settings](https://www.figma.com/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:
+
+```json
+{
+  "mcpServers": {
+    "Figma MCP PRO": {
+      "command": "npx",
+      "args": ["figma-mcp-pro@latest", "--figma-api-key", "your-api-key-here"],
+      "env": {
+        "DEBUG": "true"
+      }
+    }
+  }
+}
+```
+
+**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](https://github.com/artemsvit/Figma-MCP-Pro/issues)
+- **NPM**: [figma-mcp-pro](https://www.npmjs.com/package/figma-mcp-pro)

package/bin/figma-mcp-pro.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import { fileURLToPath, pathToFileURL } from 'url';
+import { dirname, join } from 'path';
+import { platform } from 'os';
+
+/**
+ * Universal cross-platform ES module importer
+ * Fixes Windows ESM URL scheme issues while maintaining compatibility
+ * with macOS, Linux, and Windows
+ */
+function universalImport(modulePath) {
+  // On Windows, absolute paths must be converted to file:// URLs for ES modules
+  // On macOS and Linux, this conversion is also safe and recommended
+  try {
+    const fileUrl = pathToFileURL(modulePath).href;
+    return import(fileUrl);
+  } catch (error) {
+    // Fallback: try direct import (for edge cases)
+    console.error(`[Universal Import] Primary import failed, trying fallback: ${error.message}`);
+    return import(modulePath);
+  }
+}
+
+// Universal __dirname equivalent for ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Cross-platform entry point resolution
+const entryPoint = join(__dirname, '../dist/index.js');
+
+console.error(`[Figma MCP Pro] Starting on ${platform()} platform`);
+console.error(`[Figma MCP Pro] Entry point: ${entryPoint}`);
+
+// Universal ES module import that works on all platforms
+universalImport(entryPoint)
+  .catch(error => {
+    console.error(`[Figma MCP Pro] Failed to start:`, error);
+    console.error(`[Figma MCP Pro] Platform: ${platform()}`);
+    console.error(`[Figma MCP Pro] Node version: ${process.version}`);
+    console.error(`[Figma MCP Pro] Entry point: ${entryPoint}`);
+    process.exit(1);
+  });