claude-talk-to-figma-mcp  by arinspunk

AI-powered Figma design automation

Created 9 months ago
290 stars

Top 91.0% on SourcePulse

GitHubView on GitHub
Project Summary

This project provides a Model Context Protocol (MCP) server that bridges AI assistants like Claude Desktop and Cursor with Figma, enabling direct AI-driven design manipulation. It targets designers and developers seeking to leverage AI for accelerated and enhanced UI/UX design workflows, offering capabilities from element creation to complex style modifications.

How It Works

The system employs a layered architecture: an MCP server acts as the AI's interface, translating natural language design requests into commands. These commands are routed via a WebSocket server to a dedicated Figma plugin, which executes them directly within the Figma canvas. This approach facilitates real-time, bidirectional communication, allowing AI agents to analyze designs, create elements, modify properties, and manage components with high fidelity.

Quick Start & Requirements

  • Prerequisites: Claude Desktop or Cursor, Figma Desktop, Bun runtime.
  • Installation: Clone the repository, run bun install, then build using bun run build (macOS/Linux) or bun run build:win (Windows).
  • AI Client Configuration:
    • Claude Desktop: Install via the .dxt package from releases or run bun run configure-claude.
    • Cursor: Add the provided mcp.json configuration to Cursor's settings.
  • Figma Plugin Setup: Import src/claude_mcp_plugin/manifest.json into Figma's development plugins.
  • Connection: Start the server with bun socket, then connect the Figma plugin and prompt the AI with "Talk to Figma, channel {channel-ID}".
  • DXT Package: Offers a simplified 2-5 minute setup for Claude Desktop users.

Highlighted Details

  • Extensive Command Set: Supports document analysis, element creation (shapes, text, frames), style modification (colors, effects, auto-layout), advanced text manipulation, and component integration with local and team libraries.
  • AI-Assisted Design: Enables prompts like "Create a dashboard with a sidebar..." or "Redesign this button component..." for rapid UI development.
  • DXT Package Support: Streamlined, one-click installation for Claude Desktop users, significantly reducing setup friction.
  • Automated Distribution: GitHub Actions automate the generation and upload of DXT packages for releases.

Maintenance & Community

Key contributions include DXT package support, CI/CD automation, and testing improvements by Taylor Smits, alongside build script fixes by easyhak. No explicit community channels (Discord, Slack) or roadmap links are provided in the README.

Licensing & Compatibility

The project is released under the MIT License, which permits commercial use and integration into closed-source projects without significant restrictions.

Limitations & Caveats

Performance may degrade with very large Figma documents, potentially leading to slow responses or increased memory usage. Some team fonts might require manual loading within Figma. The project relies on specific versions of AI clients and the Bun runtime.

Health Check
Last Commit

5 months ago

Responsiveness

Inactive

Pull Requests (30d)
7
Issues (30d)
4
Star History
32 stars in the last 30 days

Explore Similar Projects

Feedback? Help us improve.