figma-mcp-server

2 posts

figma

4 Ways We’re Using Our MCP Server at Figma | Figma Blog (opens in new tab)

Figma’s MCP server has expanded beyond design-to-code workflows to support Slides, FigJam, Figma Make, and the Figma design agent. The post argues that agents can now create and update production-ready artifacts while preserving team context, design systems, custom fonts, and brand consistency. In practice, humans still provide review and polish, but agents can complete much of the initial content and formatting work. ## Broader MCP capabilities - Agents can create or update: - Figma Slides presentations - FigJam boards - Figma Make prototypes - Canvas designs through the Figma agent - The server supports: - Custom fonts uploaded from a user’s computer - Downloading assets as SVG, PDF, JPG, or PNG through `download_assets` - Reusable MCP skills that encode team decisions and workflows - These capabilities connect external context and coding tools with Figma’s design environment. ## Creating and refreshing Figma Slides decks - Designer advocate Mallory Dean maintains an evergreen deck about Figma’s AI product launches. - She prompted an agent to: - Update the deck with the new Figma agent - Gather information from Slack, Google Drive, Shortcut blog posts, and release notes - Suggest content updates and new slides - The agent used the `use_figma` tool and `/figma-use-slides` skill to modify the existing deck template. - The first 80% of the content work was completed before human review. - Mallory still needed to replace images, edit copy, and approve the final slides. - Uploaded custom fonts allowed the deck to use the correct brand typefaces rather than web-safe substitutes. - Similar workflows can support: - Product kickoff decks - Design explorations - Go-to-market presentations - Sales decks with current product information - The stated benefit is faster production of presentations that remain aligned with a team’s design system and brand. ## Generating FigJam boards from live data - Product manager Prasant Lokinendi frequently prepares feature kickoff workshops. - Building an engaging FigJam board requires collecting company context and formatting the board for each session. - To streamline this process, he created the `/figjam-builder` skill. - Figma describes skills as a way to make agent outputs more consistent and context-aware. - Teams can use community-created skills or submit their own through Figma’s community-resources repository. Figma’s MCP workflows are most useful for accelerating repetitive preparation and production work while leaving humans responsible for review, judgment, and final creative decisions.

figma

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.