"Guides and Tools for Converting Figma Designs to Code" matching MCP servers:

Transform Figma designs into pixel-perfect React + Tailwind components using the Model Context Protocol.

An MCP server that integrates AI agents with Figma, enabling reading and programmatic modification of designs.

Enables conversion of Figma designs into frontend code (React, Vue, HTML, etc.) with high fidelity, including design tokens, assets, and responsive layout. Integrates with AI editors via MCP for a seamless design-to-code workflow.

Enables AI agents like Claude to interact with Figma designs through 50+ tools for creating, styling, and manipulating design elements, components, and variables via a WebSocket relay and Figma plugin.

Converts a Figma file into a React project using Ant Design, AG Grid, ApexCharts, and Tailwind CSS, with optional export of mobile screens as a React Native (Expo) app.

Enables Cursor AI to read and modify Figma designs programmatically via the Model Context Protocol.

A comprehensive MCP server for Vue component development and Figma design restoration, featuring snapDOM-powered screenshots, pixel-perfect visual comparison, and automated SVG optimization.

This MCP server lets AI agents connect to Figma to read, analyze, create, and modify designs, including elements, styles, assets, and code generation. It works with free Figma accounts and supports parallel multi-agent use across MCP-compatible clients.

Enables AI agents to read, inspect, and edit Figma files through a Model Context Protocol server with 107 tools, visual snapshots, fidelity tools, and optional REST API access.

A runtime-free MCP server that converts source code into AST🌲, regardless of language.

An MCP server that enables AI assistants to interact with Figma designs for tasks like reading document info, creating elements, and managing auto layouts. It facilitates real-time design automation via a custom Figma plugin and WebSocket server integration.

Enables browser automation (navigate, screenshot, click, type, etc.) for Claude Code via MCP protocol, with a Chrome extension for configuration.

MCP server that lets you drive Claude Code sessions hands-free by voice from any MCP client, enabling remote models to send prompts, monitor progress, and get results read back.

Extracts SVG icons from Figma and generates React TSX icon components automatically, enabling AI assistants like GitHub Copilot and Claude to manage icon workflows.

MCP server that routes Claude Desktop chat into Claude Code, enabling headless execution and terminal handoff with session continuity.

An autonomous MCP server that uses the Claude Code CLI to solve coding problems without permission prompts.

Enables AI agents to read and modify Figma designs programmatically through WebSocket communication, supporting document manipulation, styling, text replacement, and component management.

Enables Claude Desktop and other AI tools to interact directly with Figma, allowing for powerful AI-assisted design capabilities through natural language commands.

Enables file reading with pagination and regex-based code search across a codebase using grep.

MCP server providing code review, auto-fix, test running, linting, formatting, and refactor suggestions for Claude Code.