TalkToFigma MCP: An Open-Source Tool That Lets AI Directly Manipulate Figma Designs

What Is TalkToFigma

TalkToFigma is an open-source MCP (Model Context Protocol) integration project by Grab (Southeast Asia's super app). It creates a bidirectional channel between AI agents like Cursor and Claude Code and the Figma design tool. With this solution, AI can not only read layer structures and style parameters from Figma design files but also programmatically modify design content directly.

Grab is Southeast Asia's largest super app platform, headquartered in Singapore, with business operations spanning ride-hailing, food delivery, payments, finance, and more, serving hundreds of millions of users across over 8 countries. As a tech company with an enormous product portfolio, Grab's internal design-development collaboration needs are extremely complex — dozens of product lines, multi-language and multi-market interface adaptations, frequent A/B testing iterations — all of which demand exceptionally high design engineering efficiency. TalkToFigma was born from Grab's internal practices as a refined solution, which they later chose to open-source for the community.

The project has already earned over 6,700 stars and 727 forks on GitHub, generating widespread attention in the design engineering space.

Core Capabilities: Bidirectional Communication Between AI and Figma

Precise Design Information Retrieval

TalkToFigma enables AI agents to deeply parse the design structure of Figma files. Specifically, AI can access:

• Layer hierarchy: Complete node tree structure
• Component properties: Dimensions, positions, constraints
• Visual parameters: Color values, font sizes, spacing, border radius, etc.
• Design Tokens: Style variables and theme configurations

Design Tokens are atomic-level variables in a design system that store specific values for visual properties like colors, font sizes, spacing, border radius, and shadows. For example, a Token named color-primary might correspond to #1A73E8 in a light theme and #8AB4F8 in a dark theme. The core value of Tokens lies in achieving a "single source of truth" — when a designer modifies a Token value in Figma, the code on the development side can sync accordingly, ensuring design and implementation always stay consistent. Currently, widely-used Token specifications include the W3C Design Tokens standard and toolchains like Style Dictionary. TalkToFigma's ability to read and manipulate Tokens in Figma means AI can directly participate in managing the core data of a design system.

This means that in design-to-code scenarios, AI no longer relies on screenshot recognition or manual descriptions — it directly obtains precise design data.

Programmatic Design File Modifications

Even more noteworthy is the reverse operation capability — AI agents can create elements, adjust layouts, and batch-modify styles in Figma. Designers only need to describe their requirements in natural language, and AI will execute specific operations on the Figma canvas.

For example, you can tell Cursor: "Deepen the shadow on this card component and change the border radius to 12px," and AI will complete the modification directly in Figma without any manual operation.

Technical Architecture: How MCP Protocol Connects AI and Figma

MCP Protocol Overview

MCP (Model Context Protocol) is an open protocol introduced by Anthropic to standardize interactions between AI models and external tools. Its design philosophy is similar to HTTP in the web domain — establishing a unified communication standard for interactions between AI models, external tools, and data sources. Before MCP, every AI application that needed to connect with external tools required custom integration code, resulting in massive duplication of effort and a fragmented ecosystem.

MCP defines a standard client-server architecture: AI applications act as MCP clients to initiate requests, while external tools expose capabilities (called Tools) through MCP servers. This standardization allows a single MCP server to be called by multiple AI clients simultaneously, dramatically reducing integration costs. Currently, the MCP ecosystem covers hundreds of tool integrations including databases, file systems, browsers, and code repositories.

TalkToFigma leverages this protocol to package Figma's design operation capabilities as standardized interfaces that any MCP-compatible AI client can call.

TalkToFigma's Communication Architecture

In terms of implementation, TalkToFigma relies on Figma's Plugin API. As the world's most popular cloud-based design tool, Figma provides two main types of programming interfaces: the Plugin API, which allows running JavaScript code within the Figma client to directly manipulate design elements on the canvas; and the REST API, which supports reading file structures and exporting resources from external systems.

TalkToFigma runs a plugin within Figma as a "bridge," maintaining real-time communication with the local MCP server via WebSocket. When an AI agent issues an operation command, the MCP server forwards the command to the Figma plugin, which then calls Figma's internal API to execute the specific design operation. This architecture ensures real-time operation while fully leveraging the Figma Plugin API's complete control over canvas elements.

Currently Supported AI Clients

AI Tool	Type	Typical Use Case
Cursor	AI coding editor (based on VS Code)	Directly reference and manipulate Figma designs while coding
Claude Code	Command-line AI coding tool	Automated batch processing and scripted workflows

Cursor is the most talked-about AI-native code editor in recent years, built on the VS Code core with deeply integrated large language model capabilities. Unlike traditional code completion tools, Cursor supports multi-file context understanding, natural language instruction programming, and connecting to external tools via the MCP protocol. Claude Code is Anthropic's command-line AI coding tool, better suited for automation scripts and batch processing scenarios. Both tools natively support the MCP protocol, meaning they can seamlessly call the Figma operation capabilities provided by TalkToFigma, allowing developers to interact with design files directly from their coding environment without switching tool windows.

Thanks to the standardized MCP protocol, any future AI tool that supports the protocol can connect to Figma, offering excellent extensibility.

Practical Use Cases

Design-to-Code

In traditional workflows, front-end developers need to constantly switch between Figma and their editor, manually extracting color values, spacing, font sizes, and other parameters. With TalkToFigma, Cursor can directly read precise data from design files and generate front-end code with higher fidelity.

In front-end development, "pixel-perfect implementation" has always been a core pain point in design-development collaboration. In traditional workflows, developers need to use Figma's Inspect panel to extract CSS property values one by one, then manually write corresponding styles in code. This process is not only time-consuming but also error-prone — color space conversions, spacing calculations for responsive layouts, font rendering differences across platforms — all can cause discrepancies between the final implementation and the design file. While the industry already has design handoff tools like Zeplin and Locofy that attempt to solve this problem, most of them are one-way "design-to-code" converters lacking bidirectional interaction. TalkToFigma's value lies in AI being able to directly access Figma's structured design data (rather than pixel screenshots), eliminating information loss at the source.

For teams pursuing pixel-perfect implementation, this can save significant time spent on repeated comparisons and fine-tuning.

Batch Design Modifications

Designers encounter many repetitive operations in their daily work, such as:

• Changing all button border radii from 4px to 8px uniformly
• Switching an entire interface's primary color from blue to green
• Batch-adjusting padding for a specific type of component

These operations can be issued to AI via natural language commands and completed in Figma within seconds.

Design System Maintenance

Large teams maintaining design systems often face issues like component inconsistencies and outdated Token values. AI agents can automatically scan design files, check component specifications, batch-update Tokens, and even generate design documentation — taking over these tedious but important tasks.

Impact on Design-Development Collaboration

The trend behind TalkToFigma is: AI is evolving from "understanding content" to "operating tools."

This trend is known in the industry as Agentic AI or the AI Agent paradigm. Unlike traditional conversational AI, AI Agents have a complete capability loop of perceiving environments, making plans, calling tools, and executing actions. Since 2024, this paradigm has accelerated its real-world adoption: Anthropic launched the Computer Use feature allowing AI to directly operate desktop applications, OpenAI's GPT-4 supports Function Calling to interact with external systems, and Google's Gemini is also exploring multimodal tool invocation.

Previously, AI could only "guess" design intent by analyzing design screenshots or reading text descriptions. Now, it can directly connect to Figma's API layer, obtain structured data, and execute operations — achieving truly bidirectional interaction.

Looking further ahead, this heralds a new working model — AI agents chaining tools across design, development, testing, and other stages to form end-to-end automation pipelines. In the design-development domain, AI Agents can chain together Figma (design), GitHub (code management), Jira (project management), Vercel (deployment), and other tools to form an end-to-end automated pipeline from design files to live products. TalkToFigma is the critical link in this chain that connects the design stage. Grab's decision to open-source this project also indicates that leading tech companies are seriously investing in AI-driven product development workflows.

Summary

TalkToFigma breaks down the barriers between AI agents and Figma through the MCP protocol, enabling both design data retrieval and design file modifications to be automated by AI. Whether it's design-to-code, batch style adjustments, or daily design system maintenance, it provides a practical efficiency-boosting solution.

As the MCP ecosystem expands and more AI tools connect, this kind of "AI + design tool" integration is likely to become standard infrastructure for design-development collaboration. If your team uses both Figma and Cursor, TalkToFigma is worth trying sooner rather than later.