Figma Launches MCP Server Integration for Claude Code Prototypes.

Figma has updated its Model Context Protocol (MCP) server to enable direct integration with Anthropic's Claude Code editor. The update allows developers to push working prototypes from Claude Code straight into Figma canvases, where they can explore design variations without branching code or rebuilding components.

The integration addresses a common friction point in the design-to-development workflow. Previously, designers and developers working in parallel often struggled to sync their work, requiring manual handoffs and frequent rebuilds when exploring different design directions.

With the latest MCP server version, users can install the Figma plugin in Claude Code using /plugin install figma@claude-plugin-directory, then prompt Claude to send any page from a local web application directly into Figma. The system preserves the working prototype while allowing teams to iterate on visual design in Figma's canvas environment.

The MCP server acts as a bridge between Claude Code's development environment and Figma's design platform. When a developer prompts Claude to send a page to Figma, the server extracts the relevant HTML, CSS, and layout information from the local application and translates it into Figma-compatible layers and components.

This approach differs from screenshot-based tools or one-way code generators. The prototype remains live in Claude Code while its visual representation appears in Figma, enabling designers to modify colors, typography, spacing, and layout without touching the underlying codebase. Teams can compare multiple design directions side by side on the same canvas, then communicate specific changes back to developers.

Figma published documentation for connecting Claude Code to remote MCP servers, including authentication steps and configuration requirements. The setup process requires users to have both Claude Code and Figma accounts with appropriate permissions.

The announcement follows Figma's recent push into AI-assisted workflows, including voice-to-text and version history features in Make and updates to its vibe coding capabilities. The MCP server integration represents another step toward tighter coupling between AI coding environments and traditional design tools.

Other AI coding platforms like Cursor, Bolt, and Lovable have approached the design-to-code problem differently, typically generating code from design specifications rather than enabling bidirectional workflows. Figma's approach emphasizes collaboration between existing tools rather than replacing either designers or developers.

The Model Context Protocol itself, developed by Anthropic, provides a standardized way for AI assistants to interact with external data sources and tools. Figma's implementation extends this protocol to support design handoffs and iteration cycles.

The integration may reduce context switching for teams building products that require frequent design iteration. Developers can continue working in Claude Code while designers refine visual details in Figma, with both parties viewing the same prototype from different angles.

However, the workflow assumes teams are already using Claude Code for development and Figma for design. Organizations using alternative tools like Cursor, v0, or Replit for AI-assisted coding would need to adapt their toolchain to take advantage of the integration.

The update is available now for users with access to Claude Code and Figma. Installation requires running the plugin command in Claude Code and following the authentication flow in Figma's MCP server documentation.