Figma MCP Server | 4 Ways It Connects Design, Data, and Code
Figma has shared four practical ways its teams are using the Figma MCP Server to connect design context with AI agents. The examples cover updating presentation decks, generating FigJam boards from current company data, moving interactive designs between code and canvas, and using Figma Agent to refine screens created from production components.
Figma shares four practical uses for its MCP Server
Figma has expanded its MCP Server across Figma Slides, FigJam, Figma Make, and Figma Agent. This allows AI agents to use design context from Figma while working with information, code, presentations, and collaborative boards.
The server can now help create or update presentation decks, build FigJam boards from external data, move interactive designs between code and the Figma canvas, and export real assets from design files. Custom font support also helps generated materials remain closer to an organization's visual identity.
Updating living presentations in Figma Slides
Figma's first example involves an evergreen presentation covering the company's AI product launches. Instead of manually gathering every recent announcement, an agent was asked to collect information from sources such as Slack, Google Drive, blog posts, and release notes before suggesting updates and creating new slides.
The MCP Server and a Figma Slides skill applied the collected content to an existing presentation template. Figma says the output still required review, image replacements, and copy editing, but much of the initial content work was already complete.
Support for uploaded custom fonts also allowed the agent to use the correct typography instead of substituting web-safe alternatives. This can make AI-assisted presentations more useful for product, marketing, sales, and design teams that need to maintain consistent branding.
Generating FigJam boards from current project data
The second example focuses on preparing FigJam boards for product workshops. Figma describes a custom skill called /figjam-builder, which stores repeated workshop instructions so the user does not need to explain the desired board structure every time.
For a Figma Make launch workshop, an agent gathered project information from Slack, Asana, Notion, and Hex. It then used that context to generate a FigJam board containing the latest product vision, customer insights, analytics, and important decisions.
This gives teams a stronger starting point than an empty board. The facilitator can spend more time reviewing the structure and planning the discussion instead of manually collecting and formatting information from multiple sources.
Moving interactive designs between code and Figma Make
Figma's third example shows how the MCP Server can connect code with the design canvas through Figma Make. A product designer working on an audio editor brought an interactive preview back into Figma as editable design layers.
The imported screen was rebuilt using relevant components from the existing library. The designer then updated an audio clip component on the canvas, adding default, hover, and drag states according to the established design system.
After the visual changes were complete, the agent was asked to pull those states back into the code. This allowed the component updates to move toward a production pull request without relying only on screenshots or a traditional static handoff.
Splitting design work between MCP Server and Figma Agent
The fourth workflow begins with screens that exist only in code. An agent can use the MCP Server to move a code-based interface into Figma while reusing existing components and variables where possible.
In Figma's example, the first result provided a strong draft but still needed corrections to auto layout, typography, and color variables. Figma Agent then continued the work directly on the canvas, using deeper knowledge of the design system to improve those details.
Once the screen matched the intended design, it could be sent back to code through the MCP Server. This divides the work between two tools: the MCP Server handles the connection to external agents and code, while Figma Agent focuses on refinement inside the native design environment.
Design assets can be downloaded without manual export
Figma has also introduced a download_assets tool for its MCP Server. It lets agents retrieve actual exportable assets from design files as SVG, PDF, JPG, PNG, or the original source image.
This is different from capturing a screenshot. The agent receives the real asset in an appropriate format, making it more practical for icons, illustrations, source images, presentation graphics, and production interfaces.
Availability and current beta limitations
Figma says the write capabilities in its MCP Server are currently in open beta. Figma Agent and the production codebase integration for Figma Make remain in closed beta, so not every workflow described in the article is available to all users yet.
Teams should also review generated slides, boards, components, layouts, typography, variables, and code before publishing or shipping them. Figma's own examples show that agent-generated first passes still need human review and design refinement.
IMPORTANT: Figma MCP Server write capabilities are in open beta, while Figma Agent and Figma Make production codebase integration remain in closed beta. Availability and behavior may change as these features develop.{alertWarning}
Daisuki's Take: What This Means for Designers
The most useful part of the Figma MCP Server is not simply that an agent can generate another design. Its value comes from carrying real project context, components, variables, assets, fonts, and current information into the task.
For designers, this can reduce the manual work between research, presentations, workshops, prototypes, and production code. A deck can begin with recent information, a FigJam board can reflect current project decisions, and a coded interface can return to the canvas for visual refinement.
We would still treat every generated result as a first pass. Figma's examples make that limitation clear: designers remain responsible for reviewing layouts, correcting typography, mapping variables, replacing placeholders, and deciding whether the final work accurately reflects the product and design system.
Sources and Recommended Links
- 4 ways we're using our MCP server at Figma | Figma Official Blog
