Skip to main content

Figma MCP Server

I’m intrigued to see Figma announce their own Model Context Protocol server to help LLMs achieve design-informed code generation. I’ve been also prototyping one utilizing Figma Context MCP that would provide a deeper integration between the Figma Toolkit and the code based tools such as Web Components in the Nord Design System.

A screenshot showing how text and layer names for the current Figma selection show up in the MCP server’s output which allows LLMs more easily achieve design-informed code generation. Text and layer names for the current Figma selection show up in the MCP server’s output which allows LLMs more easily achieve design-informed code generation.

Until recently, the only way to provide design context to AI tools was to feed an image of a design or an API response to a chatbot. This has changed with the recent release of Model Context Protocol (MCP), a standard for how applications provide context to LLMs.

You could think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.

Today, Figma has released three new tools in their MCP server that allow you to get context from Figma for the current selection or a specific node: one for code, another for images, and a third for variable definitions. You can also change the type of response the code tool returns inside the server settings, which allows for fine tuning based on the task at hand.

Read more

Written by Ariel Salminen.

Ariel Salminen.

Get in Touch

Does your team need help? I’m Ariel Salminen, a Design Systems Architect specialized in helping organizations build and maintain design systems. I’m available for both local and remote projects around the world.

Keyboard Shortcuts