Design Context, Everywhere You Build | Figma Blog (opens in new tab)

Figma’s latest MCP server and Code Connect updates aim to make design-system and codebase context available wherever teams build. Remote MCP access connects Figma to IDEs, AI agents, and browser-based tools, while Figma Make integration exposes underlying prototype code. New in-app component mapping further links designs to production components, helping AI generate more consistent, production-aware code.

Remote Access to the Figma MCP Server

• The MCP server previously ran locally through Figma Dev Mode; it now supports remote access.
• Developers can connect Figma to IDEs, AI coding agents, and browser-based models without installing the Figma desktop app.
• Figma context can include responsive layouts, interaction details, design-system rules, and visual-program structure—not just static images.
• Integrations are available through Figma’s partner catalog, with support involving tools such as Android Studio, Replit, and Warp.
• Figma plans to expand the server’s functionality and partner ecosystem during and after its beta.
• Companies including Affirm and Coinbase report significantly faster development, with Affirm rebuilding major product flows in under two days.

Connecting Figma Make to Codebases

• The MCP server can now expose the underlying code in Figma Make files rather than only rendered prototypes.
• It indexes Make-file code so developers and AI agents can request specific files, reuse code, or reference its logic and design patterns.
• The feature is available through partners including Anthropic, Cursor, Windsurf, and VS Code.
• Figma is also working toward allowing partner MCP servers to connect into Figma Make.

Improved Component Mapping with Code Connect

• Code Connect links Figma components to their corresponding production components and usage guidelines.
• A new in-app mapping workflow lets users browse Figma components, select the correct code and file, and identify mapped or missing relationships.
• This complements the Code Connect CLI, which provides production-ready snippets and prop or variant mappings across frameworks.
• When combined with MCP, Code Connect gives AI agents both design context and production awareness, including component locations and usage rules.
• Figma’s internal evaluations and early customer testing showed more consistent code, faster file navigation, and better token efficiency.

Integration Reliability

• Figma is also introducing integration reviews and rate limits as it expands connections with external tools.
• These measures are intended to make the growing extensibility ecosystem more reliable.

Figma’s overall direction is to make design context portable and actionable across the development workflow. Teams can get the most value by combining remote MCP access for broad design understanding with Code Connect for accurate, production-ready component usage.