On September 23, Figma officially launched its official remote MCP (Model Context Protocol) server. This innovative tool completely frees users from the need for the Figma client, allowing AI coding agents to seamlessly access design context. Whether in an IDE, browser, or mobile app, users can simply authorize and achieve high-fidelity conversion of design files into production-grade code. This update not only accelerates the process from prototype to product but also marks a deep integration between design systems and front-end development, leading the industry into a new era of "frictionless" collaboration.
Key Updates: Remote Access, Design Context at Your Fingertips
The core of the Figma MCP server lies in its standardized protocol support, allowing AI models to directly "read" semantic layer information from design files, rather than relying on screenshots or manual descriptions. The latest version introduces several major features:
Remote access without a client: Previously, users needed to install the Figma desktop application to run a local server. Now, all you need to do is add the server URL (https://127.0.1:3845/sse) in supported AI tools (such as Cursor, Claude Code, VS Code, or Windsurf), and complete OAuth authorization through a web page. You can then call design data anytime. This upgrade is especially suitable for distributed teams, avoiding the hassle of cross-device installations.
Seamless integration with Figma Make: The server supports extracting resources directly from Make files, transforming interactive prototypes into code-level assets. AI can automatically parse responsive layouts, design tokens, and interaction details to ensure generated code complies with product specifications.
Code Connect UI component mapping optimization: A new native mapping interface has been added, allowing users to associate design components with front-end code repositories directly within Figma. The higher the component adoption rate in a team's mature design system, the closer the AI-generated front-end code will be to 100% accuracy. For example, when inputting "implement this design as a React component," the AI can output complete code including variables, styles, and layout.
These features are standardized via the MCP protocol, ensuring that AI agents like GPT-5 Codex or Claude can "understand" the intent behind the design, rather than just replicating pixels. Early testing shows that development iteration time can be reduced by 60% to 80%.
How to Use: Three Steps to Let AI Instantly "Understand" Your Design
The integration process is simple and efficient, applicable to professional plan and above users:
1. Enable the server: Activate the Dev Mode MCP server in the Figma web app preferences, or use the remote mode directly.
2. Add to AI tools: Enter the Figma server configuration in the MCP settings of Cursor or Claude Code, and complete account authorization. Tools that support the SSE (Server-Sent Events) protocol are compatible.
3. Generate code: Paste the Figma link, and the AI will automatically extract component hierarchy, auto-layout rules, and design tokens, and output code in frameworks such as Tailwind or React with one click. Prompts like "optimize this layout for mobile" can further refine the output.
Note: Free plan users cannot access it yet. They need to upgrade to a professional or enterprise plan. Figma emphasized that the server meets SOC2 security standards, and user data is only used for context provision and is not involved in model training.
Market Impact: Accelerated AI Agent Ecosystem, Collaboration Efficiency Doubled
This update directly addresses the long-standing issue of misalignment between design and development. In the past, manually translating design files often took hours; now, the MCP server allows AI to act as a bridge, especially in projects with many components, where front-end developers can instantly generate high-fidelity code. Industry feedback shows that companies like Affirm have already used it to restructure their product processes, with development speed improving by "an order of magnitude."
Figma's move also strengthens the position of MCP in the AI toolchain. Integrated with Chrome DevTools MCP and Windsurf, it further builds an ecosystem where "design context is everywhere you build." In the future, Figma plans to expand to more code repository integrations and native browser support, pushing "vibe coding" (intuitive coding) into mainstream usage.
More info: https://www.figma.com/blog/design-context-everywhere-you-build/